labels = ["low", "", "high"]
label = i => labels[i] ? ` (${labels[i]})` : ""
data_year = data.filter(d => d.Year === `${year}`);
data_year.filter((o) => o.Country == "Somalia")
countries.objects.countries.geometries.filter(
(o) => o.properties.name == "Somaliland"
)
countries = FileAttachment("countries-50m.json").json()
canon_data = new Map(data_year.map(d => [rename.get(d.Country) || d.Country, {original_name: d.Country, ASAN: `${d.ASAN}`, ASOL: `${d.ASOL}`,}]))
canon_data_join = new Map(countries.objects.countries.geometries.map(d => [d.properties.name, canon_data.get(d.properties.name)]))
ASAN_thresholds = d3.scaleQuantile(data_year.map(d => d.ASAN), [0, 1, 2]).quantiles()
ASOL_thresholds = d3.scaleQuantile(data_year.map(d => d.ASOL), [0, 1, 2]).quantiles()
borders = topojson.feature(countries, countries.objects.countries)
legend = Plot.plot({
color: {
range: scheme,
transform: ([a, b]) => 3 * a + b,
unknown: "#ccc" // See Valdez-Cordova, Alaska
},
axis: null,
margin: 0,
inset: 18,
width: 106,
height: 106,
style: "overflow: visible;",
marks: [
Plot.dot(d3.cross([0, 1, 2], [0, 1, 2]), {
x: ([a, b]) => b - a,
y: ([a, b]) => b + a,
symbol: "square",
rotate: 45,
r: 14,
fill: (d) => d,
title: ([a, b]) => `ASOL${label(a)}\nASAN${label(b)}`,
tip: true
}),
Plot.text(["ASAN →"], {
frameAnchor: "right",
fontWeight: "bold",
rotate: -45,
dx: -12,
dy: 22
}),
Plot.text(["← ASOL"], {
frameAnchor: "left",
fontWeight: "bold",
rotate: 45,
dx: 12,
dy: 22
})
]
})
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.
