Interactive Data Visualization for the Web

Errata for Interactive Data Visualization for the Web

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
Page 55
Figure 3-16

The code shows rx = 100, but the oval radius on this axis as drawn is 250. Should be same value as cx (250), I believe.

Note from the Author or Editor:
It appears the intended illustration was cropped, so as the reader points out, the pixel values shown in the code aren't reflected visually in the image. I think the best solution if for the illustration to be corrected (rather than changing the code). I've pushed an updated illustration (dvw2_0316.png) to the Atlas repo.

Jason Tuenge  Aug 31, 2019 
Other Digital Version
First sentence after d3.selectAll("rect").interrupt("sortBars");

Missing "in" from the following sentence:

"So far, this sort only goes one direction."

Note from the Author or Editor:
Add "in" to this sentence:

"So far, this sort only goes one direction."


"So far, this sort only goes in one direction."

Feda Curic  May 11, 2019 
Other Digital Version
2nd paragraph in Data Wants to Be Held

From the text: "In this context, without being wrapped d in an anonymous function, d is undefined."

Should perhaps be: "In this context, without being wrapped in an anonymous function, d is undefined."

Note from the Author or Editor:
The report is exactly correct and change should be made as suggested.

Feda Curic  May 07, 2019 
Page 74-78

v5 of D3 changed how it loads external data files. Unfortunately, this means that the book's coverage of d3.csv() and d3.json() need to be revised. The example code in the book (and in the GitHub repo) will not work as expected with v5 of D3 (though they will continue to work as shown in the book when used with v4 of D3, as included in the repo).

For the next update to the book, I will amend this section on loading external data files.


Thanks to reader @ravichowdhury88 for reporting this.

Scott Murray
Scott Murray
Apr 19, 2018 
Other Digital Version
right hand size in 2-page view in cloud reader

It would be nice to have the html example text to be in a file in the download. This is the first use of chrome dev tools so would be doubly useful. Even more, you can't (easily) cut/paste from a kindle book .. here's the sample:

Amazing Visualization Tool Cures All Ills
A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms:
<li>general malaise </li>
It achieves this end with a patented, three-step process.
<li>Load in data.</li>
<li>Generate a visual representation.</li>
<li>Activate magic healing function.</li>

Note from the Author or Editor:
For a future edition, I would be happy to include this HTML example in the downloadable code examples. :-)

Owen Densmore  Apr 03, 2018 
Page 244
Second paragraph in Merging Selections section

The paragraph begins "After clicking" but it does not indicate what to click -- there are two choices, add and remove, and it should indicate that these words refer to the add choice.

Note from the Author or Editor:
In the next update, make this phrasing more specific, to describe what is being clicked.

Robert Elens  Feb 06, 2018 
Page 200
this section on hovering

This is not an error, but it might be a good idea here to mention again the issue of how d3 handles events. Using 06_smoother.html,
mouse into a bar to cause it to change to orange. Now mouse into the bar next to it causing that bar to start to change color, but quickly mouse back into the first bar before the color change finishes. (Remember that the first bar is also in a transition changing back to blue while this is happening). The result is that the cursor is back in the original bar, but both bars are blue - neither is orange.

It may take a few times to make this happen as it takes a rather quick back and forth motion.

Also, note that moving the cursor around inside the blue bar doesn't change the color as there is no mouse into event to cause it.

It does exactly what we told it to do, but not what we were intending or expected. It's not a horrible thing, but an issue that would need to be handled in order to achieve the behavior that was intended.

It's not that important here, but I mention it because it could be confusing in a more complex visualization.

Note from the Author or Editor:
In the next update, add a note to this effect, and to explain the behavior described.

Robert Elens  Feb 03, 2018 
Page 113
5th paragraph. Parenthetical starting with "(Admittedly"

Text: (Admittedly, it is not a meaningful to include h here;

Probably mean to not include the "a" -- alternatively you might mean "as"

Note from the Author or Editor:
Cut the errant "a" in the middle of "not a meaningful".

Robert Elens  Jan 30, 2018 
Page 94
This section titled Random Data

There is no error here, but maybe an omission. When rendering divs with floating point heights, I noticed that the bottoms of the divs did not line up with each other. With a little investigation, it seems that the bottoms of divs with heights greater than xx.5 are lower on the screen than those of divs with heights less than xx.5.

When the heights become integers, as in the rounding example, this issue goes away.

I did not test this on other browsers, so it may just be a webkit issue, I don't know. I was using Safari 11.0.2 on a mac mini running OS X 10.13.2.

As I said, there is no error here, but it might be nice to have a mention that, if the user notices the issue, that it is not because of d3.

Note from the Author or Editor:
I will add a note to this effect in the next update.

Robert Elens  Jan 30, 2018 
Printed, PDF, ePub, Mobi,
Page 202
1st code block

The first code listing on page 202, part of the box "Pointer Events on Overlapping Elements", reads
which is mistakenly copied from another code listing further down the page, describing a hierarchy of elements. It should actually describe the CSS to disable pointer events on SVG text elements, as follows.
<pre>text {
pointer-events: none;

Note from the Author or Editor:
This was a copy/paste error, with the result that the code snippet on page 202 doesn't make any sense (though close readers will figure that out from the context, as this one did).

Unfortunately, this affects the print and all ebook editions.

I have pushed corrected source to Atlas; please use that for a future update.

David Selby  Jan 25, 2018 
Page 338, 339, 353, 354, 356
Inside illustrations

The word "Feburary" is misspelled in each of the following screenshots (illustrations):

p338 fig 16-4
p339 fig 16-5
p353 fig 16-18
p354 fig 16-19
p356 fig 16-20

Of course, it should be corrected to "February". I have already corrected this in the code examples, so it will just require capturing new screenshots and replacing the old illustrations.

Scott Murray
Scott Murray
Nov 21, 2017