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: Template CodeImport XYZ Map Tiles from Zip FileRender OS ‘Old Series’, England & Wales map imagery from XYZ tiles
Animated Historical Map Chronologies: Code API
url_oneInch = (x, y, z) =>
`data:image/png;base64,` + files_resolved[`${z}/${x}/${y}`]
// Example url function pointing instead to tileserver url (switch this in for the function above, and see what happens to the graphic at the bottom of the page)
// url_oneInch = (x, y, z) =>
// `https://tiles.wmflabs.org/bw-mapnik/${z}/${x}/${y}.png `
html`<img src="${await url_oneInch(123, 78, 8)}">`
import { animated_map, viewof year } with {
one_inch_byYear as year_data_features,
one_inch_byYear_cumulative as year_data_features_cumulative,
url_oneInch as url,
width_oneInch as width,
options
} from "a78b35a4c53c6e4c"
options = ({
width_padding: 200,
animation_speed: 1000,
shape_behind: gb,
draw_sheetOutlines: true,
colour_mode: "light", // or 'dark'
translate_x: -50
})
viewof year
animated_map(options)
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.
