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

hover line

Browse Source
This commit is contained in:
Conor Barnes 2022-08-23 12:04:35 -03:00
parent d0468f9ea3
commit 10db239920
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
packages/components/src/lib/distributionSpecBuilder.ts
View File

@ -16,7 +16,7 @@ export type DistributionChartSpecOptions = {
format?: string; format?: string;
}; };
export let linearXScale: LinearScale = { export const linearXScale: LinearScale = {
name: "xscale", name: "xscale",
clamp: true, clamp: true,
type: "linear", type: "linear",
@ -25,7 +25,7 @@ export let linearXScale: LinearScale = {
nice: false, nice: false,
domain: { data: "domain", field: "x" }, domain: { data: "domain", field: "x" },
}; };
export let linearYScale: LinearScale = { export const linearYScale: LinearScale = {
name: "yscale", name: "yscale",
type: "linear", type: "linear",
range: "height", range: "height",
@ -33,7 +33,7 @@ export let linearYScale: LinearScale = {
domain: { data: "domain", field: "y" }, domain: { data: "domain", field: "y" },
}; };
export let logXScale: LogScale = { export const logXScale: LogScale = {
name: "xscale", name: "xscale",
type: "log", type: "log",
range: "width", range: "width",
@ -44,7 +44,7 @@ export let logXScale: LogScale = {
domain: { data: "domain", field: "x" }, domain: { data: "domain", field: "x" },
}; };
export let expYScale: PowScale = { export const expYScale: PowScale = {
name: "yscale", name: "yscale",
type: "pow", type: "pow",
exponent: 0.1, exponent: 0.1,
@ -77,7 +77,7 @@ export function buildVegaSpec(
xScale = { ...xScale, domainMax: maxX }; xScale = { ...xScale, domainMax: maxX };
} }
let spec: VisualizationSpec = { const spec: VisualizationSpec = {
$schema: "https://vega.github.io/schema/vega/v5.json", $schema: "https://vega.github.io/schema/vega/v5.json",
description: "Squiggle plot chart", description: "Squiggle plot chart",
width: 500, width: 500,
@ -100,16 +100,20 @@ export function buildVegaSpec(
"name": "position", "name": "position",
"value": "[0, 0]", "value": "[0, 0]",
"on": [ "on": [
{ "events": "mousemove", "update": "hover ? xy() : null"}, { "events": "mousemove", "update": "xy() "},
{ "events": "mouseout", "update": "null"}, { "events": "mouseout", "update": "null"},
] ]
}, },
{
// { "name": "position_scaled",
// "name": "announcer", "value": 0,
// "value": "", "update": "position ? invert('xscale', position[0]) : null"
// "update": "hover ? 'Value: ' + hover.x : ''" },
// }, {
"name": "announcer",
"value": "",
"update": "hover ? 'Value: ' + hover.x : ''"
},
], ],
@ -302,38 +306,37 @@ export function buildVegaSpec(
"encode": { "encode": {
"enter": { "enter": {
"x": {"signal": "width", "offset": 1}, "x": {"signal": "width", "offset": 1},
"y": {"value": 0},
"fill": {"value": "black"}, "fill": {"value": "black"},
"fontSize": {"value": 20}, "fontSize": {"value": 20},
"align": {"value": "right"} "align": {"value": "right"}
}, },
"update": { "update": {
"text": {"signal": "position ? position[0]/width : ''"} "text": {"signal": "position_scaled ? position_scaled : ''", }
} }
} }
}, },
// { {
// "type": "rule", "type": "rule",
// "encode": { "encode": {
// "enter": { "enter": {
// x: {value: 0}, x: {value: 0},
// "y": {"scale": "yscale", "value":0}, "y": {"scale": "yscale", "value":0},
// y2: { y2: {
// signal: "height", signal: "height",
// offset: 2 offset: 2
// }, },
// "strokeDash": {"value": [5, 5]}, "strokeDash": {"value": [5, 5]},
// }, },
// "update": { "update": {
// "x": {"signal": "position[0] < 0 ? null : position[0] > width ? null : position[0]"}, "x": {"signal": "position ? position[0] < 0 ? null : position[0] > width ? null : position[0]: null"},
// "opacity": {"signal": "position ? 1 : 0"} "opacity": {"signal": "position ? 1 : 0"}
// }, },
// } }
// } }
], ],
legends: [ legends: [
{ {