2c:null 2d:["$","title",null,{"children":"More on d3 join() | Sumant Pattanaik | Observable"}] 32:T46d,{ const [svgNode, svg] = getSVG(width, height, margin, true); const circleGroup = svg .append("g") .style('fill', "steelblue") .style('opacity', 0.5) .style('stroke', "black"); const drawCircles = () => { const t = circleGroup.transition().duration(750); circleGroup .selectAll("circle") .data(getRandomizedData()) .join( enter => enter .append("circle") .attr("r", rad) .attr("cx", d => d.x) .attr("cy", d => d.y) .style("fill", "black"), update => { update.call(selection => selection .transition(t) .attr("cx", d => d.x) .attr("cy", d => d.y) .style("fill", d => colorScale(d.id)) ); }, exit => exit.style("fill", "red").call(selection => selection .transition(t) .attr("cy", height) .remove() ) ); }; drawCircles(getRandomizedData()); d3.select("#update_2").on("click", drawCircles); return svgNode; }33:T47a,{ const [svgNode, svg] = getSVG(width, height, margin, true); const circleGroup = svg .append("g") .style('fill', "steelblue") .style('opacity', 0.5) .style('stroke', "black"); const drawCircles = () => { const t = circleGroup.transition().duration(750); circleGroup .selectAll("circle") .data(getRandomizedData(), d => d.id) .join( enter => enter .append("circle") .attr("r", rad) .attr("cx", d => d.x) .attr("cy", d => d.y) .style("fill", "black"), update => { update.call(selection => selection .transition(t) .attr("cx", d => d.x) .attr("cy", d => d.y) .style("fill", d => colorScale(d.id)) ); }, exit => exit.style("fill", "none").call(selection => selection .transition(t) .attr("cy", height) .remove() ) ); }; drawCircles(getRandomizedData()); d3.select("#update_3").on("click", drawCircles); return svgNode; }34:T5af,{ const [svgNode, svg] = getSVG(width, height, margin, true); const circleGroup = svg .append("g") .style('fill', "steelblue") .style('opacity', 0.5) .style('stroke', "black"); const drawCircles = () => { const t = circleGroup.transition().duration(750); circleGroup .selectAll("g") .data(getRandomizedData(), keyOption == "without key" ? null : d => d.id) .join( enter => { const groups = enter .append("g") .attr("transform", d => `translate(${d.x},${d.y})`) .style("fill", "black") .style("text-anchor", "middle"); groups.append("circle").attr("r", rad); groups .append("text") .style("stroke", "white") .style("alignment-baseline", "middle") .text(d => d.id); }, update => { update.call(selection => selection .transition(t) .attr("transform", d => `translate(${d.x},${d.y})`) .style("fill", d => colorScale(d.id)) ); }, exit => exit.style("fill", "none").call(selection => selection .transition(t) .attr("transform", d => `translate(${d.x},${height})`) .remove() ) ); }; drawCircles(getRandomizedData()); d3.select("#update_4").on("click", drawCircles); return svgNode; }35:[] 30:{"id":"46589e8f38ceefdf","slug":"d3-enter-update-exit","title":"More on d3 join()","thumbnail":"7b3cbdc9e30745f05f2dc41bdcf660c2603d8b9aa740772bc406b5cbe4609836","access_level":"public","create_time":"$D2021-04-01T15:59:05.439Z","update_time":"$D2021-04-01T23:17:29.050Z","view_time":null,"first_public_time":"$D2021-04-01T20:57:15.319Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":335,"publish_version":335,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2feaccf0386b8da9","slug":"d3-class","title":"D3 Class","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"titling":"auto","title":"More on d3 join()","cells":[{"id":0,"value":"md`# More on d3 join()\nenter, update, exit, in join() and key function in selection.data()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`### Simple: join()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n const [svgNode, svg] = getSVG(width, height, margin, true);\n\n const circleGroup = svg\n .append(\"g\")\n .style('fill', \"steelblue\")\n .style('opacity', 0.5)\n .style('stroke', \"black\");\n \n const drawCircles = () => {\n circleGroup\n .selectAll(\"circle\")\n .data(getRandomizedData())\n .join(\"circle\")\n .attr(\"r\", rad)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .style(\"fill\", d => colorScale(d.id));\n };\n drawCircles(getRandomizedData());\n\n d3.select(\"#update_0\").on(\"click\", drawCircles);\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`### Simple: join() with transition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"{\n const [svgNode, svg] = getSVG(width, height, margin, true);\n\n const circleGroup = svg\n .append(\"g\")\n .style('fill', \"steelblue\")\n .style('opacity', 0.5)\n .style('stroke', \"black\");\n \n const drawCircles = () => {\n const t = svg.transition().duration(750);\n circleGroup\n .selectAll(\"circle\")\n .data(getRandomizedData())\n .join(\"circle\")\n .transition(t)\n .attr(\"r\", rad)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .style(\"fill\", d => colorScale(d.id));\n };\n drawCircles(getRandomizedData());\n\n d3.select(\"#update_0_1\").on(\"click\", drawCircles);\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`### Join with enter, update and exit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"{\n const [svgNode, svg] = getSVG(width, height, margin, true);\n\n const circleGroup = svg\n .append(\"g\")\n .style('fill', \"steelblue\")\n .style('opacity', 0.5)\n .style('stroke', \"black\");\n const drawCircles = () => {\n circleGroup\n .selectAll(\"circle\")\n .data(getRandomizedData())\n .join(\n enter =>\n enter\n .append(\"circle\")\n .attr(\"r\", rad)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .style(\"fill\", \"black\"),\n update =>\n update\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .style(\"fill\", d => colorScale(d.id)),\n exit => exit.style(\"fill\", \"red\").remove()\n );\n };\n drawCircles(getRandomizedData());\n\n d3.select(\"#update_1\").on(\"click\", drawCircles);\n return svgNode;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`### Join with enter, update, exit and transition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"md`### Join with Key function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`### Illustration of the difference with and withou Key function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof keyOption = Radio([\"without key\", \"with Key\"], {\n label: \"Key Option:\",\n value: \"without key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"mutable feedback = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"margin = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"rad = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"W = width - 2 * margin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"H = height - 2 * margin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"chars = \"abcdefghij\".split(\"\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(chars)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"getRandomizedData = () => {\n const N = Math.ceil(Math.random() * 10);\n const step = W / N;\n const randomChars = d3.shuffle(chars.map(d => d)); //.sort(d3.ascending);\n const data = d3.range(N).map((d, i) => ({\n x: (i * W) / N,\n y: Math.random() * H,\n id: randomChars[i]\n }));\n mutable feedback = data.map(d => d.id);\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md `### External Libraries and Imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {getSVG} from \"@spattana/topojson-and-geovisualization\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"