Published
Edited
Dec 24, 2019
5 forks
10 stars
Insert cell
Insert cell
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();
}
Insert cell
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;
}
Insert cell
projection = d3.geoMollweide()
Insert cell
path = d3.geoPath(projection)
Insert cell
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;
}
Insert cell
sphere = ({type: "Sphere"})
Insert cell
graticule = d3.geoGraticule10()
Insert cell
neighbors = topojson.neighbors(world.objects.countries.geometries)
Insert cell
countries = topojson.feature(world, world.objects.countries).features
Insert cell
world = FileAttachment("countries-50m.json").json()
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5", "d3-geo-projection@2")
Insert cell

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.
Learn more