3e:null 3f:["$","title",null,{"children":"Learn D3: Joins | Erdal Yildiz | Observable"}] 45:T566,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // For the initial render, reference the current age non-reactively. const agedata = viewof agedata.value; const x = d3.scaleLinear() .domain([0, d3.max(agedata, d => d.value)]) .rangeRound([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(agedata.map(d => d.name)) .rangeRound([margin.top, margin.top + 20 * data.names.length]); let bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(agedata, d => d.name) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth() - 1); const gx = svg.append("g") .call(xAxis, x); const gy = svg.append("g") .call(yAxis, y); return Object.assign(svg.node(), { update(agedata) { const t = svg.transition().duration(750); gx.transition(t) .call(xAxis, x.domain([0, d3.max(agedata, d => d.value)])); gy.transition(t) .call(yAxis, y.domain(agedata.map(d => d.name))); bar = bar .data(agedata, d => d.name) .call(bar => bar.transition(t) .attr("width", d => x(d.value) - x(0)) .attr("y", d => y(d.name))); } }); }46:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1704814778448.168,"size":3516}] 43:{"id":"88ddce926708f70e","slug":null,"title":"Learn D3: Joins","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-01-09T15:39:38.448Z","update_time":"$D2024-01-09T15:39:38.448Z","view_time":null,"first_public_time":"$D2024-01-09T15:39:38.448Z","has_unpublished_edits":null,"fork":{"id":"4fed9b9938ac2369","slug":"learn-d3-joins","title":"Learn D3: Joins","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc9d499f43377845","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":"starter_2024","bio":"","following":false},"version":1098,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Joins","cells":[{"id":240,"value":"# Learn D3: Joins\n\nIf you were familiar with D3 going into this tutorial, you may be surprised by how little D3 selections have been mentioned.\n\nThat’s because you might not need them!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"D3 selections fill a particular niche: fast, incremental updates of dynamic graphics. If your focus is on static graphics, or graphics that can be redrawn from scratch each frame, you may prefer a different abstraction. On the other hand, if you want animated transitions or to squeeze the best performance out of modern browsers, selections are for you.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"(Even if you decide not to use selections, remember that D3 has myriad other useful tools for visualization. Scales, shapes, interpolators, colors, map projections, and many other features, can be used with Canvas, WebGL, or other DOM abstractions such as Observable’s HTML tagged template literal, React, or Svelte. And D3 can assist with data cleaning and analysis, with methods for statistics, grouping and aggregation, time series and parsing.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"At heart, D3 selections specify *transformation* rather than *representation*. Instead of expressing the desired state of the graphic (the DOM), you specify the changes (insertions, updates, and deletions) needed to transform the current state into the desired state. This is sometimes tedious but allows you to animate transitions and to minimize changes to the DOM, improving performance.\n\nLet’s see how.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"Say we want to show the letters of the alphabet. Not much of a visualization, but we’ll keep things simple to focus on technique. (For real-world examples, see the animation and interaction sections of the [D3 gallery](/@d3/gallery).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"chart1 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n svg.selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"This graphic is static in the sense that it is created from scratch each time the cell runs, making the D3 code equivalent in spirit to an HTML literal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"So why bother with selections? Well, for a static graphic, there’s little reason to.\n\nBut say you want to update this chart in response to changing data. And say you *don’t* want to redraw it from scratch—you want to apply the minimal set of updates to reflect the new data. You want to reuse existing elements, adding what you need, and removing what you don’t. Merely by moving the above code into a method that is called when the data changes, you get performant incremental updates! 😲","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"randomLetters = {\n while (true) {\n yield d3.shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"chart2.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"Let’s break down the code.\n\n*text* is a selection of text elements, initially empty, whose parent is the SVG element. This parent determines where entering text elements will be appended later.\n\nBy calling *selection*.data, *text* is bound to a new array of data, *letters*. This computes three disjoint subsets of the *text* selection: the *enter* selection representing new data for which there is no existing element; the *update* selection representing existing elements for which there is new data; and the *exit* selection representing existing elements for which there is no new data.\n\nAs a Venn diagram:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"

