Data visualisation design + code.
Interactive data journalist @TheEconomist
Animated Map ChronologiesA Note on Time in Historical Ordnance Survey MapsOS ‘Old Series’ / ‘First Series’, England & WalesOS 1”-to-the-mile, Scotland: 1st Ed. With text annotationsOS 6”-to-the-mile, Great Britain: 2nd EdOS 1”-to-the-mile, Scotland: 1st EdAnimated Historical Map Chronologies: Code APIAnimated Historical Map Chronologies: Template CodeImport XYZ Map Tiles from Zip File
Render OS ‘Old Series’, England & Wales map imagery from XYZ tiles
files_resolved_9 = {
// Create Map of file paths to promises
const files = await zipreader(folder_zip_9, { type: 'base64' });
// Create new Map resolving all the promises to each image encoded as base64
let resolved_promises = await Promise.all(files.values());
let keys = [...files.keys()];
let new_map = {};
for (let i = 0; i < keys.length; i++) {
new_map[keys[i].replace(".png", "")] = resolved_promises[i];
}
return new_map;
}
url = (x, y, z) => `data:image/png;base64,` + files_resolved_9[`${z}/${x}/${y}`]
projection = d3
.geoMercator()
.center(gb_centre)
.scale(3000)
.translate([width / 2.2, height / 2.5])
tile = d3
.tile()
.size([width, height])
.zoomDelta(3) // forcing a higher zoom level to use higher resolution imagery
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
tiles = tile()
// 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 onerror="this.style.display='none'" xlink:href="${url(
x,
y,
z
)}" x="${Math.round((x + tx) * k)}" y="${Math.round(
(y + ty) * k
)}" width="${k}" height="${k}">
`
)}
${tiles.map(
([x, y, z], i, { translate: [tx, ty], scale: k }) => svg`
<image onerror="this.style.display='none'" xlink:href="${url(
x,
y,
z
)}" x="${Math.round((x + tx) * k) - 0.5}" y="${Math.round(
(y + ty) * k - 0.5
)}" width="${k + 1}" height="${k + 1}">
`
)}
</svg>`
{
let svg = d3.select(DOM.svg(width, height));
svg.style('background', 'black');
let image_g = svg.append('g').attr('id', 'image_g');
let paths_g = svg.append('g').attr('id', 'paths_g');
let geoGenerator = d3.geoPath().projection(projection);
// off-white background to sheet images to fill any gaps
image_g
.selectAll('path')
.data(old_series_polygons.features)
.join('path')
.attr('d', geoGenerator)
.attr('fill', 'rgb(245,237,231)');
// draw sheet images
image_g
.selectAll('image')
.data(tiles)
.join('image')
.attr('xlink:href', d => url(d[0], d[1], d[2]))
.attr('onerror', "this.style.display='none'")
.attr('x', d => Math.round((d[0] + tiles.translate[0]) * tiles.scale) - 0.5)
.attr('y', d => Math.round((d[1] + tiles.translate[1]) * tiles.scale) - 0.5)
.attr('width', tiles.scale + 1)
.attr('height', tiles.scale + 1)
.attr('id', d => d);
// cyan line marking the sheet boundaries
paths_g
.selectAll('path')
.data(old_series_polygons.features)
.join('path')
.attr('d', geoGenerator)
.attr('stroke', 'cyan')
.attr('stroke-width', 0.5)
.attr('fill', 'none');
return svg.node();
}
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.
