DATA IS ALIVE; pushing forward the world of market research data analytics viz
viewof pointerX = Inputs.text({label: "pointer offsetX"})
viewof viz = detectFrozen(Plot.plot({
height: 160,
y: {axis: "right", grid: true, nice: true},
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleX(aapl, Plot.pointerX({x: "Date", py: "Close", stroke: "red"})),
Plot.dot(aapl, Plot.pointerX({x: "Date", y: "Close", stroke: "red"})),
Plot.text(aapl, Plot.pointerX({px: "Date", py: "Close", dy: -17, frameAnchor: "top-left", fontVariant: "tabular-nums", text: (d) => [`Date ${Plot.formatIsoDate(d.Date)}`, `Close ${d.Close.toFixed(2)}`].join(" ")}))
]
}),
viewof frozen,
viewof pointerX
)
data = viz? ({frozen: frozen, ...viz }): null
detectFrozen = (element, frozen, pointerX) => {
element.addEventListener("pointerdown", e => {
//console.log(pointerX, e.offsetX);
if(!((frozen.value) && (pointerX.value == e.offsetX))) set(frozen, !frozen.value)
set(pointerX, e.offsetX)
}, {capture: true});
return element
}
import {set} from "@observablehq/synchronized-inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
