D3.js in Action
Elijah Meeks
  • February 2015
  • ISBN 9781617292118
  • 352 pages

A mandatory introduction to a very complex and powerful library.

Stephen Wakely, Thomson Reuters

D3.js in Action is a practical tutorial for creating interactive graphics and data-driven applications using D3.js. You'll start with in-depth explanations of D3's out-of-the-box layouts, along with dozens of practical use cases that align with different types of visualizations. Then, you'll explore practical 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 D3's rich interaction model as the foundation for a complete web application. In the end, you'll be ready to integrate D3.js into your web development process and transform any site into a more engaging and sophisticated user experience.

About the Technology

D3.js is a JavaScript library that allows data to be represented graphically on a web page. Because it uses the broadly supported SVG standard, 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.

About the book

D3.js in Action introduces you to the most powerful web data visualization library available and shows you how to use it to build interactive graphics and data-driven applications. You'll start with dozens of practical use cases that align with different types of charts, networks, and maps using D3's out-of-the-box layouts. Then, you'll explore practical techniques for content design, animation, and representation of dynamic data—including interactive graphics and live streaming data.

Table of Contents detailed table of contents



about this book

about the cover illustration

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 data visualization

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. Using 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.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

Part 2 The pillars of information visualization

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 interpolators

4.5. Complex accessor functions

4.6. Summary

5. Layouts

5.1. Histograms

5.2. Pie charts

5.2.1. Drawing the pie layout

5.2.2. Creating a ring chart

5.2.3. Transitioning

5.3. Pack layouts

5.4. Trees

5.5. Stack layout

5.6. Plugins to add new layouts

5.6.1. Sankey diagram

5.6.2. Word clouds

5.7. Summary

6. Network visualization

6.1. Static network diagrams

6.1.1. Network data

6.1.2. Adjacency matrix

6.1.3. Arc diagram

6.2. Force-directed layout

6.2.1. Creating a force-directed network diagram

6.2.2. SVG markers

6.2.3. Network measures

6.2.4. Force layout settings

6.2.5. Updating the network

6.2.7. Manually positioning nodes

6.2.8. Optimization

6.3. Summary

7. Geospatial information visualization

7.1. Basic mapmaking

7.1.1. Finding data

7.1.2. Drawing points on a map

7.1.3. Projections and areas

7.1.4. Interactivity

7.2. Better mapping

7.2.1. Graticule

7.2.2. Zoom

7.3. Advanced mapping

7.3.1. Creating and rotating globes

7.3.2. Satellite projection

7.4. TopoJSON data and functionality

7.4.1. TopoJSON the file format

7.4.2. Rendering TopoJSON

7.4.3. Merging

7.4.4. Neighbors

7.5. Tile mapping with d3.geo.tile

7.6. Further reading for web mapping

7.6.1. Transform zoom

7.6.2. Canvas drawing

7.6.3. Raster reprojection

7.6.4. Hexbins

7.6.5. Voronoi diagrams

7.6.6. Cartograms

7.7. Summary

8. Traditional DOM manipulation with D3

8.1. Setup

8.1.1. CSS

8.1.2. HTML

8.2. Spreadsheet

8.2.1. Making a spreadsheet with table

8.2.2. Making a spreadsheet with divs

8.2.3. Animating our spreadsheet

8.3. Canvas

8.3.1. Drawing with canvas

8.3.2. Drawing and storing many images

8.4.1. Interactively highlighting DOM elements

8.4.2. Selecting

8.5. Summary

Part 3 Advanced techniques

9. Composing interactive applications

9.1. One data source, many perspectives

9.1.1. Data dashboard basics

9.1.2. Spreadsheet

9.1.3. Bar chart

9.1.4. Circle pack

9.1.5. Redraw: resizing based on screen size

9.2. Interactivity: hover events

9.3. Brushing

9.3.1. Creating the brush

9.3.2. Making our brush more user friendly

9.3.3. Understanding brush events

9.3.4. Redrawing components

9.4. Summary

10. Writing layouts and components

10.1. Creating a layout

10.2. Writing your own components

10.2.1. Loading sample data

10.2.2. Linking components to scales

10.2.3. Adding component labels

10.3. Summary

11. Big data visualization

11.1. Big geodata

11.1.1. Creating random geodata

11.1.2. Drawing geodata with canvas

11.1.3. Mixed-mode rendering techniques

11.2. Big network data

11.3. Optimizing xy data selection with quadtrees

11.3.1. Generating random xy data

11.3.2. xy brushing

11.4. More optimization techniques

11.4.1. Avoid general opacity

11.4.2. Avoid general selections

11.4.3. Precalculate positions

11.5. Summary

12. D3 on mobile — bonus chapter online only

12.1. Principles of data-driven mobile design

12.2. Visualizing touch

12.2.1. d3.touches

12.2.2. Logging touch events with a list

12.2.3. Visualizing touch events

12.2.4. Single-touch panning

12.2.5. Visualizing touch extrapolation

12.2.6. Pinch zooming

12.2.7. Three-finger rotating

12.2.8. Tying it all together

12.3. Responsive data visualization

12.3.1. Creating responsive data visualization

12.3.2. Making a basic app

12.3.3. Tablet scale

12.3.4. Phone scale

12.3.5. Automatically recognizing different screen sizes

12.3.6. General principles of responsive data visualization

12.4. Geolocation

12.5. Summary


What's inside

  • 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.

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks