Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
map = {
const svg = d3.select(DOM.svg(width, height))
.attr("pointer-events", "none");
svg.append("style").text(`
.features path { fill: #ddd; pointer-events: all; }
.features path:hover { fill: #f00; }
`);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("d", path(graticule));
svg.append("g")
.attr("class", "features")
.selectAll("path")
.data(features)
.join("path")
.attr("d", path)
.append("title")
.text(d => d.properties.name);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("d", path(borders));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("d", path({
type: "MultiLineString",
coordinates: d3.merge(neighbors.map((n, i) => n.map(j => [centroids[j], centroids[i]])))
}));
svg.append("path")
.attr("d", path({
type: "MultiPoint",
coordinates: centroids
}));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", path(sphere));
return svg.node();
}
projection = d3.geoMiller()
path = d3.geoPath(projection).pointRadius(2)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
neighbors = topojson.neighbors(world.objects.countries.geometries)
centroids = features.map(d => d3.geoCentroid(d))
features = topojson.feature(world, world.objects.countries).features
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
world = FileAttachment("countries-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5", "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.
