29:null 2a:["$","title",null,{"children":"D3 Animation Exercise | Ayaan Kazerouni | Observable"}] 2f:[] 2d:{"id":"217a4c39bca871dd","slug":"csc477-d3-animation-exercise","title":"D3 Animation Exercise","thumbnail":"d67123e26d6f8bc5d5209aa8c2ef6eaacdd0ed31dfaeeee455b3a8b189385f93","access_level":"unlisted","create_time":"$D2026-05-13T16:34:39.004Z","update_time":"$D2026-05-27T18:02:43.080Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":78,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":27,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"D3 Animation Exercise","cells":[{"id":0,"value":"# D3 Animation Exercise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"