Maps — and other representations of the world.
Public
Edited
Apr 1, 2024
Paused
1 fork
52 stars
world110m
world50m
import {world110m, world50m} from "@visionscarto/geo"
countries110m = topojson.feature(world110m, world110m.objects.countries)
Plot.geo(countries110m).plot({projection: "equirectangular"})
countries50m = topojson.feature(world50m, world50m.objects.countries)
Plot.plot({
width: 928,
height: 928*0.45,
projection: {
type: d3.geoInterruptedHomolosine,
inset: 2,
domain: { type: "Sphere" }
},
color: { scheme: "rdylbu" },
marks: [
Plot.graticule({clip: "sphere"}),
Plot.geo(countries50m, {
fill: d3.randomLcg(42),
stroke: "currentColor",
strokeWidth: 0.5,
title: (d) => `${d.properties.a3}. ${d.properties.name}`,
clip: "sphere"
}),
Plot.sphere()
]
})
map = ({show = ["110m", "50m"], ...options}) =>
htl.html`<div style="display:flex; flex-wrap:wrap">
${!show.includes("110m") ? "" : map1({
...options,
countries: countries110m,
caption: `Revised file, 110m`
})}
${!show.includes("110m") ? "" : map1({
...options,
countries: wa202_110,
caption: `World Atlas, 110m`
})}
${!show.includes("50m") ? "" : map1({
...options,
countries: countries50m,
caption: `Revised file, 50m`
})}
${!show.includes("50m") ? "" : map1({
...options,
countries: wa202_50,
caption: `World Atlas, 50m`
})}`
function map1({
countries,
center = [0, 0],
radius = 90,
caption = "World",
width = 230,
highlight = [""],
dx = 0,
dy = 0,
height = width === 230 ? width - 9 : undefined
} = {}) {
return Plot.plot({
marginRight: 9,
projection: {
type: width === 230 ? "mercator" : "equal-earth",
domain: d3.geoCircle().center(center).radius(radius)()
},
width,
height,
color: {
domain: highlight.map(String),
scheme: "pastel2",
unknown: "#efefef"
},
marks: [
Plot.geo(countries, {
fill: (d) => String(d.id),
stroke: "#ccc",
title: (d) => `${d.properties.name} (${d.id}). ${d.properties.a3 ?? ""}`
}),
countries !== countries110m
? []
: Plot.text(
countries.features,
Plot.centroid({
filter: (d) => highlight.find((h) => h == d.id) !== undefined,
text: (d) => d.properties.name,
dx, dy,
stroke:"white", fill:"currentColor"
})
),
Plot.frame()
],
caption
});
}
wa202_50 = d3
.json(await require.resolve("world-atlas@2.0.2/countries-50m.json"))
.then((d) => topojson.feature(d, d.objects.countries))
wa202_110 = d3
.json(await require.resolve("world-atlas@2.0.2/countries-110m.json"))
.then((d) => topojson.feature(d, d.objects.countries))
d3 = require("d3@7", "d3-geo-projection@4")
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.
