D3.js version 5 Data Binding Example

This tutorial goes through the process of binding data to elements and creating a simple updatable SVG graphic using D3.js version 5.

In D3.js version 4 there was quite a big update to how data is bound to elements and updated. This means there is a lot of code which currently will subtly fail to update visualisations created.

Today I am using the current latest version of D3.js (version 5) to show a simple example binding and updating data. This will demonstrate the new system of having an updatable visualisation based on the data.

Example code and full tutorial

The full code is available by viewing the source of the below frame. If you want more detailed instructions there is my blog post I talk through the code step by step.