The avatar for @cdtrich
cd_trich
dataviz designer @EU_ISS
Public
Edited
Feb 13, 2024
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
indicatorNames = Object.getOwnPropertyNames(data[1])
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
viewof selectCountry = Inputs.select(countryNames, {label: "Select a country"})
Insert cell
viewof selectIndicator = Inputs.select(countryNames, {label: "Select a subindicator"})
Insert cell
Insert cell
scale = Plot.plot({
marginLeft: 60,
// marginRight: 60,
label: null,
x: {label: "Score",
domain: [0, 10]},
y: {padding: 0},
marks: [
Plot.barX(table, {y: "Country", x: "A1", inset: 0.5, tip: d => d.Country}),
Plot.ruleX([], {stroke: "white"}),
// Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
data
Insert cell
Insert cell
countries_status = new Map(data.map(({Country, Status}) => [Country, Status]))
Insert cell
Insert cell
countries_status.get("Argentina")
Insert cell
countries_total.get("Argentina")
Insert cell
mainmap = addTooltips( // Add tooltips
Plot.plot({
projection: "equal-earth", // Set the projection
// width: 1200,
marks: [
Plot.geo(
countries, {
fill: (d) => countries_status.get(d.properties.NAME_ENGL), stroke: "white", // Add county boundaries using the geo mark
title: (d) =>
`${d.properties.NAME_ENGL} \n ${countries_status.get(d.properties.NAME_ENGL)} \n Score: ${countries_total.get(d.properties.NAME_ENGL)}`, // Custom tooltip text
opacity: .5
}),
// Plot.text(countries, Plot.centroid({text: d => countries_name.get(d.properties.NAME_ENGL), fill: "black", stroke: "white"})),
],
color: {
range: ["#309ebe", "#df3144", "#ffde75", "#eeeeee"],
// domain: ["Free", "Not free", "Partially free", "no data"],
unknown: "#ddd", // Polygons with unknown values are gray
type: "categorical", // Linear scale for color progression
legend: true, // Add the legend
label: "SOI country status", // Update legend label
},
}),
// tooltip style
{opacity: 1, stroke: "#000000"}
)
Insert cell
dotmap = Plot.plot({
projection: "equal-earth",
marks: [
Plot.geo(countries, {stroke: "#cccccc"}),
Plot.sphere({stroke: "#eeeeee"}),
// Plot.geo(nation),
// Plot.hexbin(countries, {
// stroke: d => countries_total.get(d.properties.NAME_ENGL),
// r: d => countries_total.get(d.properties.NAME_ENGL)},
// Plot.geoCentroid()),
Plot.dot(countries, Plot.centroid({
stroke: d => countries_total.get(d.properties.NAME_ENGL),
r: d => countries_total.get(d.properties.NAME_ENGL)
})),
// Plot.tip(countries, Plot.pointer(Plot.centroid(d => d. geometry, {title: (d) => d.properties.NAME_ENGL})))
Plot.tip(countries, Plot.pointer(Plot.centroid({
stroke: d => countries_total.get(d.properties.NAME_ENGL),
r: d => countries_total.get(d.properties.NAME_ENGL),
title: d => `${d.properties.NAME_ENGL}\n${countries_status.get(d.properties.NAME_ENGL)}\nScore: ${countries_total.get(d.properties.NAME_ENGL)}`
})))
]
})
Insert cell
Plot.geoCentroid(countries)
Insert cell
dotmapVoro = Plot.plot({
projection: "equal-earth",
marks: [
Plot.voronoi(countries, Plot.geoCentroid({stroke: "#eeeeee"})),
Plot.dot(countries, Plot.geoCentroid({
stroke: d => countries_total.get(d.properties.NAME_ENGL),
r: d => countries_total.get(d.properties.NAME_ENGL)})),
]})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
countriesFiltered = countries.filter(item => countrynames.includes(item.Country))
Insert cell
Insert cell
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
Insert cell
import {tidy, mutate, filter} from "@pbeshai/tidyjs"
Insert cell
Insert cell
w = 1200
Insert cell
h = 1200
Insert cell
Insert cell

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.
Learn more