31: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; }32: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; }33: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; }34:[] 2f:{"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"},{"id":156,"value":"md`### Simple: join()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":323,"value":"md`### Simple: join() with transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":171,"value":"md`### Join with enter, update and exit`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":250,"value":"md`### Join with enter, update, exit and transition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`### Join with Key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`### Illustration of the difference with and withou Key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":271,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"mutable feedback = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"margin = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"rad = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"W = width - 2 * margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"H = height - 2 * margin","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"chars = \"abcdefghij\".split(\"\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"colorScale = d3\n .scaleOrdinal()\n .domain(chars)\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":7,"value":"md `### External Libraries and Imports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {getSVG} from \"@spattana/topojson-and-geovisualization\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}