\n \n

The three selections computed by the selection.data.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"(These selections are hidden in the code: *selection*.data returns the *update* selection, from which you can call *selection*.enter or *selection*.exit to access the others.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"We could handle these three cases manually, but [*selection*.join](/@d3/selection-join) provides convenient defaults. The *enter* selection is appended; the *exit* selection is removed; and lastly the *update* and *enter* selections are merged, ordered and returned. We can then assign attributes and text on these entering-or-updating elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"We can be even more efficient by observing that we don’t need to reassign some attributes and text content on updating elements as long as the association between letter and text element remains constant. To preserve this association, *selection*.data needs a key function; and for precise operations on *enter*, *update*, and *exit*, *selection*.join needs corresponding functions. If updates are more common than enters and exits, this can greatly improve performance!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"chart3.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"As before, *selection*.join returns the merged *enter* and *update* selections, so we can share code that applies to both, such as setting the *x* attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"The key function passed to *selection*.data is used to compute a (string) key for each new datum and each selected element’s old datum, determining which datum is bound to which element: if an element and datum have the same key, that datum is bound to the element and the element is put in the *update* selection. Letters make good keys, so the identity function (d => d) is appropriate here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"(If no key function is specified, data is bound by index: the first datum is bound to the first element, and so on. As an exercise, try rewriting the code above to join by index. You’ll also want to swap setting the *x* attribute with setting the text content!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"Where selections really shine, though, are transitions! ✨\n\nBelow, letters enter from the top, slide horizontally when they update, and exit to the bottom. This is much easier to interpret than the instantaneous cuts above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n const t = svg.transition().duration(750);\n\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", -7)\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", (d, i) => i * 17)\n .text(d => d),\n update => update,\n exit => exit\n .call(text => text.transition(t).remove()\n .attr(\"y\", 41))\n )\n .call(text => text.transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"chart4.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Good transitions don’t just make a graphic “dance” to grab attention; they help the viewer understand through motion *how the data changes*. \n\nGood transitions maintain [*object constancy*](https://bost.ocks.org/mike/constancy/): a graphical element that represents a particular thing (such as the letter C) *before* the transition should represent the same thing *throughout and after* the transition, allowing continuous tracking by the viewer. If instead the meaning of a given element were to change during the transition, then the motion would be meaningless.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"How about a more practical example?\n\nThe chart below shows the top ten states (and D.C., the urban outlier) by percentage of population in a particular age group. It shows Utah’s disproportionately youthful population, a reflection of the LDS Church’s emphasis on raising families. Florida in contrast has a large retiree population, many in their seventies or older.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"As you change the selected age group, watch how the bars reorder to reflect the change in ranking. The *x*-axis simultaneously rescales to fit the new data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof agedata = Inputs.select(new Map(data.ages.map(age => [age, data.filter(d => d.age === age).sort((a, b) => d3.descending(a.value, b.value))])), {label: \"Age group\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"chart.update(agedata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"Only the top 10 bars are visible because the remaining bars are hidden below the chart. Hence *selection*.join is not needed: no bars enter or exit; they only update. This not only simplifies the code, but makes the transitions more meaningful, as the speed of entering or exiting bars now hints at their offscreen position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Animated transitions are often triggered by the reader poking or prodding in search of answers. Next let’s see how we can make charts respond to such queries.\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv();\n const ages = data.columns.slice(1);\n const totals = new Map(data.map(d => [d.name, d3.sum(ages, age => d[age])]));\n return Object.assign(d3.cross(data, ages).map(([d, age]) => ({name: d.name, age, value: +d[age] / totals.get(d.name)})), {names: data.map(d => d.name), ages});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call(g => (g.selection ? g.selection() : g).select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = margin.top + 20 * 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"margin = ({top: 30, right: 20, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"