context = {
const chart = Plot.plot({
width,
height: 90,
marks: [Plot.areaY(aapl, { x: "Date", y: "Close", fill: "steelblue" })],
y: { ticks: 0, label: null }
});
const x = chart.scale("x"),
[x1, x2] = x.range;
const y = chart.scale("y"),
[y1, y2] = y.range;
let domain = x.domain;
const wrapper = svg`<svg viewBox="${chart.getAttribute("viewBox")}">${chart}`;
const brush = d3
.brushX()
.extent([
[x1, y2],
[x2, y1]
])
.on("brush end", (event) => {
const { selection, sourceEvent } = event;
domain = selection && selection.map(x.invert);
// broadcast changes if they are originated here
if (sourceEvent) dispatch.call("timeWindow", wrapper, domain);
});
d3.select(wrapper).call(brush);
dispatch.on("timeWindow.focus", function (value) {
if (this === wrapper) return; // ignore our own message
if (value == null) return;
domain = value;
const b = domain.map(x.apply);
if (b[0] === x1 && b[1] === x2) {
d3.select(wrapper).call(brush.clear);
} else {
d3.select(wrapper).call(brush.move, domain.map(x.apply));
}
});
return wrapper;
}
dispatch = d3.dispatch("timeWindow")
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
