Public
Edited
Oct 1, 2023
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, {x: "date", y: "unemployed", stroke: "industry", tip: "x"})
]
})
industries.columns
extent = d3.extent(industries, ({date}) => date)
// See also: https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/
mutable domain = extent
chart = Plot.plot({
x: {domain},
marks: [
Plot.ruleY([0]),
Plot.lineY(industries, {x: "date", y: "unemployed", stroke: "industry", tip: "x"})
]
})
{
const zoom = d3.zoom().on("zoom", handleZoom);
function initZoom() {
d3.select(chart).call(zoom);
}
function handleZoom(e) {
const scale = chart.scale("x");
const x = d3.scaleLinear().domain(scale.domain).range(scale.range);
const rescaledX = e.transform.rescaleX(x).domain();
const startDate = new Date(Math.max(rescaledX[0], extent[0]));
const endDate = new Date(Math.min(rescaledX[1], extent[1]));
mutable domain = [startDate, endDate];
}
initZoom();
}
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.
