Susan Harkins (364) [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 (364) [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 (364) [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 (13) [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 (13) [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 (7) [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 (7) [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 (7) [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 (7) [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 (7) [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 (7) [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 (7) [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.