Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
viewof stroke = {
const height = 500;
const context = DOM.context2d(width, height);
const curve = d3.curveCatmullRom(context);
// Create a new empty stroke at the start of a drag gesture.
function dragsubject() {
return [];
}
// Add to the stroke when dragging, render, and report the new value.
function dragged() {
const stroke = d3.event.subject;
stroke.push([d3.event.x, d3.event.y]);
context.clearRect(0, 0, width, height);
context.beginPath();
curve.lineStart()
for (let i = 0; i < stroke.length; ++i) {
curve.point(...stroke[i]);
}
curve.lineEnd();
context.stroke();
context.canvas.value = stroke;
context.canvas.dispatchEvent(new CustomEvent("input"));
}
d3.select(context.canvas).call(d3.drag()
.container(context.canvas)
.subject(dragsubject)
.on("start drag", dragged));
return context.canvas;
}
stroke
d3 = require("d3@5")
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.
