D3.js in Action, Second Edition
Data visualization with JavaScript
Elijah Meeks
  • November 2017
  • ISBN 9781617294488
  • 384 pages
  • printed in color
pBook available Nov 27, 2017
ePub + Kindle available Dec 6, 2017

From basic to complex, this book gives you the tools to create beautiful data visualizations.

Claudio Rodriguez, Cox Media Group


An eBook copy of the previous edition, D3.js in Action (First Edition), is included at no additional cost. It will be automatically added to your Manning Bookshelf within 24 hours of purchase.

D3.js in Action, Second Edition is completely revised and updated for D3 v4 and ES6. It's a practical tutorial for creating interactive graphics and data-driven applications using D3.

Table of Contents detailed table of contents

Part 1 D3.js fundamentals

1. An introduction to D3.js

1.1. What is D3.js?

1.2. How D3 works

1.2.1. Data visualization is more than charts

1.2.2. D3 is about selecting and binding

1.2.3. D3 is about deriving the appearance of web page elements from bound data

1.2.4. Web page elements can now be divs, countries, and flowcharts

1.3. The Power of HTML5

1.3.1. The DOM

1.3.2. Coding in the console

1.3.3. SVG

1.3.4. CSS

1.3.5. JavaScript

1.3.6. ES6 and Node

1.4. Data standards

1.4.1. Tabular data

1.4.2. Nested data

1.4.3. Network data

1.4.4. Geographic data

1.4.5. Raw data

1.4.6. Objects

1.5. Infoviz standards expressed in D3

1.6. Your first D3 app

1.6.1. Hello world with divs

1.6.2. Hello World with circles

1.6.3. A conversation with D3

1.7. Summary

2. Information visualization data flow

2.1. Working with data

2.1.1. Loading data

2.1.2. Formatting data

2.1.3. Transforming data

2.1.4. Measuring data

2.2. Data-binding

2.2.1. Selections and binding

2.2.2. Accessing data with inline functions

2.2.3. Integrating scales

2.3. Data presentation style, attributes, and content

2.3.1. Visualization from loaded data

2.3.2. Setting channels

2.3.3. Enter, update, and exit

2.4. Summary

3. Data-driven design and interaction

3.1. Project architecture

3.1.1. Data

3.1.2. Resources

3.1.3. Images

3.1.4. Style sheets

3.1.5. External libraries

3.2. Interactive style and DOM

3.2.1. Events

3.2.2. Graphical transitions

3.2.3. DOM manipulation

3.2.4. Using color wisely

3.3. Pregenerated content

3.3.1. Images

3.3.2. HTML fragments

3.3.3. Pregenerated SVG

3.4. Summary

4. Chart components

4.1. General charting principles

4.1.1. Generators

4.1.2. Components

4.1.3. Layouts

4.2. Creating an axis

4.2.1. Plotting data

4.2.2. Styling axes

4.3. Complex graphical objects

4.4. Line charts and interpolations

4.4.1. Drawing a line from points

4.4.2. Drawing many lines with multiple generators

4.4.3. Exploring line interpolation

4.5. Complex accessor functions

4.6. Using 3rd party d3 modules to create legends

4.7. Summary

5. Layouts

5.1. Histograms

5.1.1. Drawing a histogram

5.1.2. Interactivity

5.1.3. Drawing violin plots

5.2. Pie charts

5.2.1. Drawing the pie layout

5.2.2. Creating a ring chart

5.2.3. Transitioning

5.3. Stack layout

5.4. Plugins to add new layouts

5.4.1. Sankey diagram

5.4.2. Word clouds

5.5. Summary

Part 2: Complex data visualization

6. Hierarchical Visualization

6.1. Hierarchical patterns

6.2. Working with hierarchical data

6.2.1. Hierarchical JSON

6.2.2. D3.nest

6.2.3. D3.stratify

6.3. Pack layouts

6.3.1. Drawing the circle pack

6.3.2. When to use circle packing

6.4. Trees

6.4.1. Drawing a dendrogram

6.4.2. Radial tree diagrams

6.4.3. d3.clustervs d3.tree

6.4.4. When to use Dendrograms

6.5. Partition

6.5.1. Drawing an Icicle Chart

6.5.2. Sunburst: Radial icicle chart

6.5.3. Flame Graph

6.5.4. When to use the partition layout

6.6. Treemaps

6.6.1. Building

6.6.2. Filtering

