choropleth = Plot.plot({
width: 928,
projection: { type: "equal-earth", rotate: [-10, 0] },
color: {
type: "quantize",
n: 10,
unknown: "#ddd",
label: "Share of Women with access to modern methods of family planning (%)",
legend: true,
width: 360
},
marks: [
Plot.sphere({ fill: "#f0faff", stroke: "currentColor" }),
//Plot.geo(land, { fill: "currentColor", dx: 1, dy: 1 }), // shade
Plot.graticule(),
Plot.geo(countries, {
fill: (d) => byName.get(d.properties.name)?.value,
stroke: "currentColor",
strokeWidth: 0.25,
title: (d) => `${d.properties.name}: ${byName.get(d.properties.name)?.value.toFixed(1) ?? "No data"}`
}),
// Gray swatch legend for no data
() =>
svg`<g transform="translate(0,3)"><rect width=16 height=15 fill="#ddd"></rect><text x=21 dy=1.1em fill=currentColor text-anchor=start>No data.</text></g>`
]
})
fp = FileAttachment("family-planning.csv").csv({typed: true})
byName0 = d3.index(fp, (d) => d.country)
minimalist = Plot.geo(countries, {
fill: (d) => byName0.get(d.properties.name)?.value
}).plot({ projection: "equirectangular", color: { scheme: "blues", unknown: "#ccc" } })
html`<small>${[...byName0.keys()].filter((name) => !countries.features.find((d) => d.properties.name === name)).sort().join(" / ")}`
rename = new Map([
["Antigua and Barbuda", "Antigua and Barb."],
["Bolivia (Plurinational State of)", "Bolivia"],
["Bosnia and Herzegovina", "Bosnia and Herz."],
["Central African Republic", "Central African Rep."],
["Cook Islands", "Cook Is."],
["Democratic People's Republic of Korea", "North Korea"],
["Democratic Republic of the Congo", "Dem. Rep. Congo"],
["Dominican Republic", "Dominican Rep."],
["Equatorial Guinea", "Eq. Guinea"],
["Eswatini", "eSwatini"], // formerly known as Swaziland
["Iran (Islamic Republic of)", "Iran"],
["Lao People's Democratic Republic", "Laos"],
["Marshall Islands", "Marshall Is."],
["Republic of Korea", "South Korea"],
["Russian Federation", "Russia"],
["Saint Kitts and Nevis", "St. Kitts and Nevis"],
["Saint Vincent and the Grenadines", "St. Vin. and Gren."],
["Sao Tome and Principe", "São Tomé and Principe"],
["Solomon Islands", "Solomon Is."],
["South Sudan", "S. Sudan"],
["Syrian Arab Republic", "Syria"],
["Türkiye", "Turkey"],
["United Kingdom of Great Britain and Northern Ireland", "United Kingdom"],
["United Republic of Tanzania", "Tanzania"],
["Venezuela (Bolivarian Republic of)", "Venezuela"],
["Viet Nam", "Vietnam"],
["occupied Palestinian territory, including east Jerusalem", "Palestine"],
])
byName = d3.index(fp, (d) => rename.get(d.country) ?? d.country)
renamed = Plot.geo(countries, {
fill: (d) => byName.get(d.properties.name)?.value,
stroke: "red",
strokeWidth: (d) => byName.get(d.properties.name)?.value ? 0 : 1.5,
sort: (d) => byName.get(d.properties.name)?.value,
title: d => byName.get(d.properties.name)?.value ? "" : d.properties.name,
}).plot({ projection: "equirectangular", color: { unknown: "lime", scheme: "greys" } })
Inputs.table(
[...byName].filter(
([name]) => !countries.features.find((d) => d.properties.name === name)
)
)
Inputs.table(
countries.features
.filter((d) => byName.get(d.properties.name)?.value == null)
.map(({ id, properties }) => ({ id, ...properties }))
)
import { land50m as land, countries50m as countries } 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.
