quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Logarithmic Scale Control

Browse Source
This commit is contained in:
Sam Nolan 2022-02-13 21:53:17 +11:00
parent 3d3450d281
commit 29b6f30c2a
1 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/components/src/stories/SquiggleChart.tsx
View File

@ -2,13 +2,14 @@ import * as React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import * as _ from 'lodash'; import * as _ from 'lodash';
import './button.css'; import './button.css';
import type { LinearScale, Spec } from 'vega'; import type { PowScale, Spec } from 'vega';
import { run } from '@squiggle/squiggle-lang'; import { run } from '@squiggle/squiggle-lang';
import { createClassFromSpec } from 'react-vega'; import { createClassFromSpec } from 'react-vega';
let scales : LinearScale[] = [{ let scales : PowScale[] = [{
"name": "xscale", "name": "xscale",
"type": "linear", "type": "pow",
"exponent": {"signal": "xscale"},
"range": "width", "range": "width",
"zero": false, "zero": false,
"nice": false, "nice": false,
@ -20,7 +21,8 @@ let scales : LinearScale[] = [{
} }
}, { }, {
"name": "yscale", "name": "yscale",
"type": "linear", "type": "pow",
"exponent": {"signal": "yscale"},
"range": "height", "range": "height",
"nice": true, "nice": true,
"zero": true, "zero": true,
@ -48,6 +50,26 @@ let specification : Spec = {
"description": "x position of mouse", "description": "x position of mouse",
"update": "0", "update": "0",
"on": [{"events": "mousemove", "update": "1-x()/width"}] "on": [{"events": "mousemove", "update": "1-x()/width"}]
},
{
"name": "xscale",
"description": "The transform of the x scale",
"value": 1.0,
"bind": {
"input": "range",
"min": 0.1,
"max": 1
}
},
{
"name": "yscale",
"description": "The transform of the y scale",
"value": 1.0,
"bind": {
"input": "range",
"min": 0.1,
"max": 1
}
} }
], ],
@ -64,12 +86,12 @@ let specification : Spec = {
"from": {"data": "con"}, "from": {"data": "con"},
"encode": { "encode": {
"enter": { "enter": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0},
"tooltip": {"signal": "datum.cdf"} "tooltip": {"signal": "datum.cdf"}
}, },
"update": { "update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0},
"fill": { "fill": {
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }" "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
}, },
@ -83,10 +105,13 @@ let specification : Spec = {
"from": {"data": "dis"}, "from": {"data": "dis"},
"encode": { "encode": {
"enter": { "enter": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0}, "y2": {"scale": "yscale", "value": 0},
"width": {"value": 1} "width": {"value": 1}
},
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
} }
} }
}, },
@ -96,10 +121,12 @@ let specification : Spec = {
"encode": { "encode": {
"enter": { "enter": {
"shape": {"value": "circle"}, "shape": {"value": "circle"},
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"width": {"value": 5}, "width": {"value": 5},
"tooltip": {"signal": "datum.y"}, "tooltip": {"signal": "datum.y"},
},
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
} }
} }
} }