Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 1, 2019
2 forks
12 stars
{
const context = DOM.context2d(dx, dy, 1);
const path = d3.geoPath(projection, context);
context.canvas.style.width = `${width}px`;
context.canvas.style.imageRendering = "pixelated";
// Initialize the context’s path with the desired boundary.
context.beginPath();
path(topojson.feature(world, world.objects.land));
yield context.canvas;
// Iterate over the grid and test whether points are inside.
for (let y = 0; y < dy; ++y) {
for (let x = 0; x < dx; ++x) {
if (context.isPointInPath(x + 0.5, y + 0.5)) {
context.fillRect(x, y, 1, 1);
}
}
yield context.canvas;
}
}
{
const context = DOM.context2d(dx, dy, 1);
const path = d3.geoPath(projection, context);
// Initialize an offscreen canvas with the desired boundary.
context.beginPath();
path(topojson.feature(world, world.objects.land));
context.fill();
// Extract the pixel values as a flat array.
const values = context.getImageData(0, 0, dx, dy).data.filter((_, i) => i % 4 === 3);
// Compute the contours.
const contours = d3.contours()
.size([dx, dy])
.thresholds([128])
.smooth(!hard)
(values);
// Render the contours as SVG.
path.context(null).projection(null);
return html`<svg width="${width}" style="height:auto;" viewBox="0 0 ${dx} ${dy}">
${contours.map(d => {
const p = svg`<path>`;
p.setAttribute("d", path(d));
return p;
})}
</svg>`;
}
dx = Math.round(width / size)
dy = {
const [[minX, minY], [maxX, maxY]] = d3.geoPath(projection).bounds({type: "Sphere"});
return Math.round(maxY - minY);
}
projection = d3.geoEqualEarth().fitWidth(dx, {type: "Sphere"})
land = topojson.feature(world, world.objects.land)
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json")
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.
