News and graphics at @ClimateLab, a project of @PostGraphics.
viewof date = Scrubber(dates, {format: d => d.getUTCFullYear(), loop: false})
Plot.plot({
width: width,
height: width / 2,
grid: true,
inset: 5,
color: { legend: true },
x: {
type: "log",
label: "Income per capita (dollars)",
domain: [2e2, 1.5e5]
},
y: {
domain: [0, 99],
label: 'Life expectancy (years)'
},
r: {range: [1, Math.sqrt(Math.pow(width, 2) / 2) / 10]},
marks: [
Plot.dot(dataYear, {
r: 'population',
fill: "region",
fillOpacity: 0.8,
x: "income",
y: "lifeExpectancy",
stroke: "black",
strokeWidth: 1,
tip: true,
channels: {
name: (d) => d.name
}
}),
Plot.crosshair(dataYear, {x: "income", y: "lifeExpectancy"}),
Plot.text([`${1900 + date.getYear()}`], { x: width > 1000 ? 5e4 : 3e4, y: 15, fontSize: width > 800 ? 150 : 80, fill: 'darkgray'}),
Plot.frame(),
]
});
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.
