2c:null 2d:["$","title",null,{"children":"Data Join Example | Amber Hoak | Observable"}] 32:T491,// more on how to use selection.join: https://observablehq.com/@d3/selection-join updateFruit = (svg, data) => { const t = svg.transition().duration(750) const node = svg .selectAll(".imgs") .data(data, (d, i) => d.key) // Bind your data elements .join( enter => enter.append("image") .attr("x", 0) .attr("y", 0) .attr("width", (d) => 10) .attr("height", (d) => 10) .call(enter => enter.transition(t.delay((d, i) => 100 * i)) .attr("x", (d, i) => 10 + i * 100) .attr("y", 50) .attr("width", 100) .attr("height", 100) ), update => update .call( update => update.transition(t.delay((d, i) => 100 * i)) .attr("x", (d, i) => 10 + i * 100) .attr("y", 50) .attr("width", 100) .attr("height", 100) ), exit => exit .call(exit => exit.transition(t) .attr("height", 10) .remove() ) ) .attr("class", "imgs") .attr("href", (d) => `${imgRoot}${d.key}.svg`) return svg.node() }33:[] 30:{"id":"62d45021e46c2dbb","slug":"data-join-example","title":"Data Join Example","thumbnail":"585106d39ffbcfd29fdd15cca1e10678e6f7460dc0e97e64db2fc4d6920d73bb","access_level":"public","create_time":"$D2019-06-05T20:24:55.478Z","update_time":"$D2019-06-05T20:32:41.612Z","view_time":null,"first_public_time":"$D2019-06-05T20:32:57.020Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":77,"publish_version":77,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Join Example","cells":[{"id":0,"value":"md`# Data Join Example`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Example (psuedo code)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`Given: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md` $\"drawing\"$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`For each object in fruitData, we need to append an image onto the SVG where the x-position = 10*index. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n### Step 1. Data Join\nusing .data(), bind fruitData to svg. \nfruitData is an array of objects, so for best practice, we explicitely define how we will compare data as the data changes.\n\\`\\`\\`javascript\nconst node = svg\n \t .selectAll(“image”)\n \t.data(fruitData, (d) => d.key)\n\\`\\`\\`\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`\n### Step 2. Enter .enter(), Append .append(), Merge .merge() DOM Elements\nWhen we call .data(), the method is comparing each objects \"key\" value in fruitData to data \"key\" values we previously gave it if applicable. This basically acts as a filter to what will go into the enter() method.\n
Since this is the first time we are calling .data(), there is no previous data to compare and all of our data will get passed into the enter() method.\n

**Enter()**\n\\`\\`\\`javascript\nconst enterNodes = nodes \n .enter()\n .append(“image”)\n .attr(“x”, 0)\n .attr(“y”, 0)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`This has created three new image elements:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`**Update()**\n
Using the .merge() operand, we will update both enterNodes and nodes when data changes. This means that both new nodes we create (via enter()) and existing nodes will get this update.\n\\`\\`\\`javascript\nconst update = enterNodes.merge(nodes) \n .attr(“x”, (d,i) => 30 + i*10)\n .attr(“y”, 10 )\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`The result:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`
\n### Step 3. Exit .exit(), Remove .remove() DOM Elements no longer needed\n\n
Great! We updated our elements to the correct position. Now we add an exit().remove() to remove any unneeded elements. Again, since we don't have any previous elements, this isn't applicable. Think of this like a garabage collector.\n\\`\\`\\`javascript\nconst exit = nodes.exit().remove()\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`### Update fruitData\n
Our new fruitData: \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`Apple was in previous data, but orange is new. Therefore, **only orange** will go into the enter() method defined in step 1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`result:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`Now our .merge is going to update both our old element of \"apple\" and our new element of \"orange\". Going into .merge our elements are:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`Notice \"apple\" is at a new index, so that needs to be updated as well. After the update (step 2), the result is:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`The previous references of \"banana\" and \"watermelon\" will be passed into the exit().remove() (step 3)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`Result:
\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"circleData = [{\n\t\tkey: \"grapefruit\"\n\t},\n\t{\n\t\tkey: \"banana\"\n\t},\n\t{\n\t\tkey: \"watermelon\"\n\t},\n\t{\n\t\tkey: \"apple\"\n\t},\n\t{\n\t\tkey: \"cherries\"\n\t},\n\t{\n\t\tkey: \"orange\"\n\t}\n\t]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`### Putting it together`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"{\n\t// ========== CONSTANTS ========== \n\tconst MARGIN = 25\n\tconst HEIGHT = 300\n\tconst WIDTH = width\n\t// learn more on data joins: https://bost.ocks.org/mike/join/\n\tconst svg = d3.select(DOM.svg(WIDTH, HEIGHT))\n\n\t// continous call to update function\n\tconst interval = d3.interval((t) => {\n\t\tif (t > 1500 * 10) { // stop after 10 times\n\t\t\tinterval.stop()\n\t\t\treturn\n\t\t}\n\t\tlet endIndex = Math.floor(Math.random() * circleData.length - 1)\n\t\tif (endIndex < 1) {\n\t\t\tendIndex = 1\n\t\t}\n // change updateFruit() to updateFruit2()\n\t\treturn updateFruit(svg, d3.shuffle([...circleData]).slice(0, endIndex).sort())\n\t}, 1500)\n\n\treturn svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"imgRoot = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2860258/'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"