I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Apr 11, 2023
7 stars
d3.geoPath + Canvas + Zoom + Panning
{
const context = DOM.context2d(width, height);
function redraw(transform) {
context.clearRect(0, 0, width, height);
context.save();
if (transform) {
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
}
context.beginPath();
context.stroke(path2D);
context.restore();
}
d3.select(context.canvas).call(
d3
.zoom()
.scaleExtent([0.1, 8])
.on("zoom", function(evt) {
redraw(evt.transform);
})
);
path(topojson.mesh(us)); // Draw the mesh to the path2D object
redraw();
return context.canvas;
}
path2D = new Path2D() //To precompute the path
path = d3.geoPath().context(path2D)
us = d3.json("https://unpkg.com/us-atlas@1/us/10m.json")
height = 600
d3 = require("d3@6")
topojson = require("topojson-client@3")
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.
