2d:null 2e:["$","title",null,{"children":"Variations on a waffle chart ft. SVG | Max Graze | Observable"}] 33:T57b,md ` ### Step 2: Make your animation In a new cell, start your animation and select the elements you want to move. There are a few different methods to select. Either by using \`querySelector\` to select elements from within your chart's cell, or you can use it directly in your GSAP animation. **Do not use \`d3.select\`**. \`\`\`js let demo = svg.querySelectorAll('.demo') \`\`\` or \`\`\`js gsap.to('.demo', ..... ); \`\`\` The following don't work: \`\`\`js let demo = d3.select(svg).selectAll('.demo') let demo = d3.selectAll('.demo') \`\`\` you'd need to use: \`\`\`js d3.selectAll('.demo')._groups[0] \`\`\` (Thanks Mario!) We have to set our boxes to have an opacity of 0, so they don't show up right away. \`\`\`js gsap.set(demo, {opacity: 0}) \`\`\` Check the console to see what these select. Then we create our little stagger animation. Since we are using buttons to prototype it, I've added \`paused\` so that it doesn't play right away. I've used \`gsap.to\` and so I write the state that I want the animation to go to. \`\`\`js const anim = gsap.to(demo, { paused: true, opacity: 1, stagger: 0.5 }); \`\`\` ### Gotchas: Be careful with prototyping your tween in the reactive notebooks. If you apply a style change and then want to get rid of it, you might have to refresh the page to see your tween revert to how it was before. If all else fails, reload the notebook. `34:[] 31:{"id":"7c46b4142b8fbc13","slug":"variations-on-waffle-charts-ft-svg","title":"Variations on a waffle chart ft. SVG","thumbnail":"a8bfee17a28fd0580209b7e08d147f50c3fdca58f2a98f73693ba17c9340e022","access_level":"public","create_time":"$D2022-11-03T23:20:43.276Z","update_time":"$D2022-11-09T17:17:15.075Z","view_time":null,"first_public_time":"$D2022-11-03T23:34:03.078Z","has_unpublished_edits":null,"fork":{"id":"fab72ce526ae160e","slug":null,"title":"Observable, GSAP and SVG","owner":{"id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze"}},"stars":3,"starred":false,"owner":{"type":"team","id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":"starter_2024","bio":""},"version":1411,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null,"bio":""}],"members":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5fa11bd6da3655bf","slug":"gsap","title":"GSAP","owner":{"id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze"}},"type":"notebook","body":{"titling":"auto","title":"Variations on a waffle chart ft. SVG","cells":[{"id":0,"value":"# Variations on a waffle chart ft. SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"md ` \n### Step 1: Make chart\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"demo = {\n /////////////////////////////////////\n /////////// Build the waffle ////////\n /////////////////////////////////////\n let numCols = 4\n let numRows = 4\n let waffleSize = 600\n let height = width/4\n let data = d3.range(numCols*numRows)\n const svg = d3\n .create('svg')\n .attr(\"viewBox\", [0,0, width, height])\n\n \n let scale = d3.scaleBand()\n\t\t.range([0,waffleSize])\n\t\t.domain(d3.range(numCols))\n .padding(0.1)\n\n const cellSize = scale.bandwidth()\n\n \n // make a grid to put the figures in\n\n\n const rects = svg.selectAll('.demo')\n .data(data)\n .join('rect')\n .attr(\"class\", \"demo1\")\n .attr(\"x\", d => scale(d%numCols))\n .attr(\"y\", d => height/4)\n // .attr(\"y\", d => scale(Math.floor(d/numCols)))\n .attr(\"rx\", 3)\n .attr(\"ry\", 3)\n .attr(\"width\", cellSize)\n .attr(\"height\", cellSize) \n .style('fill', \"cornflowerblue\")\n .attr('stroke', 'white')\n .attr('stroke-linecap', 'round')\n .attr('stroke-width', '3')\n .style('scale', 1)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"svg = {\n /////////////////////////////////////\n /////////// Build the waffle ////////\n /////////////////////////////////////\n let numCols = 4\n let numRows = 4\n let waffleSize = 600\n let height = width/4\n let data = d3.range(numCols*numRows)\n const svg = d3\n .create('svg')\n .attr(\"viewBox\", [0,0, width, height])\n\n \n let scale = d3.scaleBand()\n\t\t.range([0,waffleSize])\n\t\t.domain(d3.range(numCols))\n .padding(0.1)\n\n const cellSize = scale.bandwidth()\n\n \n // make a grid to put the figures in\n\n\n const rects = svg.selectAll('.demo')\n .data(data)\n .join('rect')\n .attr(\"class\", \"demo\")\n .attr(\"x\", d => scale(d%numCols))\n .attr(\"y\", d => height/4)\n // .attr(\"y\", d => scale(Math.floor(d/numCols)))\n .attr(\"rx\", 3)\n .attr(\"ry\", 3)\n .attr(\"width\", cellSize)\n .attr(\"height\", cellSize) \n .style('fill', \"cornflowerblue\")\n .attr('stroke', 'white')\n .attr('stroke-linecap', 'round')\n .attr('stroke-width', '3')\n .style('scale', 1)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"simpleDemo = {\n /////////////////////////////////////\n ///////////// Animation /////////////\n /////////////////////////////////////\n let demo =svg.querySelectorAll('.demo')\n\n //First let's select the cell with our chart, then the items that we want to animate and save it in a variable\n gsap.set(demo, {opacity: 0})\n \n const anim = gsap.to(demo, {opacity:1, stagger:1})\n \n\n /////////////// Control the animation //////////////////\n // Button controls to be able to play/pause etc the gsap animation\n const restart = document.querySelector(\"#restartDemo\");\n restart.onclick = () => anim.restart()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"That was pretty simple. What about a timeline? Timelines are super useful because they come with the handy controls that you see below. Great for prototyping. You can also just stack on the animations, and they will automatically be played one after another, unless you change the default settings. Here, we just use one animation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"buttons","database":"$undefined"},{"id":400,"value":"timelineChart = {\n const svg = d3.create(\"svg\")\n .style(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, width/1.5]);\n \n const g = svg.selectAll(\".waffle\") \n .data(waffles)\n .join(\"g\")\n .attr(\"class\", \"waffle\");\n \n const cellSize = waffleScale.bandwidth();\n const half = cellSize / 2;\n const cells = \n g\n .selectAll('rect')\n .data(d => d)\n .join('rect')\n .attr('class', 'waffleCells')\n .attr('id', d => nameScale(d.index))\n .attr('opacity', 0)\n .attr(\"fill\", d => d.index === -1 ? \"#ddd\" : colorScale(d.index));\n \n cells.attr(\"x\", d => waffleScale(d.x))\n .attr(\"y\", 0)\n .attr(\"rx\", 3).attr(\"ry\", 3)\n .attr(\"width\", cellSize).attr(\"height\", cellSize) \n .attr(\"y\", d => waffleScale(d.y) + 0); \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"\ntimeline = {\n let waffles = timelineChart.querySelectorAll('.waffle .waffleCells')\n\n gsap.set(waffles, {opacity: 0})\n\n let anim \n anim = gsap.timeline({ paused: true })\n\n anim.to(waffles, {\n opacity: 1,\n stagger: {\n grid: \"auto\",\n from: \"end\",\n axis: \"y\",\n each: .2\n }\n })\n const play = document.querySelector(\"#play\");\n const pause = document.querySelector(\"#pause\");\n const restart = document.querySelector(\"#restart\");\n const reverse = document.querySelector(\"#reverse\");\n play.onclick = () => anim.play();\n restart.onclick = () => anim.restart()\n pause.onclick = () => anim.pause();\n reverse.onclick = () => anim.reverse();\n\n\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"We can leverage the [Scrolltrigger](https://greensock.com/docs/v3/Plugins/ScrollTrigger) plugin's [batch](https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()) function to make a nice animation from the bottom-up. As Scrolltrigger's animations are linked to the viewport, it doesn't have the nice animation controls that we experienced above with the timeline, so you will have to restart the cells. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1258,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"scrolltriggerChart = {\n const svg = d3.create(\"svg\")\n .style(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, width/1.5]);\n \n const g = svg.selectAll(\".waffle2\") \n .data(waffles)\n .join(\"g\")\n .attr(\"class\", \"waffle2\");\n \n const cellSize = waffleScale.bandwidth();\n const half = cellSize / 2;\n const cells = \n g\n .selectAll('rect')\n .data(d => d)\n .join('rect')\n .attr('class', 'waffleCells2')\n .attr('opacity', 0)\n .attr(\"fill\", d => d.index === -1 ? \"#ddd\" : colorScale(d.index));\n \n cells.attr(\"x\", d => waffleScale(d.x))\n .attr(\"y\", 0)\n .attr(\"rx\", 3).attr(\"ry\", 3)\n .attr(\"width\", cellSize).attr(\"height\", cellSize) \n .attr(\"y\", d => waffleScale(d.y) + 0); \n let play = document.querySelector(\".scrolltrigger\")\nplay.onclick = () => scrolltriggerVersion()\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function scrolltriggerVersion() {\n gsap.registerPlugin(ScrollTrigger);\n let anim = gsap.timeline()\n anim.to('.waffle2 .waffleCells2', {\n scrollTrigger: {\n once: true,\n trigger :\n ScrollTrigger.batch('.waffle2 .waffleCells2', {\n onEnter: batch => {\n batch.forEach((waffle, index) => gsap.to(waffle, {\n opacity: 1, \n y: 0, \n scale: 1, \n stagger: {\n each: .5\n },\n delay: index * 0.1\n }))\n },\n \n})\n },\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"ghibli = d3.json(\"https://raw.githubusercontent.com/Laboratoria/CDMX011-data-lovers/master/src/data/ghibli/ghibli.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"colorScale = d3.scaleOrdinal(orange_teal )\n.domain(d3.range(species.length))\n// .range(colorPalette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"nameScale = d3.scaleOrdinal(species.map(d => d.species))\n.domain(d3.range(species.length))\n// .range(colorPalette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"waffleScale = d3.scaleBand()\n .domain(d3.range(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"plotHeight = 396","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"xScale = d3.scaleLinear()\n .domain([0, 10])\n .range([margin.left, 640 - margin.left])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"yScale = d3.scaleLinear()\n .domain([0,10])\n .range([plotHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"waffles = {\n const array = [];\n const max = species.length -1 ; \n let index = 0, curr = 1, \n accu = Math.round(species[0].pct), waffle = [];\n \n for (let y = 9; y >= 0; y--)\n for (let x = 0; x < 10; x ++) {\n if (curr > accu && index < max) {\n let r = species[++index].pct;\n while(r === 0 && index < max) r = species[++index].pct;\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n } \n array.push(waffle);\n \n \n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"height = width/1.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"species = {\nlet arr = ([\n {species: \"human\", count:\t130},\n {species : \"animal\", count:\t22},\n {species : \"supernatural\", count:\t16},\n]\n )\n return arr.map(d => ({\nspecies: d.species,\ncount: d.count,\npct: +(d.count/168*100).toFixed(0)\n\n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"waffleSize = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"orange_teal = [d3.rgb(228,141,49), d3.rgb(63, 171, 171), d3.rgb(44,49,122), d3.rgb(251, 240, 202)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"## GSAP Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"TextPlugin = tp.TextPlugin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"ScrollTrigger = st.ScrollTrigger","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"tp = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/TextPlugin.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"st = require('gsap@3.9.1/dist/ScrollTrigger.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"