6.6.3. Radial Treemap

6.6.4. When to use treemaps

6.7. Summary

7. Network visualization

7.1. Static network diagrams

7.1.1. Network data

7.1.2. Adjacency matrix

7.1.3. Arc diagram

7.2. Force-directed layout

7.2.1. Playing with forces

7.2.2. Creating a force-directed network diagram

7.2.3. SVG markers

7.2.4. Network measures

7.2.5. Force layout settings

7.2.6. Updating the network

7.2.8. Manually positioning nodes

7.2.9. Optimization

7.3. Summary

8. Geospatial information visualization

8.1. Basic mapmaking

8.1.1. Finding data

8.1.2. Drawing points on a map

8.1.3. Projections and areas

8.1.4. Interactivity

8.2. Better mapping

8.2.1. Graticule

8.2.2. Zoom

8.3. Advanced mapping

8.3.1. Creating and rotating globes

8.3.2. Satellite projection

8.4. TopoJSON data and functionality

8.4.1. TopoJSON the file format

8.4.2. Rendering TopoJSON

8.4.3. Merging

8.4.4. Neighbors

8.5. Further reading for web mapping

8.5.1. Tile Mapping

8.5.2. Transform zoom

8.5.3. Canvas drawing

8.5.4. Raster reprojection

8.5.5. Hexbins

8.5.6. Voronoi diagrams

8.5.7. Cartograms

8.6. Summary

Part 3: Advanced techniques

9. Interactive applications with React & D3

9.1. One data source, many perspectives

9.2. Getting started with React

9.2.1. Why React, Why Not X?

9.2.2. react-create-app: setting up your application

9.2.3. JSX

9.3. Traditional D3 Rendering with React

9.4. React for Element Creation, D3 as the Visualization Kernel

9.5. Data dashboard basics

9.6. Dashboard Upgrades

9.6.1. Responsiveness

9.6.2. Legends

9.6.3. Cross-highlighting

9.7. Brushing

9.7.1. Creating the brush

9.7.2. Understanding brush events

9.8. Show me the numbers

9.9. Summary

10. Writing layouts and components

10.1. Creating a layout

10.1.1. Designing your layout

10.1.2. Implementing your layout

10.1.3. Testing your layout

10.1.4. Extending your layout

10.2. Writing your own components

10.3. Loading sample data

10.4. Linking components to scales

10.5. Adding component labels

10.6. Summary

11. Mixed Mode Rendering

11.1. Built-in Canvas Rendering with d3-shape Generators

11.2. Big geodata

11.2.1. Creating random geodata

11.2.2. Drawing geodata with canvas

11.2.3. Mixed-mode rendering techniques

11.3. Big network data

11.4. Optimizing xy data selection with quadtrees

11.4.1. Generating random xy data

11.4.2. xy brushing

11.5. More optimization techniques

11.5.1. Avoid general opacity

11.5.2. Avoid general selections

11.5.3. Precalculate positions

11.6. Summary

About the Technology

Visualizing complex data is hard. Visualizing complex data on the web is darn near impossible without D3.js. D3 is a JavaScript library that provides a simple but powerful data visualization API over HTML, CSS, and SVG. Start with a structure, dataset, or algorithm; mix in D3; and you can programmatically generate static, animated, or interactive images that scale to any screen or browser. It's easy, and after a little practice, you'll be blown away by how beautiful your results can be!

About the book

D3.js in Action, Second Edition is a completely updated revision of Manning's bestselling guide to data visualization with D3. You'll explore dozens of real-world examples, including force and network diagrams, workflow illustrations, geospatial constructions, and more. Along the way, you'll pick up best practices for building interactive graphics, animations, and live data representations. You'll also step through a fully interactive application created with D3 and React.

What's inside

  • Updated for D3 v4 and ES6
  • Reusable layouts and components
  • Geospatial data visualizations
  • Mixed-mode rendering

About the reader

Suitable for web developers with HTML, CSS, and JavaScript skills. No specialized data science skills required.

About the author

Elijah Meeks is a senior data visualization engineer at Netflix.

combo $44.99 pBook + eBook + liveBook
eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

The best reference for one of the most useful DataViz tools.

Jonathan Rioux, TD Insurance

From toy examples to techniques for real projects. Shows how all the pieces fit together.

Scott McKissock, USAID

A clever way to immerse yourself in the D3.js world.

Felipe Vildoso Castillo, University of Chile