D3.js By Example
Article Index
D3.js By Example
Review continued

Author: Michael Heydt
Publisher: Packt Publishing
Pages: 304
ISBN: 978-1785280085
Kindle: B014T58NE6
Audience: Newcomers to D3 data visualization 
Rating: 4.5
Reviewer: Ian Stirk

Chapter 8 Adding User Interactivity

Interacting with data allows the user to move data, hide data, drill down, and reorder data – allowing more insight into the data. The chapter opens with a look at mouse events, allowing the user to interact with D3 visualizations. Sample code is provided to track the mouse position via the mousemove event, entering and leaving an object can be discerned via the mouseenter and mouseout events, and finally the mouseclick event is illustrated. The examples link events to code.

The chapter next looks at using behaviours to drag, pan, and zoom. The earlier bar charts are extended to introduce some interactivity (e.g. color change).

The chapter ends with a look at highlighting selected items using brushes, this can identify a subset of data that the user might want to drill down into. Online examples of brushes are given, together with the use of ‘focus + context’ to illustrate a subset of data in a wider context. Overall it provides a useful account of how to introduce interactivity into D3 visualization.

Chapter 9 Complex Shapes Using Paths

D3 provides various objects (path generators) to create complex paths, used for complex shapes. The chapter opens with a look at the common design pattern used for path generator usage. This is followed by examples, including: creation of lines, areas, arc, pie chart, symbols, and curved lines.

The chapter ends with a look at the creation of line graphs using various built-in generators. D3 uses interpolation to join your data value points, various types of complex lines are possible.

Chapter 10 Using Layouts to Visualize Series and Hierarchical Data

Layouts are often viewed as the most powerful feature of D3, allowing the creation of complex graphs. The graphs/layouts discussed (with code), are: 

  • Stacked layout to create bar and area graphs

  • Hierarchical diagrams, including trees and enclosures

  • Item relationships with chord diagrams

  • Information flow using streamgraphs and Sankey diagrams 

This chapter provides a useful overview of some of the more advanced functionality of D3.

Chapter 11 Visualizing Information Networks

This chapter takes a detailed look at the network diagram graph and provides an interesting look at the use of D3 for network diagrams. This builds upon the flow and hierarchy concepts given in the previous chapter, allowing the visualization of complex network (e.g. relationships). The chapter opens with a look at the force-directed graph, commonly used to render network information. Various terms are defined (e.g. charge, gravity), before creating a simple example force-directed graph, showing the relationships between a small group of people. The example continues, showing how link-distance can be used to spread out the nodes, and how adding repulsion can prevent crossed links. 


Chapter 12 Creating Maps with GeoJSON and TopoJSON

D3 has various functions for creating maps, or to overlay on existing maps. GeoJSON is a form of JSON that encodes geographical data, and TopoJSON is a more compressed form of GeoJSON. The chapter opens with a quick overview of TopoJSON and GeoJSON, explaining how maps are represented and rendered. Next, a map of the USA is created, and enhanced with state boundaries.

The chapter continues by creating a flat map of the world, this is then enhanced to show a spherical map, then color is added to identify each country. Interactivity is added to the map using: panning and zooming, highlighting country borders with mouseover, and rotating the globe with the mouse.

The chapter ends with a look at annotating the map, traditionally this involves complex math, but using the D3 library makes it much easier. The examples discussed cover: labelling states, placing symbols on the map, and creating a choropleth (i.e. a gradient color map) using the rgb() function.

This chapter provides a very interesting look at how D3 functionality can be used with maps.

Chapter 13 Combining D3.js and AngularJS

AngularJS is a JavaScript framework that can be used with D3 to create dynamic and modular web applications. An introductory knowledge is AngularJS is needed to understand the examples fully. The first example uses an AngularJS controller to create the data, which is rendered as a D3 bar chart. This example is extended to create another directive (view), using the same data is visualized as a donut. Finally, a degree of interactivity is added.

This chapter shows how D3 can be integrated into AngularJS and its modular framework.


This book aims to explain the popular data visualization framework D3 using examples, and certainly succeeds. The book is well written, and easy to read. There are helpful diagrams, step-by-step code walkthroughs, inter-chapter links, and links to further information.

The book introduces D3 with simple initial examples, and adds new functionality as the book progresses, providing steadily increasing knowledge. To get the most out of the book, you need some basic understanding of programming, but not too much. For me, the highlight was the use of bl.ocks.org to run the example code, making it much easier to follow along.

Some of the grouping of the topics within the chapters seems odd (e.g. including loading data with scales). Sometimes, terms are used before being explained (e.g. DOM, SVG). It might have been useful to have a section on where to go to get further information (newsletters, blogs, websites etc).

If you want to learn data visualization using the D3 framework, I can heartily recommend this instructive example-led book.


Coding for Beginners, 2nd Ed (In Easy Steps)

Author: Mike McGrath
Publisher: In Easy Steps
Pages: 192
Kindle: B0B56LN77V
Audience: Complete beginners to programming
Rating: 4
Reviewer: Sue Gee

This book aims to introduce hands-on modern programming to complete beginners. Can this be achieved in fewer than 180 [ ... ]

Kill It With Fire

Author: Marianne Bellotti
Publisher: No Starch Press
Pages: 248
ISBN: 978-1718501188
Print: 1718501188
Kindle: B08CTFY4JP
Audience: Developers renovating aging systems
Rating: 4.5
Reviewer: Kay Ewbank

The subtitle of this book is "Manage aging computer systems and future proof modern ones". Thi [ ... ]

More Reviews

Last Updated ( Tuesday, 20 February 2018 )