2d:null 2e:["$","title",null,{"children":"D3. Essentials - selection.join explained | philippkoytek | Observable"}] 33:[] 31:{"id":"bb7be9da983f89ed","slug":"d3-part-3-selection-join-explained","title":"D3. Essentials - selection.join explained","thumbnail":"6bee1d070f961f1871c739fff90339781f7068c68eb4e9d394eca36f1507cdef","access_level":"public","create_time":"$D2020-12-07T21:34:15.311Z","update_time":"$D2020-12-08T09:59:15.071Z","view_time":null,"first_public_time":"$D2020-12-07T21:53:43.360Z","has_unpublished_edits":null,"fork":{"id":"6c522dda5dd9daa3","slug":"selection-join","title":"selection.join","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"d1485b4e59b7f657","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":"starter_2024"},"version":470,"publish_version":470,"role":null,"authored":false,"authors":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null}],"members":[{"type":"individual","id":"6ec2f9ddd766f194","login":"philippkoytek","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74089590362f57eb01b7f7eb9d2e82b025e4e58a19cf3d989397abf44ce7db6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"02bbccbe7ab24f4b","slug":"d3-tutorial","title":"D3 Tutorial","owner":{"id":"d1485b4e59b7f657","login":"philippkoytek","name":""}},"type":"notebook","body":{"title":"D3. Essentials - selection.join explained","cells":[{"id":0,"value":"md`# D3. Essentials - selection.join explained\n\n*this notebook is forked from Mike Bostock's [selection.join](https://observablehq.com/@d3/selection-join) and extended with ideas from Jeff Heer's [Intro to D3](https://observablehq.com/@uwdata/introduction-to-d3-part-1)*\n\nD3’s [data join](https://bost.ocks.org/mike/join/) lets you specify exactly what happens to the DOM as data changes. This makes it fast—you can minimize DOM operations—and expressive—you can animate enter, update and exit separately. Yet power comes at a cost: the data join’s generality makes it hard to learn and easy to forget.\n\nWhat if D3 offered a more convenient and memorable API for joining data without sacrificing this power? Enter d3-selection 1.4’s [*selection*.join](https://github.com/d3/d3-selection/blob/master/README.md#selection_join).\n\nAnd here is how it works:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"selection = {\n const svg = d3.create(\"svg\");\n return svg.selectAll(\"text\").data(randomLetters())\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"datajoin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`For every value in our backing data, the operator checks whether a corresponding DOM element exists in a one-to-one manner:\n\n * The **enter** state is a selection that contains _placeholders_ for every data value that did not have a corresponding element in the original selection.\n\n * The **update** state is a selection that contains _existing_ elements that match a bound data value.\n\n * The **exit** state is a selection that also contains _existing_ elements, but for which a matching data value was not found.\n\nBy default the [\\`selection.join()\\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) operator appends **entering** elements and removes **exiting** elements (no action for **update**).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`### 1. Creating Elements from Nothing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 33)\n .attr(\"viewBox\", `0 -20 ${width} 33`);\n\n svg.selectAll(\"text\")\n .data(randomLetters())\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 16)\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`Above, *selection*.join appends a new SVG text element for each letter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`### 2. Updating a Selection that is not empty`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 33)\n .attr(\"viewBox\", `0 -20 ${width} 33`);\n\n while (true) {\n svg.selectAll(\"text\")\n .data(randomLetters())\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 16)\n .text(d => d);\n\n yield svg.node();\n await Promises.tick(2500);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`If the joining selection isn’t empty—as on subsequent iterations of the loop above— *selection*.join [appends](https://github.com/d3/d3-selection/blob/master/README.md#selection_append) [entering](https://github.com/d3/d3-selection/blob/master/README.md#selection_enter) elements *and* [removes](https://github.com/d3/d3-selection/blob/master/README.md#selection_remove) [exiting](https://github.com/d3/d3-selection/blob/master/README.md#selection_exit) elements to match the data! Entering and updating elements are [merged](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) (and [ordered](https://github.com/d3/d3-selection/blob/master/README.md#selection_order)), allowing chained operations on the result.\n\nIf you wish you can even control exactly what happens on enter, update and exit as desired!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`--------\n### 3. Explicitly Controlling Enter, Update, and Exit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 33)\n .attr(\"viewBox\", `0 -20 ${width} 33`);\n\n while (true) {\n svg.selectAll(\"text\")\n .data(randomLetters(), d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"fill\", \"green\")\n .text(d => d),\n update => update\n .attr(\"fill\", \"gray\")\n )\n .attr(\"x\", (d, i) => i * 16);\n\n yield svg.node();\n await Promises.tick(2500);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`Above, instead of passing a string to *selection*.join, separate functions are passed to handle *enter* and *update*. (You can pass a third function for *exit*, as shown below.) The returned enter and update selections are again merged and returned by *selection*.join. Note the [key function](https://github.com/d3/d3-selection/blob/master/README.md#selection_data), which specifies how to bind data so that the text content only needs to be set on enter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`By passing functions to *selection*.join, you can not only minimize DOM operations, but also animate enter, update and exit! ✨`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`### 4. Animating Enter, Update, and Exit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 33)\n .attr(\"viewBox\", `0 -20 ${width} 33`);\n\n while (true) {\n const t = svg.transition()\n .duration(750);\n\n svg.selectAll(\"text\")\n .data(randomLetters(), d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"fill\", \"green\")\n .attr(\"x\", (d, i) => i * 16)\n .attr(\"y\", -30)\n .text(d => d)\n .call(enter => enter.transition(t)\n .attr(\"y\", 0)),\n update => update\n .attr(\"fill\", \"black\")\n .attr(\"y\", 0)\n .call(update => update.transition(t)\n .attr(\"x\", (d, i) => i * 16)),\n exit => exit\n .attr(\"fill\", \"brown\")\n .call(exit => exit.transition(t)\n .attr(\"y\", 30)\n .remove())\n );\n\n yield svg.node();\n await Promises.tick(2500);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`The return value of the *enter* and *update* function is important—it specifies the selections to merge and return by *selection*.join. To avoid breaking the method chain, use [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) to create transitions. Or, return an undefined enter or update selection to prevent merging.\n\nThanks for reading and using D3! 🙏`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function randomLetters() {\n return d3.shuffle(\"abcdefghijklmnopqrstuvwxyz\".split(\"\"))\n .slice(0, Math.floor(6 + Math.random() * 20))\n .sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"