2d:null 2e:["$","title",null,{"children":"Understanding Enter, Update, and Exit Selections in D3 | Arin R. Greenwood | Observable"}] 33:T47e,## Introduction to Data Joins In the previous lesson, we learned how to create transitions to introduce basic dynamic behavior into our charts. As we discussed, dynamic charts are especially crucial when we have lots of data that we need to present but don't want to overwhelm our audience and want to avoid a messy, over-crowded static chart. We learned how to chain transitions to dynamically change the color, size, shape or location of our data points, and even transition from one static chart to another with a single click. So far, we're only able to add this dynamic behavior to every element of our dataset at once, assuming our data is read in once at the beginning of the program and then never touched again. But what if we want to look at data where the values themselves change over time? Today, we will transition (ha..ha..ha..) to a topic that is arguably the most challenging and most powerful tool at our disposal in D3: **data joins**. We've been using D3 **selections** for a few weeks now without really thinking about what we're doing. For example, to make a bar chart, we've blindly been using something like the following:34:T5d2,I've gone ahead and labeled the three regions of these overlapping circles with some new terminology: *enter*, *update*, and *exit*. Each of these regions is a type of **selection**. The **enter selection** corresponds to data that exists but has not yet been bound to a GUI element - it does not overlap at all with the "Elements" circle. The **exit selection** is the opposite: this corresponds to GUI elements that have been created but no longer have data bound to them - maybe they were bound before and this binding was removed, or maybe they never had any data elements to begin with. The third selection is the **update selection** which encompasses everything we are already familiar with: data that exists and has exactly one GUI element bound to it. Now, why might you want to separate these selections? Why not just lump all three selection types together and not cause all this extra worry? For one, separating the selections out into *enter*, *exit*, and *update* allows us to control their transitions, animations, and styles separately! Maybe you want to treat existing data differently than new data. You could add attention to new data being added by introducing a *fade in* transition, or an emphasis - something like you probably used to do in Powerpoint presentations. As we next look at an example of dynamic data joins to understand the power of these selections, I hope it's helpful to keep this Venn Diagram in mind to visualize what is going on behind the code.35:T456,{ const svg = d3.create("svg").attr("width", w).attr("height", h); while (true) { const apps = sample(10, dataset); const t = svg.transition().duration(2000); svg .selectAll("text") .data(apps, (d) => d.app_name) .join( (enter) => enter .append("text") .text((d) => d.app_name) .attr("x", 100) .attr("y", (d, i) => 20 + i * 30) .style("opacity", 0) .transition() .duration(2000) .attr("x", 5) .style("opacity", 1) .style("fill", "green") .selection(), (update) => update .transition() .duration(2000) .attr("y", (d, i) => 20 + i * 30) .style("fill", "black") .selection(), (exit) => exit .style("fill", "red") .transition() .duration(2000) .attr("x", -50) .style("opacity", 0) .remove() ); yield svg.node(); await Promises.tick(3000); } }36:T930,What did you notice in the code above? For one, our join method no longer looks as simple as *join('rect')* or *join('text')* - in fact, there's a lot going on in there now! The enter, update, and exit selections are individually controlled *inside* the join method, and you can string as many attributes, transitions, styles, etc. as your heart desires inside of each to customize the different selections. In this case, we colored the **enter selection** green, the **update selection** black and the **exit selection** red, and created different transitions for each. At each iteration, a new dataset called "apps" is created as a random subset of 10 rows from the larger dataset. You can watch as, each time the dataset changes, the new data points (those app names that weren't in the previous subset of data) enter from the right and are colored green. The data points/apps that were in the previous subset of data but are no longer in the next set get marked "exit", turn red and leave off to the left of the screen. The remaining data points, those apps that existed in the previous subset and also in the current subset, are black and just move up and down to reorder according to the new data subset. These latter data points are the update selection. A few points:

