Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Sep 10, 2021
3 forks
Importers
76 stars
// See this notebook for implementation: https://observablehq.com/@mkfreeman/the-impact-of-vaccines
animated_chart
// Re-evaluate this cell to re-run the animation, see below for creating a button
addAnimation(
Plot.dot(astronauts, {
x: "date",
y: "age",
r: "missions",
fill: "orange",
fillOpacity: 0
}).plot()
)
// Animate this plot
// (awaiting visibility on the page)
visibility().then(() =>
addAnimation(
Plot.dot(astronauts, { x: "date", y: "age", r: 0 }).plot(),
{ type: "circle", attribute: "r", endValue: 10, delay: 100, replay: replay } // options for the animation
)
)
// Function to add an animation to a plot
addAnimation = (
plot,
{ type = "circle", attribute = "fill-opacity", delay = 50, endValue = 1 } = {}
) => {
const wrapper = d3.create("div");
const chart = d3.select(plot);
// Matching the camelCase of plot to the D3 attribute
let attr;
switch (attribute) {
case "fillOpacity":
attr = "fill-opacity";
break;
case "strokeOpacity":
attr = "stroke-opacity";
break;
default:
attr = attribute;
}
const marks = chart.selectAll(type).filter(function () {
return !this.parentNode.classList.contains("tick");
});
marks
.transition()
.duration(500)
.delay((d, i) => i * delay)
.style(attr, endValue);
if (attr === "r") {
marks
.transition()
.duration(500)
.delay((d, i) => i * delay)
.attr(attr, endValue);
}
return chart.node();
}
// Formatting the imported data for the plot
astronauts = list.map((d) => ({
name: d.name,
age: d.ageFirstMission,
date: d.missions[0],
missions: d.missions.length
}))
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.
