D3.js 4.x Data Visualization - Third Edition

Ændrew Rininsland, Swizec Teller

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781787128156
• Edition: 3
• Topic: Computer Science
• Subtopic: Computer Graphics
• Index: Computer Science

Create and publish your own interactive and compelling data visualizations with D3.js 4.xAbout This Book• Build interactive and rich graphics and visualization using JavaScript`s powerful library D3.js• Learn D3 from the ground up, using the all-new version 4 of the library• Gain insight into producing high-quality, extensible charts and visualizations using best practices such as writing testable, extensible code and strong typingWho This Book Is ForThis book is for web developers, interactive news developers, data scientists, and anyone interested in representing data through interactive visualizations on the Web with D3. Some basic knowledge of JavaScript is expected, but no prior experience with data visualization or D3 is required to follow this book.What You Will Learn• Map data to visual elements using D3's scales• Draw SVG elements using D3's shape generators• Transform data using D3's collection methods• Use D3's various layout patterns to quickly generate various common types of chart• Write modern JavaScript using ES2017 and Babel• Explore the basics of unit testing D3 visualizations using Mocha and Chai• Write and deploy a simple Node.js web service to render charts via HTML Canvas• Understand what makes a good data visualization and how to use the tools at your disposal to create accurate chartsIn DetailWant to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization.This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and techniqueYou will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code, as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time.By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.Style and approachThis book follows a tutorial-based approach in teaching the world's most powerful data visualization library, D3.

Making Data Useful

When creating visualizations for the Web, chances are that the format your data comes in will not be the final format you use with D3. We will take a look at making our datasets useful with both D3 and regular JavaScript.

We start with a quick dip into functional programming to bring everyone up to speed. A lot of this will be self-evident if you use Haskell, Scala, or Lisp, or write JavaScript in a functional style. Functional programming is a hot topic in JavaScript development right now, for good reason -- it makes your code easier to read, encourages good practices, such as not mutating variables, and leverages one of JavaScript's best features as a language -- the use of first-class functions. We'll take a look at what that means in a short while.

We will continue with loading external data in a variety of different ways, take a closer look at scales, and finish with some temporal and geographic data.

Thinking about data functionally

I've mentioned previously that D3 is very functionally designed, meaning that it uses some of the idioms JavaScript has adopted from functional programming. Although we can still approach D3 development in a very classical, object-oriented fashion, our lives will be much easier if we start thinking about our code and data with a functional mindset.

The good news is that JavaScript almost counts as a functional language; there are enough features to get the benefits of a functional style, and it also provides enough freedom to do things imperatively or in an object-oriented way. The bad news is that, unlike real functional languages, the environment gives no guarantee about our code.

Later on, in Chapter 9, Having Confidence in Your Visualizations, we'll look at TypeScript, which allows compilation of JavaScript using static types, and Tern.JS , which analyzes code in order to improve tooling. These efforts go a great deal toward improving confidence in how data moves through our visualizations, in addition to improving our tooling.

In this section, we'll go through the basics of functional-style coding and look at wrangling the data so that it's easier to work with. If you want to try proper functional programming, I suggest that you refer to Haskell in Learn You a Haskell for Great Good, free to read and available at http://learnyouahaskell.com/.

The idea behind functional programming is simple: compute by relying only on function arguments. It's simple, but its consequences are far reaching.

The biggest consequence is that we don't have to rely on state, which in turn gives us a referential transparency. This means that functions executed with the same parameters will always give the same results, regardless of when or how they're called.

In practice, this means that we design the code and dataflow, that is, get data as an input, execute a sequence of functions that pass changed data down the chain, and eventually get a result.

It also emphasizes immutability, whereby functions are written to prevent side-effects and changes to the underlying data as it passes through your code. In Chapter 2, A Primer on DOM, SVG, and CSS, we used Array.from() to make a copy of an argument so that our function wouldn't mutate the data passed to it. We also generally assign variables using the const keyword, so we know to make a copy, and will get errors if we try to reassign a variable. We'll continue to do this to some extent though we mainly make use of ES6's concept of immutability, insomuch that it only protects against reassignment using the const keyword, we still have the ability to extend objects and interact with arrays using methods, such as Array.prototype.pop() and Array.prototype.unshift(), as per usual.

In the following examples, I give the full names of the native prototype methods so as to differentiate them from d3-selection's filter and map methods. Array.prototype.map, thus, refers to the map method on the Array primitive's prototype object.

What's a prototype, though? JavaScript is a prototype-based language, meaning that everything is effectively an object that inherits from another object, its prototype. All arrays are descendants of the Array object, thus, they inherit its prototype methods, such as .map(), .reduce() and .filter(). The Array prototype itself inherits other prototypes, all the way up the chain to Object.prototype. D3 selections are also descendants of the Array prototype, but D3 then goes on to replace some functions, such as .filter() and .sort() with its own versions adapted for selections, in addition to adding a few other helpful methods, such as .each, or to come full circle with the whole naming thing, d3.selection.prototype.each (or simply selection.each as it's referred to in the documentation). Even ES2015 classes, which use a much different inheritance model and come from object-oriented programming, are ultimately still prototype-based.

You've already seen this functional approach in previous examples, particularly in Chapter 2, A Primer on DOM, SVG, and CSS. Our dataset started and ended as an array of values. We performed some actions for each item, and we relied only on the current item when deciding what to do. We also had the current index so that we could cheat a little with an imperative approach by looking ahead and behind in the stream.

Although I endeavor to take a somewhat functional approach throughout the rest of the book, there's no way I could adequately explain the nuances of what is a really interesting and important practice within modern JavaScript development. For a good series on the topic, I suggest Eric Elliott's excellent series that can be found at https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c.

Built-in array functions

JavaScript comes with a slew of array-manipulation functions. We'll focus on those that are more functional in nature: the iteration methods.

Map, Reduce, and Filter (Array.prototype.map, Array.prototype.reduce , and Array.prototype.filter to be specific) are hugely useful for remodeling data; in fact, map/reduce is a core pattern in NoSQL databases, and being able to parallelize these functions allows them a huge degree of scalability.

Let's look at the built-in functions in detail. It's worth noting that none of these are mutative; in other words, they return a copy of the source array and leave it unchanged.

• Array.prototype.map applies a function on every element of an array and returns a new array with changed values:

 > [1,2,3,4].map(d => d+1)
 [ 2, 3, 4, 5 ] 

• Array.prototype.reduce uses a combining function and a starting value to collapse an array into a single value:

 > [1,2,3,4].reduce((acc, curr) => acc + curr, 0)
 10 

• Array.prototype.filter goes through an array and keeps elements for which the predicate returns true:

 > [1,2,3,4].filter(d => d%2) 
 [ 1, 3 ] 

• Two more useful functions are Array.prototype.every and Array.prototype.some, which are true if every or some items in the array are true:

 // Are all elements odd? 
 [1,3,5,7,9].every(elem => elem % 2); // True 
 [1,2,5,7,9].every(elem => elem % 2); // False 

 // Is at least one odd? 
 [1,3,5,7,9].some(elem => elem % 2); //...

Table of contents

• Title Page
• Copyright
• Credits
• About the Authors
• About the Author2
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• Getting Started with D3, ES2017, and Node.js
• A Primer on DOM, SVG, and CSS
• Shape Primitives of D3
• Making Data Useful
• Defining the User Experience - Animation and Interaction
• Hierarchical Layouts of D3
• The Other Layouts
• D3 on the Server with Canvas, Koa 2, and Node.js
• Having Confidence in Your Visualizations
• Designing Good Data Visualizations