Errata

Within the code for "Setting up the Viewport",

d3.select("body")
.append("svg")
.attr("width", width+margin)
.attr("height", height+margin)
.append(g)
.attr("class", "chart");

should be:

d3.select("body")
.append("svg")
.attr("width", width+margin)
.attr("height", height+margin)
.append("g")
.attr("class", "chart");

Just a set of missing "" around the g element.

Note from the Author or Editor:
The errata is correct - the g needs quotes around it

The following code has an error.

g.selectAll("circle")
.on("mouseout.tooltip", function(d){
d3.select("text." + d.line_id)
.transition()
.duration(500)
.style("opacity",0)
.attr("transform","translate(10, -10)")
.remove();
});

The line
d3.select("text." + d.line_id)

should be

d3.select("text#" + d.line_id)

Note from the Author or Editor:
the revier is correct - the period after text should actually be a #

Initially, the javascript to set-up the dimensions of the svg viewport is: var margin = 50,
width = 700,
height = 300;

On pages 32-33, however, where the x_scale code is presented,

var x_scale = d3.scale.linear()
.range([margin, width - margin]),
. domain(x_extent);

it is said that the range returned is [40, 660.] So, I assume the initial margin should be set to 40 instead of 50.

Note from the Author or Editor:
In the final paragraph of page 19 in the print book, please change both instances of 40,660 to 50,650 to be consistent with the code.

In the function:

function draw(data) {
.......
.style("width", function(d){return d.count/100 + "px"})
........
}

should be
.style("width", function(d){return Math.round(d.count/100) + "px"})

otherwise div bars are not rendered properly (i.e. width must be an integer)

P.S. Please excuse the wrong page number, this is my estimate. I am a safari user, thus I do not get the correct print page number.

Note from the Author or Editor:
Please change the code as suggested by the reviewer. It's actually on page 12 of the book, at the top.

Earlier on the page margin=50 and width=700. This line:

var x_scale = d3.scale.linear() .range([margin,width-margin]) .domain(x_extent);

uses width and width-margin. Which I read to be 50 and 700-50 which leads to [50,650].

However the first sentence of the last paragraph reads:

The x_scale now maps the extent of the data onto the range [40, 660].

It should be [50, 650] or needs an explanation of where the 10 pixels went.

Note from the Author or Editor:
Please change the [40,660] to [50,650] and 'between 40 and 660' to 'between 50 and 650' at the bottom of page 19.

The book mentions /code and /viz directories, whereas the directories within the example code bundle are named /cleaning_code and /visualisations, respectively.

Note from the Author or Editor:
The reviewer is correct. Please change the mentions of /code and /viz to /cleaning_code and /visualisations respectively. If the British English is a problem here please adjust the code folders accordingly.

Replace:

filtered_data = data.filter(function(d){return d.line_id === id});

with:

var filtered_data = data.filter(function(d){ return d.line_id === id; });

Note from the Author or Editor:
the reviewer's semi-colon is certainly good practice. Please introduce it.