{
const context = DOM.context2d(width, height),
path = d3.geoPath(projection, context);
context.beginPath();
path({ type: "Sphere" });
context.lineWidth = 3;
context.stroke();
context.clip();
context.lineWidth = .25;
for (const c of voronoi.polygons().features) {
context.strokeStyle = context.fillStyle = color(c.properties.site.id);
context.beginPath();
path(c);
context.fill();
context.stroke();
}
for (const c of geo.features) {
context.beginPath();
path(c);
context.fillStyle = d3
.lab(color(c.properties.sovereignt || c.id))
.darker(2);
context.fill();
}
context.beginPath();
path(geo);
path({ type: "Sphere" });
context.strokeStyle = "black";
context.stroke();
return context.canvas;
}
geoVertices = function(feature) {
const vertices = [];
const stream = {
point: function(lambda, phi) {
vertices.push([lambda, phi]);
},
lineStart: function() {},
lineEnd: function() {},
polygonStart: function() {},
polygonEnd: function() {}
};
d3.geoStream(feature, stream);
return vertices;
}
d3 = require("d3@7", "d3-geo-projection@3", "d3-geo-voronoi@2")
countries = geo.features.map(d =>
geoVertices(d).map(v => ((v.id = d.properties.sovereignt || d.id), v))
)
voronoi = d3.geoVoronoi()(countries.flat())
voronoi.polygons()
color = d3.scaleOrdinal([].concat(d3.schemePastel2).concat(d3.schemePastel1))
import { projection } from "@d3/interrupted-mollweide-oceans"
height = 500
// try 50m to add more islands, and see how huge parts of the globe change hands
geo = fetch(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_countries.geojson"
).then(d => d.json())
geo.features.filter(d => d.properties.name.match(/Fr/))
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.
