canvas = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
projection.clipExtent(null);
context.beginPath(), path(land), context.fillStyle = "#ddd", context.fill();
projection.clipExtent([[padding,padding], [width-padding,height-padding]]);
context.beginPath(), path(d3.geoCircle().center([10,52]).radius(90)()), context.strokeStyle = "#f00", context.stroke();
context.beginPath(), path(land), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
padding = 40
projection = d3
.geoBonne()
.parallel(52)
.rotate([-20, 0])
.center([0, 52])
.translate([width / 2, height / 2])
.scale(width)
height = Math.min(640, width)
land = topojson.feature(world, world.objects.land)
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1", "d3-geo-polygon@1", "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.
