Spinning globe input, with neighbour and selected country colouring, zoom and rotationWorld map country selector input, with neighbour colouring, zoom and rotationInputs in gridEditable tableWorld Map Input with Zoom and PanWorld map country selector input, with neighbour colouring, zoom and pan
World Map Input with Zoom and Pan
Also listed in…
Mapping
chart
countryNamesLookup.get(chart)
ids = {
let s = new Set(land50.features.map(d=>+d.id))
let a = Array.from(s);
return a}
numcolors = ids.length
colours = d3.range(numcolors).map(x => d3.interpolateSpectral(x / numcolors))
colourmap = {
let m = new Map()
ids.forEach((d,i) => m[d] = colours[i])
return m
}
reversecolourmap = {
let m = new Map()
ids.forEach((d,i) => m[colours[i]] = d)
return m
}
projection = d3[projectionName]().precision(0.1)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
sphere = ({type: "Sphere"})
land50 = FileAttachment("countries-50m.json").json().then(world => topojson.feature(world, world.objects.countries))
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
