chord diagram playgroundarc diagram playgroundstreamgraph playgroundstacked area playgroundcircle packing playgrounddendogram / tree playgroundpie chart playgrounddonut chart playgroundtreemap playgroundradial barchart playgroundparallel coordinates playgroundradar chart playgroundbar chart playgroundcorrelogram playgroundheatmap playgroundridgeline playgroundoverlapping density playgroundbox plot playgroundsankey diagram playgroundviolin plot playgroundline chart playgroundbeeswarm playgroundhexbin playgroundcontour playgroundhistogram playgroundscatter plot playground
bubble chart playground
function _cleanCssName(string) {
return string.replace(/^[^a-z]+|[^\w:.-]+/gi, "")
}
data = {
const json = await FileAttachment("nations.json").json()
const bisectYear = d3.bisector(([year]) => year).left
function valueAt(values, year) {
const i = bisectYear(values, year, 0, values.length - 1)
const a = values[i]
if (i > 0) {
const b = values[i - 1]
const t = (year - a[0]) / (b[0] - a[0])
return a[1] * (1 - t) + b[1] * t
}
return a[1]
}
function dataAt(year) {
return json.map(d => ({
name: d.name,
region: d.region,
income: valueAt(d.income, year),
population: valueAt(d.population, year),
lifeExpectancy: valueAt(d.lifeExpectancy, year)
}))
}
return dataAt(year)
}
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.
