Plot.carto({
projection: projection, //"equalEarth",
rotate: [angle, 0],
color: { scheme: "rdylgn" },
marks: [
Plot.feature({ type: "Sphere" }, { fill: "lightblue" }),
Plot.feature(d3.geoGraticule10(), { stroke: "#fff", strokeWidth: 0.25 }),
Plot.features(countries.features, {
fill: (d) => d.properties.income_grp,
strokeWidth: 0.25,
stroke: "#000",
title: (d) => d.properties?.name_fr
}),
Plot.feature(flightPath("LineString"), { stroke: "white" }),
Plot.feature(flightPath("MultiPoint"), {
fill: "white",
fillOpacity: 0.5,
stroke: "white"
}),
Plot.feature({ type: "Sphere" }, { strokeWidth: 2 })
],
width: width,
height: width / 2,
marginLeft: 1,
marginRight: 1
})
Plot.carto({
facet: {
data: countries.features,
y: (_, i) => i % 2
},
marks: [
Plot.frame(),
Plot.feature({ type: "Sphere" }, { fill: "lightblue" }),
Plot.feature(land, { fill: "#999" }),
Plot.features(countries.features, {
fill: (d) => d.properties.name,
stroke: "white"
})
],
style: {
overflow: "visible"
},
height: 500
})
{
const svg = Plot.carto({
projection: "orthographic",
marks: [
Plot.feature({type: "Sphere"}, { fill: "none" }),
Plot.feature(land, { fill: "black" }),
Plot.feature({type: "Sphere"}, { strokeWidth: 2 }),
],
width: 600,
height: 600,
marginLeft: 1,
marginRight: 1,
marginTop: 1,
marginBottom: 1
});
do {
svg.projection.rotate([Date.now() / 100, -35]);
svg.update();
yield svg;
} while (animate);
}
Plot.carto({
projection: "bertin1953",
r: { range: [0, 15] }, // 🌶 rescaling; the default r is quite large for this dataset
marks: [
Plot.feature({ type: "Sphere" }, { fill: "none" }),
Plot.feature(land, { fill: "lightgray", fillOpacity: 0.5 }),
Plot.feature(land, { stroke: "gray" }),
Plot.points(largeCities, {
lonLat: (d) => [d.lng, d.lat],
fill: "steelblue",
fillOpacity: 0.7,
r: "population"
}),
Plot.feature({ type: "Sphere" }, { strokeWidth: 2 })
],
width,
height: width * 0.7,
marginLeft: 1,
marginRight: 1,
marginTop: 1,
marginBottom: 1
})
Plot.carto({
projection: d3.geoAlbersUsa(),
r: { domain: [30000, 1e5], type: "log" },
color: { type: "log", scheme: "rdbu" },
marks: [
Plot.feature(topojson.feature(us, us.objects.nation)),
Plot.feature(topojson.feature(us, us.objects.counties), {
strokeWidth: 0.15
}),
Plot.feature(topojson.feature(us, us.objects.states), { strokeWidth: 0.5 }),
Plot.points(largeCities.filter(d => d.country === "United States"), {
// 🌶 filter should work here
// filter: d => d.country === "United States",
lonLat: d => [d.lng, d.lat],
fill: "population",
fillOpacity: 0.7,
title: "city",
r: "population"
})
],
width,
height: width * 0.5,
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0
})
md`### Definitions`
income_grp = [
...new Set(countries.features.map((d) => d.properties.income_grp))
].sort()
md`### Imports and Libraries`
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.
