Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
<div style="
background: #fff;
display: grid;
height: ${screen.height / screen.width * 100}vw;
grid-template-areas: 'a b' 'a b' 'a b' 'c c';
grid-gap: 10px;
">
${cell(
htl.html`<div style="grid-area: a; border: solid 1px #ccc;">`,
({width, height}) => BarChart(alphabet, {
x: d => d.letter,
y: d => d.frequency,
xDomain: d3.groupSort(alphabet, ([d]) => -d.frequency, d => d.letter), // sort by descending frequency
yFormat: "%",
yLabel: "↑ Frequency",
width,
height,
color: "steelblue"
})
)}
${cell(
htl.html`<div style="grid-area: b; border: solid 1px #ccc;">`,
({width, height, invalidation}) => ForceGraph(miserables, {
nodeId: d => d.id,
nodeGroup: d => d.group,
nodeTitle: d => `${d.id}\n${d.group}`,
linkStrokeWidth: l => Math.sqrt(l.value),
width,
height,
invalidation // stop the simulation when the cell is re-run
})
)}
${cell(
htl.html`<div style="grid-area: c; border: solid 1px #ccc;">`,
({width, height}) => BandChart(temperatures, {
x: d => d.date,
y1: d => d.low,
y2: d => d.high,
color: "steelblue",
curve: d3.curveStep,
yLabel: "↑ Temperature (°F)",
width,
height
})
)}
</div>
import {BarChart} from "@d3/bar-chart"
import {ForceGraph} from "@d3/force-directed-graph"
import {BandChart, temperatures} from "@d3/band-chart"
function cell(element, initialize) {
let invalidate = () => {};
let invalidation;
let width;
let height;
function resized() {
invalidate();
invalidation = new Promise(resolve => invalidate = resolve);
width = element.clientWidth;
height = element.clientHeight;
const content = initialize({width, height, invalidation});
content.style.position = "absolute";
content.style.width = "100%";
content.style.height = "auto";
if (element.firstChild) element.replaceChild(content, element.firstChild);
else element.appendChild(content);
}
const observer = new ResizeObserver(resized);
observer.observe(element);
Inputs.disposal(element).then(() => {
observer.disconnect();
invalidate();
});
element.style.position = "relative";
return element;
}
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.
