The avatar for @d3
D3
Bring your data to life.
Published
d3-tile
Edited
Aug 27, 2020
Fork of tile.tileSize
3 stars
Insert cell
Insert cell
map(tile.zoomDelta(-2))
Insert cell
map(tile.zoomDelta(-1))
Insert cell
map(tile.zoomDelta(0))
Insert cell
map(tile.zoomDelta(1))
Insert cell
map(tile.zoomDelta(2))
Insert cell
map = tile => svg`<svg viewBox="0 0 ${width} ${height}" style="display: block;">
${tile().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>`
Insert cell
projection = d3.geoMercator()
.scale(Math.pow(2, 18) / (2 * Math.PI))
.translate([width / 2, height / 2])
.center([-122, 37.7])
Insert cell
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]).map(Math.round))
.tileSize(512)
Insert cell
path = d3.geoPath(projection)
Insert cell
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`
Insert cell
height = 256
Insert cell
d3 = require("d3-geo@2", "d3-tile@1")
Insert cell

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.
Learn more