Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Dec 24, 2019
5 forks
10 stars
map = {
const svg = d3.select(DOM.svg(width, height));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("d", path(graticule));
svg.append("g")
.selectAll("path")
.data(countries)
.join("path")
.attr("fill", (d, i) => d3.schemeCategory10[index[i] % 10])
.attr("d", path);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("d", path(sphere));
return svg.node();
}
index = {
const index = new Int32Array(countries.length);
for (let i = 0; i < index.length; ++i) {
index[i] = d3.max(neighbors[i], j => index[j]) + 1 | 0;
}
return index;
}
projection = d3.geoMollweide()
path = d3.geoPath(projection)
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)
countries = topojson.feature(world, world.objects.countries).features
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.
