map = svg`<svg viewBox="0 0 ${width} ${height}">
${tiles.map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`
<image xlink:href="${url(x, y, z)}" x="${(x + tx) * k}" y="${(y + ty) * k}" width="${k}" height="${k}">
`)}
</svg>`
tiles = tile()
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]).map(Math.round))
.tileSize(512)
projection = d3.geoPolyhedralWaterman()
.scale(Math.pow(2, 9) / (1 * Math.PI))
.translate([width / 2, height / 2])
.center([-122, 37.7])
path = d3.geoPath(projection)
url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
height = 512
d3 = require("d3-geo@2", "d3-tile@1", "d3-array@3", "d3-geo@3", "d3-geo-projection@4", "d3-geo-polygon@1.8")
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.
