Plot.plot({
projection: "equal-earth",
width,
color: { scheme: "greys", range: [0.2, 0.8] },
marks: [
Plot.graticule(),
Plot.geo(land, { fill: "#AAA" }),
Plot.geo(countries, { fill: (d) => +d.id }),
Plot.geo(countries, {
className: "country",
pointerEvents: "fill",
strokeOpacity: 0,
title: (d) => d.properties.name
}),
Plot.sphere(),
() =>
svg`<style>
// g[aria-label=geo] path:hover {stroke: red; stroke-width: 2; stroke-opacity: 1.0; transition: stroke-opacity .1s }
.country path:hover {stroke: red; stroke-width: 2; stroke-opacity: 1.0; transition: stroke-opacity 1s }
`
]
})