Susan Harkins (381) [Avatar] Offline
#1
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
#2
Page 229, Chapter 7: NetworkVisualization
The reference to
.tick(120)
should be replaced with a for loop like this:

for (let i = 0; i < 120; i++) { 
    simulation.tick();
}


.tick()
no longer accepts a number of ticks.
309642 (2) [Avatar] Offline
#3
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 (381) [Avatar] Offline
#4
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
#5
Thanks to https://github.com/Selbosh 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
this
so replace:

d3.select('circle').each((d, i) => {
    console.log(d); console.log(i); console.log(this);
})


With:
d3.select('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:

d3.select("svg")
  .append("path")
  .attr("id", key + "Area")
  .attr("d", movieArea(data))
  .style("fill", "none")
  .style("stroke", "#75739F")
  .style("opacity", .75)


On Page 138, the
xScale
setting for
.domain
should be
.domain([1,10])


On page 149,
d3.layout.pie
should be
d3.pie
.
Susan Harkins (381) [Avatar] Offline
#6
An errata list for D3.js in Action, Second Edition is available at https://manning-content.s3.amazonaws.com/download/b/74569e4-032b-4d22-88e9-b8f3207c7091/Meeks_D3.jsInActionSE_err1.html. Thanks!

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

"Later in chapter 11..."

should be

"Later in chapter 9..."
393163 (2) [Avatar] Offline
#8
The quote from "Arun Noronha" is repeated twice (pdf page 2)
393163 (2) [Avatar] Offline
#9
Removed.
24997 (12) [Avatar] Offline
#10
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."

Typo:

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


Missing "simulation = d3.forceSimulation()"

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

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


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

588274 (13) [Avatar] Offline
#13
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
#14
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
#15
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
#16
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
#17
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(this.props.data.map(d => sum(d.data)));


588274 (13) [Avatar] Offline
#18
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
#19
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):

select(node)
      .selectAll("rect.bar")   // <<<<< changed
      .data(this.props.data)
      .enter()
      .append("rect")
      .attr("class", "bar");   // <<<<< added

    select(node)
      .selectAll("rect.bar")   // <<<<< changed
      ...
  
    select(node)
      .selectAll("rect.bar")   // <<<<< 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
#20
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
#21
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(this.props.data[i]["id"].launchday),


This results in all streams set to color black.

The correct code should be:

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

588274 (13) [Avatar] Offline
#22
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
#23
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
#24
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 (http://bl.ocks.org/emeeks/066e20c1ce5008f884eb)


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?