dataGroupedByYearContinent = d3.group(data, d => d.year, d => d.continent)
years = [...new Set(dataGroupedByYearContinent.keys())]
continents = [...new Set(dataGroupedByYearContinent.get(years[0]).keys())]
sliderSteps = years.map((y, i) => ({
method: "animate",
label: y,
args: [
[y],
{
mode: "immediate",
transition: { duration: 300 },
frame: { duration: 300, redraw: false }
}
]
}))
traces = frames[0].data
frames = years.map((y, i) => ({
name: y,
data: continents.map((continent) => lookup[y][continent])
}))
data = d3.csv(
"https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv",
d3.autoType
)
md`### External libraries and imports`
d3 = require("d3@6")
Plotly = require("plotly.js-dist")
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.
