Visual Journalism on The Pudding @puddingviz Email: matt@pudding.cool. Support The Pudding: https://t.co/IPU14YnoFv
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}">
`)}
${tile().map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`
<image xlink:href="${urlTwo(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/v4/nytgraphics.8buxzzd8/${z}/${x}/${y}@2x.webp?access_token=pk.eyJ1Ijoibnl0Z3JhcGhpY3MiLCJhIjoiY2o5YTlyb3ptMTB5bDMybXF2ODRjdThlYyJ9.cytRa2y0Qt3Nedj4eUX67w`
urlTwo = (x, y, z) => `https://tiles-preview.firststreet.org/probability/depth/2035/100/${z}/${x}/${y}.png`
projection = {
const projection = d3.geoMercator().fitSize([width, height], vectors);
const zoom = Math.floor(Math.log2(projection.scale() * (2 * Math.PI)))*1.2;
const scale = Math.pow(2, zoom) / (2 * Math.PI);
projection.center([-84.191605, 39.758949])
// 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 = fetch("https://gist.githubusercontent.com/mbostock/94b9fd26e12c586f342d/raw/66bf6031fca45861cfe56c8ecc457502ad35c0b9/detroit.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1", "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.
