How does D3 work?

At this point, you should have a working environment, so let's start by looking at some code and see if we can get D3 up and running. As we've mentioned at the beginning of this chapter, D3 is most often used to create and manipulate SVG elements using a data-driven approach. SVG elements can represent shapes, lines, and also allow for grouping. If you need a reference to check what attributes are available for a specific SVG element, the Mozilla Developer Network also has an excellent page on that: https://developer.mozilla.org/en-US/docs/Web/SVG.

In this section, we'll perform the following steps:

1. Create and add an empty SVG group (g) element, to which we'll add our data elements.
2. Use a JavaScript array that contains some sample data to add rectangles to the SVG element created in the previous step.
3. Show how changes in the data can be used to update the drawn rectangles.
4. Explain how to handle added and removed data elements using D3.

At the end of these steps, you should have a decent idea of how D3 binds data to elements, and how you can update the bound data.