The avatar for @kpivert
Kurtis Pivert
Interested in communicating data-driven insights. Director of Data Science at @ASNDataAnalytics.
Public
Edited
Aug 8, 2023
Fork of Variations on a waffle chart ft. SVG
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpleDemo = {
/////////////////////////////////////
///////////// Animation /////////////
/////////////////////////////////////
let demo =svg.querySelectorAll('.demo')

//First let's select the cell with our chart, then the items that we want to animate and save it in a variable
gsap.set(demo, {opacity: 0})
const anim = gsap.to(demo, {opacity:1, stagger:1})

/////////////// Control the animation //////////////////
// Button controls to be able to play/pause etc the gsap animation
const restart = document.querySelector("#restartDemo");
restart.onclick = () => anim.restart()

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more