Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
Published
Edited
Sep 10, 2021
3 forks
Importers
75 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
}))
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.