Part 2: Updating

In that last example, there were 3 array values and 0 circles in the svg. What will happen if you add a circle in the markup, then re-run the same code?

Scroll down to find out!

I've added a red circle into the markup with a radius of 10. The data+code remain the same.

Updating the element

Below is an svg that shares the same markup as above, but the code is different. Take a look in the editor and in the inspector.

Bonus exercises

The y coordinate in both examples are currently fixed. How could you...

Make the y coordinate data driven?
Change the data or data type in the array to provide a value for x and y?

Try selecting and viewing data bindings in your browser console:

```
d3.selectAll('circle')
```
```
d3.select('circle')
```
```
d3.select('circle').datum()
```

d3.selectAll('circle:nth-child(2)').datum()

Back Next