D3.js in Action (2015)

Preface

I’ve always loved making games. Board games, role-playing games, computer games—I just love abstracting things into rules, numbers, and categories. As a natural consequence, I’ve always loved data visualization. Damage represented as a bar, spells represented with icons, territory broken down into hexes, treasure charted out in a variety of ways. But it wasn’t until I started working with maps in grad school that I became aware of the immeasurable time and energy people have invested in understanding how to best represent data.

I started learning D3 after having worked with databases, map data, and network data in a number of different desktop packages, and also coding in Flash. So I was naturally excited when I was introduced to D3, a JavaScript library that deals not only with information visualization generally, but also with the very specific domains of geospatial data and network data. The fact that it lives in the DOM and follows web standards was a bonus, especially because I’d been working with Flash, which wasn’t known for that kind of thing.

Since then, I’ve used D3 for everything, including the creation of UI elements that you’d normally associate with jQuery. When I was approached by Manning to write this book, I thought it would be the perfect opportunity for me to look deeply at D3 and make sure I knew how every little piece of the library worked, while writing a book that didn’t just introduce D3 but really dived into the different pieces of the library that I found so exciting, like mapping and networks, and tied them together.

As a result, the book ended up being much longer than I expected and covers everything from the basics of generating lines and areas to using most of the layouts that come to mind when you think of data visualization. It also devotes some space to maps, networks, mobile, and optimization.

In the end, I tried to give readers a broad approach to data visualization tools, whether that means maps or networks or pie charts.

About this Book

People come to data visualization, and D3 particularly, from three different areas. The first is traditional web development, where they assume D3 is a charting library or, less commonly, a mapping library. The second is more traditional software development, like Java, where D3 is part of the transition into HTML5 development. The last area is a trajectory that involves statistical analysis using R, Python, or desktop apps.

In each case, D3 represents two major transitions for folks: modern web development and data visualization. I touch on aspects of both that may give a reader more grounding in what I expect to be new and strange fields. Someone who’s intimately familiar with JavaScript may find that some of these subjects (like function chaining) are already well understood, and others who know data visualization well may feel the same way about some of the general principles, like graphical primitives.

Although I do provide an introduction to D3, the focus of this book is on a more exhaustive explanation of key principles of the library. Whether you’re just getting started with D3, or you’re looking to develop more advanced skills, this book provides you with the tools you need to create whatever data visualization you can think of.

Roadmap

This book is split into three parts. The first three chapters focus on the fundamentals of D3. You’ll see data-binding, loading data, and creating graphical elements from data in a variety of different ways. It also deals with scales, color, and other important aspects of data visualization that you might already know well. Some of the core technologies used by D3, like JavaScript, CSS, and SVG, are explained throughout these chapters.

The next five chapters use D3 in the ways we typically think of. Chapter 4 teaches you how to create simple graphics from data, such as line charts, axes, and boxplots. Chapter 5 gives an in-depth exploration of various traditional data visualization layouts like pie charts, tree layouts, and word clouds. Chapter 6 is devoted to network visualization, which might seem exotic, but network visualization is being used more and more in a variety of domains. Chapter 7 dives into the rich mapping capabilities in D3, and includes leveraging TopoJSON to do interesting geodata manipulation in the browser. Chapter 8 is devoted to manipulating traditional HTML elements, like paragraphs and lists, to demonstrate that D3 is not tied to SVG.

The last three chapters and chapter 12 (online only) cover topics that can be considered deep diving into D3. I’ve found that each has become an important part of my own practice. This includes principles for wiring up your own data dashboard, creating your own D3 layouts and components, optimizing data visualization for large datasets, and writing data visualization for mobile. Even if you don’t think you’ll ever be using D3 in these ways, each of these chapters still touches on key aspects of using D3.

How to use this book

If you’re just getting started with D3, I suggest going through chapters 1 through 4 in order. Each chapter builds on the last and establishes the basic principles not only of D3 but also of data visualization. After that, it depends on what you plan to use D3 for. If your data is mostly geographic, then you can jump to chapter 7, and similarly, if your data is mostly network data, you can jump to chapter 6. If you’re doing traditional data visualization, then I suggest going to chapter 5 and then on to chapter 9 to start thinking about dashboards, which are a key component of traditional data visualization.

If you’ve been using D3 for a while and want to improve your skills, I suggest skimming the first three chapters. The parts that I think might be of particular interest are in chapter 3, and deal with color and loading external resources like SVG icons or HTML content. You might also want to review generators and components in chapter 4 to fill in any gaps you might have dealing with these common, but often underexamined, parts of D3. After that, it depends on what you see as your strengths and what you see as your goals for using D3. If you want to maximize traditional data visualization, take a look at chapter 5 to see the layouts, and then look at chapter 9 for dashboards. You’re probably familiar with most of the content there, but these chapters deal with it more exhaustively than you likely have experienced. After that, look at chapter 11 and see if there are any optimization techniques you might want to bring into your data visualization, or look at chapter 8 and think about how you might use the D3 tricks you know to build UI elements and otherwise do traditional web development.

Much of the value of this book comes in chapters 6 and 7, which go into great detail about using D3 for two major areas of data visualization: networks and maps. Along those lines, the use of HTML5 canvas in chapters 8 and 11 is an area that even experienced D3 developers might not be familiar with.

Regardless of your level of experience with D3, I recommend you really spend some time with chapter 10, which deals with the structure of layouts and components while showing you how to build your own. Beginning to build modular, reusable components and layouts will allow you to create not only effective data visualization, but also an effective career in visualizing data.

Chapter 12 is available online only from the publisher’s website at www.manning.com/D3.jsinAction and is a fun read that will expand your horizons.