Unlisted
Edited
Nov 22, 2024
Plot.plot({
title: `Population size`,
projection: {
type: "mercator",
// rotate the projection to reattach the tip of eastern Siberia
rotate: [-10, 0],
// create a valid GeoJSON domain
domain: {
type: "FeatureCollection",
// filter the features on valid properties (there is no "continent" property on this dataset)
features: land.features.filter((d) =>
populationByCountry.get(d.properties.a3)
)
}
},
width,
// set the aspect ratio
height: width * 0.65,
marks: [
Plot.geo(
land.features,
// the centroid transform adds derived X and Y channels, allowing the tip: true option to work normally
Plot.centroid({
// don't filter or the shape is not drawn at all (e.g. North Korea)
fill: (d) => populationByCountry.get(d.properties.a3),
stroke: "black",
strokeWidth: 0.25,
// more advice to improve tip for some countries (US) https://github.com/observablehq/plot/pull/2098
tip: true,
// the title is a single text to show as a tip; you could use normal channels instead
title: (d) => {
const count = populationByCountry.get(d.properties.a3);
return `${d.properties.name}\nPopulation: ${
count ? count.toLocaleString() : "No data"
}`;
}
})
)
],
color: {
type: "quantize",
domain: Array.from(populationByCountry.values()),
range: d3.schemeGreens[5],
unknown: "#ccc"
}
})
import {world110m, world50m} from "@visionscarto/geo"
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.
