2e:null 2f:["$","title",null,{"children":"General Update Pattern | Jianan Li | Observable"}] 34:T8f6,updateGraph = { // First do data join and get the currently existing elements let existingElements = d3.select('#svgGeneralUpdatePattern') .select('#symbols') .selectAll('#symbol') .data(myData, (d) => d) // The new/entering elements let newElements = existingElements.enter() // The unused/exiting elements let unusedElements = existingElements.exit() // Move the existing elements to the correct location with a transition if (newElements.size() > 0) { // New elements will be added. Move existing elements quickly to make space. existingElements .transition(quickTransition) .attr('transform', (d,i) => `translate(${i*30}, 0)`) } else if (unusedElements.size() > 0) { // Elements will be removed. Delay moving existing elements. existingElements .transition(quickTransition) .delay(750) .attr('transform', (d,i) => `translate(${i*30}, 0)`) } // If new containers are needed to match data length, create them // Create new containers above visible area then 'drop' to desired location newElements .append('g') .attr('id', 'symbol') .attr('transform', (d,i) => `translate(${i*30}, -100)`) .each(addCircleAndText) .transition() // move containers to visible area with bouncing effect .delay(250) // wait for existing elements to move aside .duration(750) .ease(d3.easeBounce) .attr('transform', (d,i) => `translate(${i*30}, 0)`) .selectAll('circle') // change circle fill color from SeaGreen to orange .transition() .duration(500) .ease(d3.easeLinear) .style('fill', 'orange') // If there is any unused containers, remove them // Move unused containers off the visible area before removing them unusedElements .selectAll('circle') // change circle fill color from orange to Crimson .transition() .duration(500) .ease(d3.easeLinear) .style('fill', 'Crimson') unusedElements .transition() // move containers off the page before removing them .delay(500) // wait for color change finish .duration(1000) .ease(d3.easeBounce) .attr('transform', (d,i)=> `translate(${i*30}, 100)`) .remove() }35:[] 32:{"id":"4ee4ff5ff033ad80","slug":"general-update-pattern","title":"General Update Pattern","thumbnail":"3f8145673483bfe8133dd753181b1b1d7392003ad24e9afa810445de1e884897","access_level":"public","create_time":"$D2019-03-27T20:19:00.911Z","update_time":"$D2019-03-28T22:52:33.396Z","view_time":null,"first_public_time":"$D2019-03-28T03:13:02.387Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"881fc2b256e7c071","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":"starter_2024"},"version":407,"publish_version":407,"role":null,"authored":false,"authors":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null}],"members":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"General Update Pattern","cells":[{"id":0,"value":"md`# General Update Pattern`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md `

For a while I've been confused about what .enter() and .exit() are for and when to use them. But after reading the Enter and Exit chapter in Peter Cook's D3 in Depth, I finally understand it now.\nBelow is an example that I made to demonstrate my understanding. I took inspiration from both the examples provided in the tutorial, and Mike Bostock's notebook on selection.join.

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"chart = {\n const svg = d3.select(DOM.svg(width, 100))\n \n svg.attr('id', 'svgGeneralUpdatePattern')\n \n svg\n .append('g')\n .attr('id', 'symbols')\n .attr('transform', 'translate(13, 50)')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md `#### The HTML template below is equivalent to the chart initilization above`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Equivalent HTML as above\n// chart = html `\n// \n// `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"aToZ='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md `#### Use a generator to both initialize the data and periodically add or remove a value from it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"myData = {\n // Run this block after the chart is initialized\n chart\n // Initialize myData\n let myData = 'ACEGIKMOQSUWY'.split('');\n \n while (true) {\n if (myData.length <= 13) {\n const lettersToChooseFrom = aToZ.filter(letter => !myData.includes(letter))\n const letterToBeAdded = lettersToChooseFrom[Math.floor(Math.random() * lettersToChooseFrom.length)]\n myData.push(letterToBeAdded)\n myData.sort()\n } else if (myData.length >= 14) {\n const indexOfLetterToBeRemoved = Math.floor(Math.random() * myData.length)\n myData.splice(indexOfLetterToBeRemoved, 1)\n }\n\n yield Promises.tick(1750, myData);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md `#### Update the graph whenever the data changes. The general update pattern is reflected here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// Helper function to add a circle and text to each new container\naddCircleAndText = (d, i, nodes) => {\n \n let container = d3.select(nodes[i])\n \n container\n .append('circle')\n .attr('r', 13)\n .attr('cx', (d,i) => i*30)\n .style('fill', 'SeaGreen')\n\n container\n .append('text')\n .attr('transform', \"translate(0,6)\")\n .attr('text-anchor', 'middle')\n .style('font-family', 'sans-serif')\n .style('fill', 'white')\n .text(d)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"quickTransition = \n d3.transition('quickTransition')\n .duration(250)\n .ease(d3.easeLinear);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import { range } from '@mbostock/generator-cells-functions-and-objects'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"