Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
mutable B0 = [[0.05, 20], [0.25 ,360], [0.75, 460], [0.95, 20]].map(([x, y]) => [x * Math.min(640, width), y])
function lerp([x0, y0], [x1, y1], t) {
const s = 1 - t;
return [x0 * s + x1 * t, y0 * s + y1 * t];
}
B1 = [lerp(B0[0], B0[1], t), lerp(B0[1], B0[2], t), lerp(B0[2], B0[3], t)]
B2 = [lerp(B1[0], B1[1], t), lerp(B1[1], B1[2], t)]
B3 = [lerp(B2[0], B2[1], t)]
height = 480
{
d3.selectAll(".line0").attr("d", `M${B0.join("L")}`);
d3.selectAll(".line1").attr("d", `M${B1.join("L")}`);
d3.selectAll(".line2").attr("d", `M${B2.join("L")}`);
d3.selectAll(".dot").attr("cx", B3[0][0]).attr("cy", B3[0][1]);
d3.selectAll(".bezier2a").attr("d", `M${B0[0]}Q${B0.slice(1, 3).join(" ")}`);
d3.selectAll(".bezier2b").attr("d", `M${B0[1]}Q${B0.slice(2, 4).join(" ")}`);
d3.selectAll(".bezier3").attr("d", `M${B0[0]}C${B0.slice(1).join(" ")}`);
d3.selectAll(".points circle").attr("cx", d => d[0]).attr("cy", d => d[1]);
}
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.
