ES6

[mutantkeyboard]

Hi @alignedleft

I enjoy the book so far, and thank you so much for updating everything to v4. It's been a life, and time saver.

However, I think it'd be nice if you wrote a couple of examples using newer standards such as ES6/ES7 and use webpack or yarn as a build tools.

I thought it'd be worth mentioning an example here for the future readers that might find themselves confused, and do a small contribution to the community.

Reason for this is the issue with this in ES6 module scope , so couple of examples that use d3.select(this) from your book won't work.

Example:

.on(" end", function()
 {
     d3. select( this) .transition() // <-- New!
          .duration( 1000) // <-- New!
          .attr(" fill", "black") 
          .attr(" r", 2); 
});

Murray, Scott. Interactive Data Visualization for the Web: An Introduction to Designing with D3 (p. 173). O'Reilly Media. Kindle Edition.

With ES6, this example would look like

.on(" end", (d, i, node) => // <-- we use a fat arrow function here
 {
     d3. select( node[i]) .transition() // <-- D3 v4 idiomatic approach which eliminates this inside the module
          .duration( 1000) // 
          .attr(" fill", "black") 
          .attr(" r", 2); 
});

[scotthmurray]

A great point, @mutantkeyboard, and thanks for reporting this ES6-related confusion. Thanks for taking the time to provide an example and reference, too.

That said, my intended audience for the book are beginners — while there are lots of additional subjects to be covered, I made the conscious decision to leave topics for intermediate/advanced developers to others, such as Elijah Meeks, who addresses D3 + ES6, among other topics, in his book.

[mutantkeyboard]

@alignedleft thank you for the quick response. I will definitely check the Elijah's book. Cheers