27:null 28:["$","title",null,{"children":"D3 join, with updating data | Eric Field | Observable"}] 2d: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.2e:[] 2b:{"id":"a48e19e948ec0057","slug":null,"title":"D3 join, with updating data","thumbnail":"adc7faeeb41f14f7a59cecb5ae0f7122f1f649b2ab94bf1975bbfea8ac686662","access_level":"public","create_time":"$D2023-04-17T01:01:53.790Z","update_time":"$D2025-03-16T17:45:48.749Z","view_time":null,"first_public_time":"$D2023-04-18T16:45:27.750Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"407c620feb10695c","slug":"misc","title":"misc","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"data = {\n let data = [];\n for (let i=0;i","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg2","database":"$undefined"},{"id":89,"value":"viewof chosenData = Inputs.select([data1, data2, data3], {label: \"Choose one:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"data1 = [49, 94, 303, 34, 465, 422, 407, 311, 174, 43]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"data2 = [267, 90, 2, 187, 423, 248, 97]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"data3 = [116, 22, 235, 265, 445, 359, 26, 258, 484, 291, 326, 15]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"chosenData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"

\n \n

The three selections computed by the selection.data.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"