Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
data = {
const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));
const nodeByName = new Map;
for (const link of links) {
if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});
if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});
}
return {nodes: Array.from(nodeByName.values()), links};
}
sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])
.nodeSort(inputOrder ? null : undefined)
.nodeWidth(15)
.nodePadding(padding)
.extent([[0, 5], [width, height - 5]])
width = 954
viewof height = {
const form = html`<form class="observablehq--inspect">height = <input name=i type=number min=0 value=720 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
viewof padding = {
const form = html`<form class="observablehq--inspect">padding = <input name=i type=number min=0 value=10 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
viewof color = {
const form = html`<form class="observablehq--inspect">color = <input name=i type=color value="#dddddd" style="padding:2px;margin:-2px 0;"></form>`;
(form.oninput = () => form.value = form.i.value)();
return form;
}
import {rasterize, serialize} from "@mbostock/saving-svg"
d3 = require("d3@6", "d3-sankey@0.12")
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.
