df = file.csv({typed: true})
{ const selectedCountry = vl.selectSingle('select')
.fields(`properties.${year}`)
.bind(input)
.on('click')
.clear('dblclick')
const choropleth = vl
.markGeoshape({ stroke: 'grey', tooltip: {content: 'data'} })
.data(choroplethData)
.params(selectedCountry)
.title({text: "Happiness by Country", subtitle: "Click to select a country | Use the slider to change year | Double click to deselect"})
.encode(
vl
.color().if(selectedCountry, vl.color().fieldQ(`properties.${year}`).scale({scheme: 'spectral'})).value("grey"),
vl.tooltip([
{
field: 'properties["Country"]',
type: 'nominal',
title: 'Country'
},
{
field: `properties.${year}`,
type: 'quantitative',
title: 'Happiness'
}
])
)
.project(
vl
.projection("naturalEarth1")
.translate([450, 300])
.rotate(0)
.scale(200)
)
.width(width - 10)
.height(500)
.config({
view: { stroke: "black" }
})
const countryBarPlot = vl.markBar({align: 'left', dx: 3})
.data(choroplethData)
.params(selectedCountry)
.encode(
vl.x().fieldO('Year').scale({domain: [2005, 2020]}),
vl.y().fieldQ(`properties.${year}`).title("Happiness Score").scale({domain: [0, 10]})
).width(width - 300);
return vl.vconcat(choropleth, countryBarPlot).render()
}
choroplethData = {
const [worldTopo, worldHappiness, countryCodes] = await Promise.all([
d3.json('https://unpkg.com/world-atlas@1/world/110m.json'),
FileAttachment("world_happiness_chloropeth.csv").csv({ typed: true }),
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['alpha3'] == alpha3
);
countryFeature.properties = countryHappinessData;
return countryFeature;
});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
printTableTypes(wdhp_data);
import {p5} from "@tmcw/p5"
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from '@jonfroehlich/data-utilities'
import {printTableTypes} from '@jonfroehlich/data-utilities'
import {Choropleth} from "@d3/choropleth"
topojson = require("topojson-client")
import {vl as api} from "@vega/vega-lite-api"
import {legend} from "@d3/color-legend"
import {slider} from "@jashkenas/inputs"
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.
