Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
import {
chart as histogram,
margin as histogram_margin
} with {
histogram_height as height,
histogram_data as data,
histogram_x as x
} from "@mbostock/d3-histogram"
color = d3.scaleSequential(d3.interpolateSpectral).domain([data[0].date, data[data.length - 1].date])
function ramp(color, n = 512) {
const context = DOM.context2d(n, 1, 1);
const interpolate = d3.interpolateNumber(...color.domain());
for (let i = 0; i < n; ++i) {
context.fillStyle = color(interpolate(i / (n - 1)));
context.fillRect(i, 0, 1, 1);
}
return context.canvas;
}
histogram_data = data.map(d => d.date)
histogram_x = d3.scaleTime()
.domain([d3.timeYear(data[0].date), d3.timeYear.ceil(data[data.length - 1].date)])
.range([histogram_margin.left, width - histogram_margin.right])
histogram_height = 240
histogram_color = d3.select(histogram).selectAll("rect").attr("fill", d => color(d[0]))
data = {
const parseDate = d3.timeParse("%m/%d/%Y");
const projection = d3.geoAlbersUsa().scale(1280).translate([480, 300]);
const data = await d3.tsv("https://gist.githubusercontent.com/mbostock/4330486/raw/fe47cd0f43281cae3283a5b397f8f0118262bf55/walmart.tsv", d => {
const p = projection(d);
p.date = parseDate(d.date);
return p;
});
data.sort((a, b) => a.date - b.date);
return data;
}
us = {
const us = await d3.json("https://unpkg.com/us-atlas@1/us/10m.json");
us.objects.lower48 = {
type: "GeometryCollection",
geometries: us.objects.states.geometries.filter(d => d.id !== "02" && d.id !== "15")
};
return us;
}
topojson = require("topojson-client@3")
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.
