chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
function render(land) {
context.clearRect(0, 0, width, height);
context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();
land.features.forEach(function(feature,i) {
context.beginPath(), path(feature), context.fillStyle = colour(+feature.id), context.fill();
});
context.beginPath(), path(sphere), context.stroke();
}
return d3.select(context.canvas)
.call(zoom(projection)
.on("zoom.render", () => render(land110))
.on("end.render", () => render(land50)))
.call(() => render(land50))
.node();
}
colour = d3.scaleOrdinal(d3.schemeCategory10)
function zoom(
projection,
{
// Capture the projection’s original scale, before any zooming.
scale = projection._scale === undefined
? (projection._scale = projection.scale())
: projection._scale,
scaleExtent = [0.8, 10],
translate = projection
.translate()
.map(d => d / (projection.scale() / scale))
} = {}
) {
const zoom = d3
.zoom()
.scaleExtent(scaleExtent.map(x => x * scale))
.on("start", zoomstarted)
.on("zoom", zoomed);
function zoomstarted() {}
function zoomed(event) {
const { k, x, y } = event.transform;
projection
.scale(k)
.translate([
translate[0] * (k / scale) + x,
translate[1] * (k / scale) + y
]);
}
return Object.assign(
selection =>
selection
.property("__zoom", d3.zoomIdentity.scale(projection.scale()))
.call(zoom),
{
on(type, ...options) {
return options.length
? (zoom.on(type, ...options), this)
: zoom.on(type);
},
filter() {
return zoom.filter(...arguments), this;
}
}
);
}
projection = d3[projectionName]().precision(0.1)
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"})
land50 = FileAttachment("countries-50m.json").json().then(world => topojson.feature(world, world.objects.countries))
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
