The errata list is a list of errors and their corrections that were found after the product was released.
The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.
| Version |
Location |
Description |
Submitted by |
Date submitted |
| PDF |
Page 1
the whole book |
Inconsistent indentation, spacing and punctuation in the code examples.
Examples:
OK:
d3.select("body")
.append("div")
.attr("class","chart")
BAD (p. 24):
d3.select(".y.axis")
.append("text")
.text("mean distance between failure (miles)")
p. 26, 29:
function(d){return count_scale(d.count);})
function(d){return time_scale(d.time)} // missing ;
p. 30 (spaces around /):
.attr("x", function(){return (width / 1.6) - margin})
.attr("y", margin/1.5);
p. 28:
font-family: arial;
font-size:0.6em;
|
Włodek Bzyl |
Jul 16, 2012 |
| Printed |
Page 2,3,10
p.2-3 (code); p.3 (para 3); p.10 (code) |
Regarding the statement on p. 3 that "All the JavaScript will satisfy the JSLint tool...";
JSLint will flag dozens of what it calls "errors" in the appearing on pages 8 and 10. Most of these have to do with JSLint's expectations about:
- undeclared use of the variable "d3"
- expected spaces, in various places
- missing semicolons
- 'unnecessary' "else" statement
- the use of "==" in the if statement. JSlint flags that as an error, preferring "===" because the former uses type coersion.
- below is the "corrected" (i.e., JSLint-passing) code, but it has one significant problem. By substituting the preferred "===" equality operator, for it's evil twin "==", the resulting web page renders all the 'li' elemtn text bold. Reverting "==" back to "===" allows the author's desired bold/regular intent to be rendered, but it is frsutrating that the code doesn't pass JSLint and that I can't understand why (apparently)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.js"></script>
<script>
function draw(data) {
"use strict";
var d3;
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(function (d) {
return d.name + ": " + d.status;
});
d3.selectAll("li")
.style("font-weight", function (d) {
if (d.status === "GOOD SERVICE") {
return "normal";
}
return "bold";
});
}
</script>
</head>
<body>
<script>
var d3;
d3.json('data/service_status.json', draw);
</script>
</body>
</html>
|
Anonymous |
Mar 11, 2013 |
| PDF |
Page 5
Last line |
On Windows XP with Python 3.*
python -m SimpleHTTPServer 8000
won't work...
python -m http.server
...will
|
Anonymous |
Jul 12, 2012 |
| Printed |
Page 8
Top of page, step 5 |
The printed code is not wrong, per se: itworks fine under Python 2.7 (or Python 2.x), but under Python version 3, the SimpleHttpServer class has been moved to http.server.
This also appears in the README.md file downloaded with the code examples. It is probably present in the PDF, ePub and other forms, but I am only looking at the printed book.
If users have Python version 3, you can serve the files just as easily with Python3 using the following command:
python -m http.server 8000
(You can find this on the web, as I did (for example here:
http://stackoverflow.com/questions/7943751/what-is-the-python3-equivalent-of-python-m-simplehttpserver
but it would be much more convenient for this Python 2/3 switch to be made obvious with the distributed code.)
|
Erik Johnson |
Jun 04, 2014 |
| PDF |
Page 11
1st paragraph |
The example using a "label" div and a "bar" div inside a "line" div to display cash collection per MTA checkpoint does not work in Firefox 22.0.
The red-colored bars are all aligned to the left side of the page and some text is rendered twice. Unfortunately I cannot attach a screenshot (why!)
Dumping the generated HTML via firebug and then redisplaying yields the same problem.
The HTML:
http://furi.homelinux.org/d3/direct.html
The Result:
http://furi.homelinux.org/d3/bar_graph_in_firefox_22.0.png
|
David Tonhofer |
Jul 05, 2013 |
| Other Digital Version |
13
code: div.bar |
The visualization's css style div.bar must contain the setting:
margin-left: 22em
Or the visualization is completely messed up.
This is included in line 19 of the downloadable source code (/visualisations/mean_daily_plaza_traffic.html), but omitted in the code in the book (page 13).
I eventually found the error using ScooterSoftware's BeyondCompare file comparison tool.
|
Matthew Ruttley |
Jul 11, 2012 |
| PDF |
Page 13
|
Same error as listed elsewhere but in PDF version as well.
Page 13
'div.bar' section is missing:
margin-left:22em;
The graph will still display but it does not look like Figure 2-4 without it. And if a person is building up their code directly from the book (rather than using the examples) then Figure 2-5 will also look different.
|
Anonymous |
Jul 12, 2012 |
| PDF |
Page 13
code |
div.bar { padding-right:1em;
The above padding makes the divs wider. The extra 1em width should be accounted for
in the function definition on the page 12:
.style("width", function(d){return d.count/100 + "px"})
|
Włodek Bzyl |
Jul 13, 2012 |
| PDF |
Page 13
code snippet |
This is reported on other places (Matthew Ruttley) . but since this is still marked as Unconfirmed Errata I though I should report it again.
There is no mention in the code htat div.bar must also be updated to contain a mergin-left:22em; Otherwise the visualization is messed up, the included source code is correct but the text should also be updated.
|
Ruben Laguna |
Mar 11, 2013 |
| PDF |
Page 15
CSS Code sample for div.label |
In this section, the author helps us refine a bar graph we'd previously created. The refinement adds text labels for each bar.
I followed the book's step-by-step directions and ended up with a bar graph whose labels were draw on top of the bars themselves, instead of being by themselves in the left margin. When I compared my code (from following the book) to the sample code (provided), I realized the book never said to add this line to my previous div.bar CSS block:
margin-left: 22em;
Without that line, labels will overlap the bars, but nowhere in the book's narrative (that I see) are readers told to modify the div.bar attributes in our CSS files by adding that line about the left margin. We should be told :-)
|
Capbri |
Sep 09, 2012 |
| PDF |
Page 25
First code sample in "Setting up the Viewport" section |
The width attribute of the svg element is specified twice:
.attr("width", width+margin)
.attr("width", height+margin)
The second "width" should be "height".
|
Kyle Oba |
Feb 22, 2013 |
| PDF |
Page 31
Figure 3.9 |
axis label on the y-axis is "upside down";
compare with axis labels on Figure 3.5
|
Włodek Bzyl |
Jul 16, 2012 |
| ePub |
Page 33
Chapter 4. Interaction and Transitions subway_wait_mean.json and subway_wait.json sample code |
Chapter 4. Interaction and Transitions
subway_wait_mean.json code
```
{
"line_id": "6_Line"
"line_name": "6 Line",
"mean": 73.400000000000006
}
```
should be:
```
{
"line_id": "Line_6",
"line_name": "6 Line",
"mean": 73.400000000000006
}
```
----
subway_wait.json code
```
{
"line_id": 1_Line
"line_name": "1 Line",
"late_percent": 73.1,
"month": 1
}
```
should be:
```
{
"line_id": "Line_1",
"line_name": "1 Line",
"late_percent": 73.1,
"time": 1230786000000
}
```
|
Miki Kuteken |
Dec 30, 2013 |
| PDF |
Page 34
lines 5 and 13 |
Replace "6_Line" and "1_Line" with "Line_6" and "Line_1", rescpectively.
|
Włodek Bzyl |
Jul 16, 2012 |
| Printed |
Page 35-36
In the code |
The <script></script> and <style></style> (the latter which is affected by a typo, see other error submission) tags are in between the head and body of the page.
They should be within the <head></head> tags instead.
|
Matthew Ruttley |
Jul 12, 2012 |
| PDF |
Page 37
First code sample, toward the bottom |
The variable "container" is used instead of "container_dimensions".
This line appears and is wrong:
.attr("x", container.height/2)
And, should be:
.attr("x", container_dimensions.height/2)
|
Kyle Oba |
Feb 22, 2013 |
| PDF |
Page 42
line 5 from bottom |
"The one odd-looking line here is first line in the mouseover callback; "
I think the author refers to the line:
.on("mouseover.tooltip", function(d){
Adding .tooltip to mouseover event looks like an ugly hack to deal with some
corner-case interactions mentioned below (line 2 from bottom).
What about some clarification why this hack is necessary?.
|
Włodek Bzyl |
Jul 17, 2012 |
| PDF |
Page 45
End of page, code sample |
I'm not sure what the problem is exactly, but my graphs do not have the labels as they show up in Figure 4-5. My last dot is a solid dot without a line indicator (letter or number) in it.
I've copied the code samples from the book, but there appears to be something keeping the text label from appearing. I've experimented with the CSS, but didn't figure it out.
Also, the example subway_wait_assessment.html page is somewhat different than what's in the book, so I'm not sure how to reconcile.
|
Kyle Oba |
Feb 22, 2013 |
| Other Digital Version |
2689
third line of code example |
The code example says d3.select("text."+d.line_id), but should be d3.select("text#"+d.line_id).
In other words, the text element is identified by id, not by class.
(sorry, the kindle version has no page numbers. This is at location 2689 of 3552, the mouseout.tooltip in 'subway wait assessment UI transitions section.
|
Katrina Owen |
Jul 06, 2012 |
| Other Digital Version |
2834
middle of the code example |
In the code example for the function add_label, there are two sections. The second starts with g.append(...).
g is not a variable in this scope. The code works if g is replaced with d3.select("#"+d.line_id+"_path").
Kindle version without page numbers. Sorry.
|
Katrina Owen |
Jul 06, 2012 |
| Other Digital Version |
3377
1st line of code example |
The code example starts out with svg.selectAll("g"), but the variable svg has not been introduced in this example. At this point in the book the reader probably knows enough to make something up, but I did have a somewhat confused inner monologue ("Oh, wait -- is this part of the previous example? No that can't be."), and I flipped back and forth through the pages of the chapter trying to figure out whether I had missed something or not.
* Kindle version without page numbers. Sorry.
|
Katrina Owen |
Jul 06, 2012 |
| Other Digital Version |
3377
5th line of code example |
In the line of code that says
.attr("class", function(d,i) { return lines[i] })
The variable "lines" hasn't been introduced.
* Sorry, kindle version without page numbers. This is the 'stack layout' example.
|
Katrina Owen |
Jul 06, 2012 |
| Other Digital Version |
3377
10th and 11th line of the code example |
the code example references the functions/variables x_scale and count_scale, neither of which have been introduced.
I think this code example is simply missing a good chunk of code.
* sorry, kindle version. No page numbers.
|
Katrina Owen |
Jul 06, 2012 |