In the enter selection, you must always *append* your GUI elements explicitly.
In the exit selection, you must always *remove* your elements when you are done with them. If no exit selection is written explicitly, this is the default.
The output of each section of the data join (enter/update/exit) must be a *selection* object. If you add transitions in your method chain, everything after the transition method becomes a *transition* object instead. To counteract this, you must always end the chain with the *selection()* method to convert the object back to a selection.
In the data binding that comes right before the join, you must explicitly tell D3 how to "match" the data it reads in by giving it a unique identifier. This is essential so that it knows which data belongs in each of the enter/update/exit selections. The identifier is usually the column in your dataset that has no duplicates, such as a name or ID number. This wasn't necessary with static data, but it's always good practice to do anyways.

37:Tc43,{ const w = 600; const h = 300; const chart5Svg = d3.create("svg").attr("width", w).attr("height", h); const sample_dataset = sample_new(10); //Set up scales and axes first outside of while loop const xScale = d3 .scaleLinear() .domain([20, d3.max(sample_dataset, (d) => d.downloads)]) .range([0, w - 100]); const yScale = d3 .scaleLinear() .domain([65, d3.max(sample_dataset, (d) => d.thirty_day_keep)]) .range([h - 80, 0]); //set up rScale const rScale = d3 .scaleSqrt() .domain([ d3.min(sample_dataset, (d) => d.thirty_day_keep), d3.max(sample_dataset, (d) => d.thirty_day_keep) ]) .range([0, 10]); //draw the x axis const xaxis = chart5Svg .append("g") .attr("class", "Xaxis") .attr("transform", `translate(50, ${h - 50})`) .call(d3.axisBottom(xScale)); //draw the y axis const yaxis = chart5Svg .append("g") .attr("class", "Yaxis") .attr("transform", `translate(50,30)`) .call(d3.axisLeft(yScale).tickFormat((d) => d + "%")); //add tick marks while (true) { let sample_dataset = sample_new(10); xScale.domain([0, d3.max(sample_dataset, (d) => d.downloads)]); yScale.domain([65, d3.max(sample_dataset, (d) => d.thirty_day_keep)]); rScale.domain([ d3.min(sample_dataset, (d) => d.thirty_day_keep), d3.max(sample_dataset, (d) => d.thirty_day_keep) ]); chart5Svg .selectAll("circle") .data(sample_dataset, (d) => d.app_name) .join( (enter) => enter .append("circle") .attr("cx", (d, i) => xScale(d.downloads) + 35) .attr("cy", (d) => yScale(d.thirty_day_keep) + 30) .attr("r", (d) => rScale(d.thirty_day_keep)) .style("fill", "#a9d64a") //green color .attr("stroke", "black") //added to see the smaller circles better .style("opacity", 0) .transition() .duration(2000) .style("opacity", 1) .selection(), (update) => update .transition() .duration(2000) .attr("cx", (d, i) => xScale(d.downloads) + 35) .attr("cy", (d) => yScale(d.thirty_day_keep) + 30) .style("fill", "#774ad6") .selection(), (exit) => exit .style("fill", "red") .transition() .duration(2000) .attr("x", -50) .style("opacity", 0) .remove() ); xaxis.transition().duration(2000).call(d3.axisBottom(xScale)); //call the yAxis yaxis.transition().duration(2000).call(d3.axisLeft(yScale)); chart5Svg .append("text") .attr("transform", `rotate(-90)`) .attr("x", -h / 2) .attr("y", 15) .attr("text-anchor", "middle") .classed("axis-label", true) .text("Retention"); chart5Svg .append("text") .attr("x", h) .attr("y", 290) .attr("text-anchor", "middle") .classed("axis-label", true) .text("Downloads"); yield chart5Svg.node(); await Promises.tick(3000); } }38:[{"id":"63048785aa5fdf5a185905d4ab6e35f194545c7c241b4de048375360dff8ca7e33e89fd0b8417f305066caf6c4b1b532f9264234fad4cfb2c2dcabaadbb6078c","href":"https://static.observableusercontent.com/files/63048785aa5fdf5a185905d4ab6e35f194545c7c241b4de048375360dff8ca7e33e89fd0b8417f305066caf6c4b1b532f9264234fad4cfb2c2dcabaadbb6078c","name":"fake_app_download_rating.csv","type":"text/csv","lastModified":1669578936564.938,"size":593},{"id":"8f623b2c5584c265f711a7324a27b818c10e4bd35672f40db3193b2c2d1027cf5502299d0fc744ff33c6d171988eb3614406a8aea047bed6d76863c059c53226","href":"https://static.observableusercontent.com/files/8f623b2c5584c265f711a7324a27b818c10e4bd35672f40db3193b2c2d1027cf5502299d0fc744ff33c6d171988eb3614406a8aea047bed6d76863c059c53226","name":"DataJoin3@1.PNG","type":"image/png","lastModified":1670971962420.996,"size":16011},{"id":"f2824c0684b255bb6261967156343cb2fb326ebd45defed423ce8c7ea80928941223c6d14af4b10c7d629abb7b3a2736172403499538d5dc17de45205930a407","href":"https://static.observableusercontent.com/files/f2824c0684b255bb6261967156343cb2fb326ebd45defed423ce8c7ea80928941223c6d14af4b10c7d629abb7b3a2736172403499538d5dc17de45205930a407","name":"DataJoin4.PNG","type":"image/png","lastModified":1670972340191.037,"size":25644},{"id":"bf33de820775f5ac3e06dd51dec2e8b5ff5e72e5f992eedbe15f0b159f548710b4412283be36814369a514a94da90321ed6c4d912156a59f244c5268af0aff51","href":"https://static.observableusercontent.com/files/bf33de820775f5ac3e06dd51dec2e8b5ff5e72e5f992eedbe15f0b159f548710b4412283be36814369a514a94da90321ed6c4d912156a59f244c5268af0aff51","name":"DataJoin1.PNG","type":"image/png","lastModified":1670970603430.517,"size":22600},{"id":"b68595b8e567140ec2651ee382dd7e47be00266bc5c4fc2be2fb61a5594b430ff37a70e43851c3a922df6f48d61a973ece274777473ee1f38eab6398fa668f5d","href":"https://static.observableusercontent.com/files/b68595b8e567140ec2651ee382dd7e47be00266bc5c4fc2be2fb61a5594b430ff37a70e43851c3a922df6f48d61a973ece274777473ee1f38eab6398fa668f5d","name":"DataJoin2@3.PNG","type":"image/png","lastModified":1670971570224.952,"size":19811}] 31:{"id":"f89bc46891ec6986","slug":"tutorial-enter-update-and-exit","title":"Understanding Enter, Update, and Exit Selections in D3","thumbnail":"9a261570e27ea6bf96afbf8e0cea393258727af40edb1867472a67b4f6bfbaeb","access_level":"public","create_time":"$D2022-11-27T19:49:33.043Z","update_time":"$D2023-02-20T19:49:33.881Z","view_time":null,"first_public_time":"$D2022-11-27T19:49:33.043Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fe509c97e5bd30c6","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":"starter_2024"},"version":215,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null}],"members":[{"type":"individual","id":"fe3c2958bd86f26e","login":"argwood","name":"Arin R. Greenwood","avatar_url":"https://avatars-next.observableusercontent.com/0e7281933924e2f5a67bed997f51ec74290af9419352d285cbce893c25378fd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Understanding Enter, Update, and Exit Selections in D3","cells":[{"id":0,"value":" # Understanding Enter, Update, and Exit Selections in D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"chart1.selectAll(\"rect\").data(dataset).join(\"rect\")","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"As we've seen before, this chain of methods will create a rectangle object for each data point in our dataset. But it's weird, right? Why are we telling D3 to select all the rectangles before they exist? You've probably been bothered by this for a while, and we finally have the tools to start to dive deeper into the mystery.\n\nThe secret is this: you have to tell D3 what you *want*. In the above case, rectangle elements - one for each data point. You aren't telling D3 to create circles for you so much as you are telling it \"I want a 'circle' selection that corresponds to my data.\" This is the **data join**: data points joined to DOM elements, which together make up a **selection**. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"Let's take a step back to understand this better. When you're thinking about selections, there are two aspects to consider: we have some data, and we have graphic elements on our screen (i.e. the circles, rectangles, triangles, points in space on a scatterplot or bar chart). We can represent these two aspects visually as two unrelated circles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"image1 = FileAttachment(\"DataJoin1.PNG\").image({\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"When you perform the standard data join on a static dataset (i.e. *chart1.selectAll(\"rect\").data(dataset).join(\"rect\")*), as we've been doing for the past few weeks, you can imagine moving the \"Data\" circle to overlap with the \"Elements\" circle:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"image2 = FileAttachment(\"DataJoin2@3.PNG\").image({\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"As the circles overlap, you are binding the data elements to the GUI elements one-to-one. With perfect overlap, every data point corresponds to one GUI element.\n\nHowever, there's no requirement that these two circles be the same size, or overlap perfectly. For example, if you were just starting out at a beginning of a code, maybe you've loaded in a lot of data but you haven't created any GUI elements yet - or maybe you have just one or two elements already created. In this case, you'd have a large \"Data\" circle, but a much smaller \"Elements\" circle. Even if each element is bound to a data point, there would be many unbound data points:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"image3 = FileAttachment(\"DataJoin3@1.PNG\").image({\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"The opposite can also be true, where you could have many elements but no or little data to bind them to. Most of the time, however, the two circles will be the same size and instead, the question becomes *\"how much do the two circles overlap?\"*\n\nIn a static dataset with a static image, they overlap completely. In the case of a dynamic dataset, however, you may often find yourself in the following situation of partial overlap:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"image4 = FileAttachment(\"DataJoin4.PNG\").image({\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"## Example 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"We begin, as always, by loading in and parsing our dataset. Here we use a fake dataset of app names along with their number of downloads, average rating and \"thirty day keep\" - the percentage of people that still have the app downloaded after 30 days. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"dataFile = await FileAttachment(\"fake_app_download_rating.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"dataset = d3.csvParse(dataFile, (row) => {\n return {\n app_name: row.app_name,\n downloads: parseInt(row.downloads),\n average_rating: parseFloat(row.average_rating),\n thirty_day_keep: parseFloat(row.thirty_day_keep)\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"We confirm our dataset loaded in as expected, and that all numerical values are represented by floats or ints:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"We set some variables to use to control the size of the svg canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"w = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"h = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"Next, take a look at this code below and see if you can identify the differences between this and the basic \"data joins\" we have used in the past. Take a moment as well to look at the animation it prints, a dynamic list of names that change location and color at each transition. What is happening here?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"We use this function to generate a random subset of size n of the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"sample = (n, dataset) => d3.shuffle([...dataset]).slice(0, n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"For example, to get a subset of 10 data points you could use:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"sample1 = sample(10, dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"## Example 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"Finally, I'll leave you with one more example, this time using real data rather than just the list of app names. Similarly to Example 1, the graph updates each iteration and the colors of the dots change to represent the selection they are in at a specific point in time. This time, we've also updated the axes to adjust as new data is brought in or old data is removed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"sample_new = (n) => d3.shuffle([...dataset]).slice(0, n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Additional Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"Data joins are a tricky topic, and not something you'll fully grasp until trying it out yourself and struggling through it for a while. That's alright! Here are some more resources that will help you on your data join journey.\n\nNote that older versions of D3 used a different method called the General Update Pattern. With join(), your code won't exactly match what you find in most older resources, but conceptually it is very similar.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"

[Thinking with Joins - Mike Bostock](https://bost.ocks.org/mike/join/)
[Object Constancy - Mike Bostock](https://bost.ocks.org/mike/constancy/)
[selection.join()](https://observablehq.com/@d3/selection-join?collection=@d3/d3-selection)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"