31:[] 2f:{"title":"D3 Animation Exercise","cells":[{"id":0,"value":"# D3 Animation Exercise","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"In class code-along exercise. We'll do a really small example of the enter/update/exit cycle here, then apply it to a visualization with real data in the next notebook.\n\n**The enter/update/exit cycle in short**:\n\n* Data points joined to existing elements produce the **update** (inner) selection.\n* Leftover unbound data produce the **enter** selection (left), which represents missing elements.\n* Likewise, any remaining unbound elements produce the **exit** selection (right), which represents elements to be removed. ","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"{\n const data = [50, 110, 170, 230, 290]\n // .toReversed()\n example.render(data);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"example = {\n const container = d3.create('svg')\n .attr('width', width)\n .attr('height', 150);\n \n function render(data) {\n }\n \n return Object.assign(container.node(), { render });\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}