Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Dec 19, 2019
3 forks
12 stars
chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context).pointRadius(2.5);
context.beginPath();
path(graticule);
context.lineWidth = 1;
context.strokeStyle = "#ccc";
context.stroke();
context.beginPath();
path(sphere);
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path(mesh);
context.stroke();
context.beginPath();
path({type: "MultiPoint", coordinates: points});
context.fillStyle = "#f00";
context.fill();
return context.canvas;
}
projection = d3.geoOrthographic()
.fitExtent([[1, 1], [width - 1, height - 1]], sphere)
.rotate([0, -30])
height = Math.min(width, 640)
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
phi = (1 + Math.sqrt(5)) / 2
points = Array.from({length: n}, (_, i) => [
i / phi * 360 % 360,
Math.acos(2 * i / n - 1) / Math.PI * 180 - 90
])
mesh = d3.geoVoronoi(points).cellMesh()
d3 = require("d3-array@1", "d3-geo@1", "d3-geo-voronoi@1")
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.
