Data Visualization with Python and JavaScript, 2nd Edition

Appendix A. D3’s enter/exit Pattern

As shown in “Updating the DOM with Data”, D3 now has a more user-friendly join method to replace the old implementation of data-joining using patterns based around the enter, exit, and remove methods. The join method is a great addition to D3, but there are thousands of examples online using the old data-joining patterns. In order to use/convert these it helps to know a little bit more about what’s going on under the hood when D3 joins data.

In order to demonstrate D3’s data joining, let’s look under the hood when D3 joins data. Let’s start with our bar-less chart, with SVG canvas and chart group in place:

...
    <div id="nobel-bar">
      <svg width="600" height="400">
        <g class="chart" transform="translate(40, 20)"></g>
      </svg>
    </div>
...

In order to join data with D3, we first need some data in the right form. Generally that will be an array of objects, like our bar chart’s nobelData:

var nobelData = [
    {key:'United States', value:336},
    {key:'United Kingdom', value:98},
    {key:'Germany', value:79},
    ...
]

A D3 data-join is made in two stages. First, we add the data to be joined using the data method then we perform the join using the join method.

To add our Nobel data to a group of bars, we do the following. First, we select a container for our bars, in this case our SVG group of class chart.

Then we define the container, in this case a CSS selector of class bar:

var svg = d3.select('#nobel-bar .chart');

var bars =  svg.selectAll('.bar'