D3.js in Action, Second Edition
Data visualization with JavaScript
Elijah Meeks
  • MEAP began November 2016
  • Publication in June 2017 (estimated)
  • ISBN 9781617294488
  • 375 pages (estimated)
  • printed in black & white


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 is a JavaScript library that allows data to be represented graphically. D3 allows you to create scalable graphs for any modern browser. You start with a structure, dataset, or algorithm and programmatically generate static, interactive, or animated images that responsively scale to any screen.

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. It includes instructions on how to use D3 modules with npm, as well as how to integrate D3 with modern MVC frameworks like React.js. You'll start with in-depth explanations of D3's out-of-the-box layouts, along with dozens of real-world use cases that align with different types of visualizations. Then, you'll explore techniques for content creation, animation, and representing dynamic data including interactive graphics and data streamed live over the web. The final chapters show you how to use more complex D3 functionality to improve performance and build a complete web application. By the end, you'll be ready to integrate D3.js into your web development process and add data visualization to transform any site or internal application.

"It was a tremendous gain in terms of connecting data with graphical representations."

~ Piotr Kopszak

"The later chapters has some immensely valuable info on making your site D3 production ready."

~ Jon Borgman

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

What's inside

  • Updated for D3 v4 and ES6
  • Interacting with vector graphics
  • Expressive data visualization
  • Creating rich mapping applications
  • Prepping your data
  • Complete data-driven web apps in D3

About the reader

Readers need basic HTML, CSS, and JavaScript skills. No experience with D3 or SVG is required.

About the author

Elijah Meeks is a senior data visualization engineer at Netflix. His D3.js portfolio includes work at Stanford University and with well-known companies worldwide.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $44.99 pBook + eBook
MEAP eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks