Skip to Main Content
Data Visualization with Python and JavaScript, 2nd Edition
book

Data Visualization with Python and JavaScript, 2nd Edition

by Kyran Dale
December 2022
Beginner to intermediate content levelBeginner to intermediate
566 pages
12h 58m
English
O'Reilly Media, Inc.
Book available
Content preview from 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')
              .data(nobelData ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Interactive Data Visualization with Python - Second Edition

Interactive Data Visualization with Python - Second Edition

Abha Belorkar, Sharath Chandra Guntuku, Shubhangi Hora, Anshu Kumar

Publisher Resources

ISBN: 9781098111861Errata Page