Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
{
const context = DOM.context2d(width, height);
const mutate = d3.geoProjectionMutator(interpolate);
const projection = mutate(0)
.rotate([-20, 0])
.center([0, 52])
.clipExtent([[-1, -1], [width + 1, height + 1]])
.translate([width / 2, height / 2])
.scale(width);
const path = d3.geoPath(projection, context);
while (true) {
mutate((Math.sin(Date.now() / 250) + 1) / 2);
context.clearRect(0, 0, width, height);
context.beginPath(), path(land), context.fill();
yield context.canvas;
}
}
interpolate = interpolateRawProjection(
d3.geoBonneRaw(52 * Math.PI / 180),
d3.geoConicEquidistantRaw(35 * Math.PI / 180, 65 * Math.PI / 180)
)
function interpolateRawProjection(raw0, raw1) {
return t => {
return (x, y) => {
const [x0, y0] = raw0(x, y);
const [x1, y1] = raw1(x, y);
return [(1 - t) * x0 + t * x1, (1 - t) * y0 + t * y1];
};
};
}
height = width * 2 / 3
land = {
const land = topojson.feature(world, world.objects.land);
const stream = d3.geoClipRectangle(-45, 25, 85, 75);
return d3.geoProject(land, {stream});
}
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1", "d3-geo-projection@2")
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.
