Public
Edited
May 16, 2023
map = vl
.markGeoshape({ stroke: 'white' })
.data(choroplethData)
.encode(
vl
.color({
condition: {
test: `!datum['properties.${'Life Ladder'}']`,
value: "lightgrey"
}
})
.fieldQ(`properties.${'Life Ladder'}`)
.scale({
scheme: 'spectral',
domain: [0, 10]
}),
vl.tooltip([
{
field: 'properties["Country Name"]',
type: 'nominal',
title: 'Country'
},
{
field: `properties.${'Life Ladder'}`,
type: 'quantitative',
title: 'Happiness'
}
])
)
.project(
vl
.projection("naturalEarth1")
.translate([450, 300])
.rotate(0)
.scale(200)
)
.width(width - 50)
.height(500)
.config({
view: { stroke: null }
})
.render()
choroplethData = {
const [worldTopo, worldHappiness, countryCodes] = await Promise.all([
d3.json('https://unpkg.com/world-atlas@1/world/110m.json'),
d3.csvParse("world_happiness_report_updated.csv"),
d3.csv(
"https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv"
)
]);
const worldGeoJSON = topojson.feature(worldTopo, "countries");
return worldGeoJSON.features.map(countryFeature => {
const iso3166Code = countryFeature.id;
// look up alpha 3 code, if not found treat as null
const alpha3 = countryCodes.find(
codes => codes['country-code'] == iso3166Code
)?.['alpha-3'];
const countryHappinessData = worldHappiness.find(
country => country['Country Code'] == alpha3
);
countryFeature.properties = countryHappinessData;
return countryFeature;
});
}
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.
