The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Susan Harkins (424) [Avatar] Offline
Please post errata found in the published version of D3.js in Action, Second Edition here. If necessary, we'll publish a comprehensive list for everyone's convenience. Thank you!

Susan Harkins
Errata Editor
Manning Publications
elijah.meeks (127) [Avatar] Offline
Page 229, Chapter 7: NetworkVisualization
The reference to
should be replaced with a for loop like this:

for (let i = 0; i < 120; i++) { 

no longer accepts a number of ticks.
309642 (2) [Avatar] Offline
Listings are not numbered in text.
Listings are not numbered in text. For example, page 161, second paragraph makes reference to listing 5.7, which is on that page but is not labeled as such.
Susan Harkins (424) [Avatar] Offline
Listings generally follow the introduction to the code. You'll find something similar to "... in the following listing...". Listings are referenced by number in text only when the reference is a few sentences away from the listing. Are you finding something different?

Thank you,
Susan Harkins
elijah.meeks (127) [Avatar] Offline
Thanks to for finding these and reporting them on the book's Github issue page.

For figure 1.28 the code reads
  function(el) {return d <= 40});

And should be:

  function(el) {return el <= 40});

The code underneath Figure 3.7 should not use an arrow function as it does not have the proper
so replace:'circle').each((d, i) => {
    console.log(d); console.log(i); console.log(this);

With:'circle').each(function (d, i) {
    console.log(d); console.log(i); console.log(this);

Chapter 4, page 127:
The colors for the chart do not match the code, the colors for the chart are Tweets (Orange), Retweets (Blue), Favorites (Green)

Listing numbers are missing in several print runs of the book. Instead all listing headers are grey rectangles.

Page 134:
The code incorrectly sets "id" as a style and uses attributes when styles make more sense (you can set fill, stroke, etc with attributes but it makes more sense to only use styles unless you're doing it purposefully). The code should read:"svg")
  .attr("id", key + "Area")
  .attr("d", movieArea(data))
  .style("fill", "none")
  .style("stroke", "#75739F")
  .style("opacity", .75)

On Page 138, the
setting for
should be

On page 149,
should be
Susan Harkins (424) [Avatar] Offline
An errata list for D3.js in Action, Second Edition is available at Thanks!

Susan Harkins
TristanReid (1) [Avatar] Offline
On page 10, section "Is selecting necessary?"

"Later in chapter 11..."

should be

"Later in chapter 9..."
393163 (2) [Avatar] Offline
The quote from "Arun Noronha" is repeated twice (pdf page 2)
393163 (2) [Avatar] Offline
24997 (12) [Avatar] Offline
Errata in D3.js in Action, Second Edition typo p218: forceManyBody90
p218 in the print & pdf editions

At the end of the first paragraph of the figure "Charge"

"In D3, this is defined using d3.forceManyBody90 for the “charge” force."


forceManyBody90 => forceManyBody90 or forceManyBody()
24997 (12) [Avatar] Offline
7.2.1 Playing with forces: Missing part of code in Listing 7.7
var.force("charge", manyBody)
.force("center", center)
.on("tick", updateNetwork)

Missing "simulation = d3.forceSimulation()"

var simulation = d3.forceSimulation()
    .force("charge", manyBody)
    .on("tick", updateNetwork);
588274 (13) [Avatar] Offline
In page 119 the value used in tickSize for yAxis has to be negative:

const yAxis = d3.axisRight()
.tickSize(-tickSize) // <<< note negative value here

This also matches the sample code in 4_12.html.

588274 (13) [Avatar] Offline
In page 219 this code

var.force("charge", manyBody)
   .force("center", center)

Should be

var force = d3.forceSimulation()
   .force("charge", manyBody)
   .force("center", center)

Note that this is similar to the post #11 above. However the sample source code from Github uses var force =, instead of var simulation.
588274 (13) [Avatar] Offline
Page 226 states

In our example data, Mo has a degree of 6, because he’s the source or target of 6 links. ... Weighted degree is used to refer to the total value of the connections to a node, which would give Mo a value of 18. Further, you can differentiate degree into in degree and out degree, which are used to distinguish between incoming and outgoing links, and which for Mo’s case would be 4 and 2, respectively.

However, there is no Mo in the sample data (listing 7.1 and 7.2). There is a Tony with degree of 6.

588274 (13) [Avatar] Offline
Text for figure 7.22 says

Figure 7.22 Network with two new nodes added (Mike and Noah), both with links to Sam

It should say

...both with links to Shirley
588274 (13) [Avatar] Offline
Page 287, listing 9.6: missing . (dot) before range...

const colorScale = scaleThreshold().domain([5,10,20,30,50]) 
   // Note . (dot) added before "range"
   .range(["#75739F", "#5EAFC6", "#41A368", "#93C464", "#FE9922"])
588274 (13) [Avatar] Offline
Page 289, listing 9.9 missing a modified line
Page 289, listing 9.9

This listing shows only what was changed from the previous BarChart.js listing. However, it missed this line:

import { max, sum } from "d3-array";

sum needs to be added to that line because it's referenced in one of the modified lines in listing 9.9:

const dataMax = max( => sum(;

588274 (13) [Avatar] Offline
Page 290, listing 9.10: missing file name "StreamGraph.js" in the listing header.

In can be inferred from the paragraph just after the listing, but would be nice to show it up front, like it was done in the previous listings in this chapter.

588274 (13) [Avatar] Offline
Chapter 9, listing 9.12 - legend doesn't display correctly
Page 294, listing 9.12 "Adding a legend": to make that code work I had to add the class "bar" to the "rect" elements, as shown in the GitHub source. Those "rect" elements were first added in Listing 9.2, without the "bar" class.

Without those changes the legend doesn't display the rect with the colors and the first set of launch data (the dark blue bars of the histogram) is shifted to the left of the histogram (looks like the legend code attr("transform", "translate(" + (this.props.size[0] - 100) + ", 20)"); applied to them as well somehow).

I suggest to either update list 9.2 to add the class or right before listing 9.12 add another listing to update the code created in listing 9.2.

These are the code changes I made (matches the GitHub sample code):

      .selectAll("")   // <<<<< changed
      .attr("class", "bar");   // <<<<< added

      .selectAll("")   // <<<<< changed
      .selectAll("")   // <<<<< changed

Also note that listing 9.14 shows the "bar" class in the rectangles. It's another indication that it was missed in listing 9.2.
588274 (13) [Avatar] Offline
Page 287, listing 9.6 - extra entry in colorScale
colorScale has an extra entry (the "50" range):

const colorScale = scaleThreshold().domain([5,10,20,30,50])
  .range(["#75739F", "#5EAFC6", "#41A368", "#93C464", "#FE9922"])

This causes the legend added in listing 9.12 to have an extra entry, labeled "30.0 to 50.0".

The code sample in GitHub is the correct one (with four entries):

const colorScale = scaleThreshold().domain([5,10,20,30])
   .range(["#75739F", "#5EAFC6", "#41A368", "#93C464"])

588274 (13) [Avatar] Offline
Page 297, listing 9.16 - extra "["id"]" for style
The code that selects a color qhen the element is not hovered over has an extra ["id"]:

: this.props.colorScale([i]["id"].launchday),

This results in all streams set to color black.

The correct code should be:

: this.props.colorScale([i].launchday),

588274 (13) [Avatar] Offline
Page 311, listing 10.2
Instead of

if (data[cell]) { cellNumber
    data[cell].y = rowNumber 

It should be:

if (data[cell]) { 
    data[cell].x = cellNumber
    data[cell].y = rowNumber

On a side note: it would make the code more readable IMO if cellNumber is renamed to colNumber (since x is better described as a "column", instead of a "cell").
588274 (13) [Avatar] Offline
Page 353, listing 11.16
The code in listing 11.16 results in "quadtree is not a function".

The correct code, from the GitHub sample code, is:

var quadIndex = d3.quadtree(sampleData, d => d.x, d => d.y);
588274 (13) [Avatar] Offline
Page 355 - gist doesn't use visit function
Text states

You can use that visit function to do more than optimized search. I’ve used it to cluster nearby points on a map (

However, the gist it points to doesn't use the visit function, as stated in the text.

d3-carto-map, used in the gist, does it use visit. So perhaps the text just needs a small tweak to make it more explicit that visit is used not directly in the gist, but in the library used in the gist?