emeeks / d3_in_action_2 Goto Github PK

to reproduce:

cd chapter9/reactd3
npm i
npm run start

In Chrome or in Opera browser, I'm getting an error with the 1st item, to get the color for the region.

The console is showing the following error.

3_24.html:109 Uncaught TypeError: Cannot read property 'region' of undefined(…)

https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

The code listing above Figure 1.28 begins

smallerNumbers = someNumbers.filter(
  function(el) {return d <= 40});

The second line should say

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

Figure 1.28 shows the correct code.

These are cool examples! It would be nice to have some kind of index listing, where one could click on links to each example. Perhaps adding a list of links to the README and a GitHub Pages deployment would do the trick.

in the folder images all images start with a capital letter except Colombia, in the table worldcup.csv all names start with a capital letter except Colombia.

This breaks demo 3 19,20, and 21 since it is expecting Colombia and not colombia.png.

First example is:

which should be:

This appears to be a general problem where there is a single digit after the underscore

it looks likes create-react-app ships with yarn these days

code example in pictured is at this link https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

It would be great to be able to click links in the index and be able to run the examples, without having to clone the repo and run a local server.

Hey :)

i really love your book and the examples. But i was now trying them out with the latest version of d3.js 5.1.0 and i ran into problems with the csv data. Its all working still fine when i use 4.2.8 or 4.13.0.

when i run e.g. the code form example 2.11 it prints out nothing, even if the CSV file was read correctly and in JavaScript itself i can access all data as expected. But its not going to be printed. I played around with it a little bit, and when i write the object myself it works.

       const myCities = [{label:"San Francisco", ...}, {label:"Fresno",....},...];
        d3.select("body").selectAll("div.cities")
          .data(myCities)
          .enter()
          .append("div")
            .attr("class","cities")
            .html(d => d.label);
`

When i wrap 
incomingData inside brackets it prints out at least the SanFrancisco but none of the others.

   d3.select("body").selectAll("div.cities")
      .data([incomingData])
      .enter()
      .append("div")
        .attr("class","cities")
        .html(d => d.label);

`

I guess this is more worth of a bug report for d3 itself or?

Also in v5 it seems like they changed the error handling in favor for using promises instead.
https://github.com/d3/d3/blob/master/CHANGES.md

For now i will just stick with Version <5.0 for working with your book, just wanted to let you know :)

The code underneath Figure 3.7 has been changed to ES6 arrow notation without consideration for what it is supposed to demonstrate.

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

The paragraph immediately after this code listing says: "The last thing echoed to the console, this, is the <circle> DOM element itself." This may have been the case in the first edition when it was an anonymous function() declaration, but using arrow notation, this is undefined.

Either the code needs to be reverted or the text needs to be corrected.

I managed to port the examples into a working setup using Rails and yarn/webpack, and added some interim examples for Chapter 9

Fork: https://github.com/prusswan/d3ia-2e

Demo: https://d3ia-rails-2e.herokuapp.com

The line chart of tweets in chapter 4 starts with the colour mapping, as of page 127

• tweets = blue
• retweets = green
• favourites = orange

The caption of Figure 4.15 says the same, but this clearly doesn't correspond to the actual figures, which show retweets (top line) in blue, favourites (middle) in green and tweets (bottom line) in orange. This is confusing when trying to follow along with the book.

Next, there are some errors and inconsistencies on page 134. I think it's listing 4.11 but none of the listings anywhere in my book actually have labels on them—just blank grey bars above them—which I presume is also an oversight or a printing defect.

d3.select("svg")
  .append("path")
  .style("id", key + "Area")     // `id` is an attribute, not a style — a clear error
  .attr("d", movieArea(data))
  .attr("fill", "none")          // should be style, not attribute
  .attr("stroke", "#75739F")     // should be style
  .attr("stroke-width", 3)       // should be style
  .style("opacity", .75)

While attr() works for these style declarations, it's inconsistent with earlier in the book where style() has been used. And of course style('id', ...) is simply an error.

On page 149,

var pieChart = d3.layout.pie();

should be as of d3 v4

var pieChart = d3.pie();

as indicated immediately above the figure in the text.