Also listed in…
d3-geo
map = svg`<svg viewBox="0 0 ${width} ${height}">
${tile().map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`
<image xlink:href="${url(x, y, z)}" x="${Math.round((x + tx) * k)}" y="${Math.round((y + ty) * k)}" width="${k}" height="${k}">
`)}
<path fill="none" stroke="red" d="${path(vectors)}"/>
</svg>`
url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
projection = {
const projection = d3.geoMercator().fitSize([width, height], vectors);
const zoom = Math.floor(Math.log2(projection.scale() * (2 * Math.PI)));
const scale = Math.pow(2, zoom) / (2 * Math.PI);
projection.center(projection.invert([width / 2, height / 2]));
projection.scale(scale);
projection.translate([width / 2, height / 2]);
return projection;
}
path = d3.geoPath(projection)
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.tileSize(512)
height = 600
vectors = topojson.feature(topology, topology.objects.detroit)
topology = FileAttachment("detroit.json").json()
d3 = require("d3-geo@3", "d3-tile@1")
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.
