Data visualisation design + code.
Interactive data journalist @TheEconomist
Published
Edited
Sep 10, 2020
1 fork
10 stars
// Code adapted from https://observablehq.com/@d3/clipped-map-tiles
map = svg`<svg viewBox="0,0,${width},${height}" width=${width} height=${height}>
${tiles.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}">
`
)}
</svg>`
{
let svg = d3.select(DOM.svg(width, height));
svg
.selectAll('image')
.data(tiles)
.join('image')
.attr('xlink:href', d => url(d[0], d[1], d[2]))
.attr('x', d => Math.round((d[0] + tiles.translate[0]) * tiles.scale))
.attr('y', d => Math.round((d[1] + tiles.translate[1]) * tiles.scale))
.attr('width', tiles.scale)
.attr('height', tiles.scale);
return svg.node();
}
tiles.map(function([x, y, z], i, { translate: [tx, ty], scale: k }) {
return svg`<image xlink:href="${url(
x,
y,
z
)}" x="${Math.round((x + tx) * k)}" y="${Math.round((y + ty) * k)}" width="${k}" height="${k}">
`;
})
tiles = tile()
tile = d3
.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
projection = d3
.geoMercator()
.center(gb_centre)
.scale(20000)
.translate([width / 2, height / 2])
// Tiled historic maps from the National Library of Scotland https://maps.nls.uk/projects/api/
url = (x, y, z) => `https://geo.nls.uk/maps/api/nls/${z}/${x}/${y}.jpg`
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.
