2c:null 2d:["$","title",null,{"children":"Selections and Joins | nyuinfovisspring26 | Observable"}] 32:T456,The output is the same, so why bother with the extra complexity of the data join? One reason is that data joins let us write more efficient code. The above cells re-draw the chart from scratch each time the data changes. It would be more efficient if we did not re-draw the chart from scratch each time and instead made the minimal set of changes to show the new data. Adding and removing elements from the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) is expensive. It would be better if we we could use the `` elements that are already in the chart and update their attributes so that they are in the new positions. However, our dataset also changes sizes. If we switch to a larger dataset, then we'll need to create more circles and if we switch to a smaller dataset, then we'll need to remove the excess circles. This would be harder to manage in the for-loop approach, but with data joins, it comes for free. Clicking the below button will generate new random data and efficiently re-draw the circles without creating the visualization from scratch.33:T5a4,We are going to go through these three lines step-by-step: ```js svg.selectAll('circle') .data(circlesData) .join('circle') ``` `svg` is a selection that contains a single `