2f:T449,--- ## what's going on D3's `join` method integrates a combination of `enter`, `update`, `and exit` whenever the dataset and graphic set are evaluated and `join`ed. When data comes in, and it is coupled with a selectAll(someElement) statement, D3 first looks to find any graphic elements within the target selection that already exist. - if some of those are found, they are bound to the first n elements of the (new) data, and attributes updated from that data. - if there are more data elements than graphic elements found (including if no existing elements are found), then new elements are `enter`ed, and attributes are set from the data. - if there are more graphic objects than data rows, the excess graphic objects are removed through the `exit` set. The `.join` and subsequent `.attr` statements run through and implicit forEach loop for all data elements in the data set. You could accomplish the same thing with an explicit data.forEach() loop, but the `.join` does it for you. In this manner, D3's `join` method keeps the graphic and data elements in sync, even as data changes.30:[] 2d:{"title":"D3 join, with updating data","cells":[{"id":76,"value":"# D3 join, with updating data\nA quick demonstration of how D3 builds and updates objects from data as that data changes in both value and quantity. \n\nD3 does not just draw once-and-done. It is dynamic, linking graphics directly to data using the join. When the data changes, the graphics change. If your data is dynamic, such as a live pull from a database or web api, or if you build in a means to change the data (swapping between different files, changing data based on user inputs or choices, etc.) D3 will update the graphics live based on the newly changed data.\n\nsee [Mike Bostock's docs](https://observablehq.com/@d3/learn-d3-joins) on this for more detail, and the diagram below.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = {\n let data = [];\n for (let i=0;i","pinned":false,"hidden":false,"mode":"html"},{"id":53,"value":"objects = d3.select(svg).selectAll(\"text\") // in the SVG, select all text objects that already exist\n .data(data) // bind those objects to the data\n .join(\"text\") // join with any new blank objects needed left-join on data->graphics)\n .transition().duration(1000)\n .attr(\"x\", d => d) // update properties of all of them based on the (new) data\n .attr(\"y\", (d,i) => 30 + i*15)\n .text(d => d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"^^ this is all handled through the simple `join` statement along with the `data` binding. \nObjects move to their new data position in X. \nObjects add and remove if the count of records changes.","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"## data can also be swapped from different static sets\nChoose a dataset from the dropdown below. The elements will change. Notice how it adds and removes records as needed, in addition to changing based on the data value.","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":89,"value":"viewof chosenData = Inputs.select([data1, data2, data3], {label: \"Choose one:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"data1 = [49, 94, 303, 34, 465, 422, 407, 311, 174, 43]","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"data2 = [267, 90, 2, 187, 423, 248, 97]","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"data3 = [116, 22, 235, 265, 445, 359, 26, 258, 484, 291, 326, 15]","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"chosenData","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"objects2 = d3.select(svg2).selectAll(\"text\")\n .data(chosenData)\n .join(\"text\")\n .transition().duration(1000)\n .attr(\"x\", d => d)\n .attr(\"y\", (d,i) => 30 + i*15)\n .text(d => d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"

\n \n

The three selections computed by the selection.data.

\n","pinned":false,"hidden":false,"mode":"html"},{"id":115,"value":"^^ diagram from [https://observablehq.com/@d3/learn-d3-joins](https://observablehq.com/@d3/learn-d3-joins)","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"### For a more complete example of this in action\nsee [Powerplants, updating data](https://observablehq.com/@emfielduva/powerplants_4?collection=@emfielduva/powerplants)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}