D3 Tutorial Table of Contents


List of Sections


D3 Tutorial Part 1 - From Zero to Binding Data

  1. Why Data Visualizations
    • A picture is worth 1000 words
    • A Famous Data Visualization
    • Data - now and in the future
    • Data is the new Oil

  2. Why build Data Visualizations with D3.js
    • What is D3.js
    • Who develops D3.js
    • Why use D3.js
    • When you should use D3.js
    • Where is D3.js used

  3. The Data Visualization Process
    • The Ben Fry Visualizing Data Process
    • Acquire
    • Parse
    • Filter
    • Mine
    • Represent
    • Refine
    • Interact

  4. Basic Building Blocks
    • Modern Browsers
    • HTML
    • CSS
    • JavaScript
    • Document Object Model (DOM)
    • Scalable Vector Graphics (SVG)
    • Web Inspector

  5. D3.js First Steps
    • HTML Setup
    • D3.js Setup
    • Source File Setup Test
    • JavaScript Console Setup Test

  6. Adding a DOM element
    • Basic Example
    • D3.js Select Method
    • D3.js Append Operator

  7. Adding an SVG element
    • Basic Example
    • D3.js Legibility
    • D3.js Style Operator
    • D3.js Chain Syntax
    • Selections as JavaScript Variables

  8. Binding Data to DOM Elements
    • Basic Example
    • D3.js SelectAll Method
    • D3.js Data Operator
    • D3.js Virtual Selections (Thinking with Joins)
    • D3.js Enter Method
    • D3.js Append Operator Revisited
    • D3.js Text Operator
    • Where did the Data go?
    • D3.js Data Operator Revisited
    • Basic Example Revisited

  9. Using Data Bound to DOM Elements
    • Basic Example
    • D3.js Text Operator Revisited
    • JavaScript Functions in D3.js Operators
    • Variables Available inside D3.js Operators

D3 Tutorial Part 2 - Using Data to Create Data Visualizations

  1. Creating SVG Elements Based on Data
    • The Goal
    • Create an SVG Element to Hold SVG Elements
    • SVG Circle Elements
    • Bind Data to SVG Circles
    • Use Bound Data to Alter SVG Circles
    • Styling SVG Elements Based on Data

  2. Using the SVG Coordinate Space
    • The Goal
    • Mathematical / Graph Coordinate Space
    • SVG Coordinate Space
    • .append('svg') as a Coordinate Space
    • Position SVG Elements in the SVG Coordinate Space
    • Create an SVG Element to Hold SVG Elements
    • Bind Data to SVG Circles
    • Use Bound Data to Alter SVG Circle Coordinates
    • Styling SVG Elements Based on Data Revisited

  3. Data Structures D3.js Accepts
    • The Goal
    • What we have seen thus far
    • D3.js Selections are Arrays
    • Loading External Data Resources
    • JSON
    • Array of JSON Objects

  4. Using JSON to Simplify Code
    • The Goal
    • Previous Example of Three Circles
    • Bind JSON Objects to the __data__ Attribute
    • Use Bound JSON Objects to Alter SVG Elements

  5. SVG Basic Shapes and D3.js
    • The Goal
    • Drawing an SVG Circle using D3.js
    • Drawing an SVG Rectangle using D3.js
    • Drawing an SVG Ellipse using D3.js
    • Drawing an SVG Straight Line using D3.js
    • Drawing Polyline & Polygon SVG Basic Shapes using D3.js

  6. SVG Paths and D3.js
    • The Goal
    • The Shape to Make All Shapes
    • SVG Path Example
    • SVG Path Mini-Language
    • D3.js Path Data Generator Line Example
    • D3.js Path Data Generators

  7. Dynamic SVG Coordinate Space
    • The Goal
    • Three SVG Rectangle Example
    • Manually Adjusting SVG Container Space
    • Dynamically Adjusting SVG Container Space
    • The Finished Product

  8. D3.js Scales
    • The Goal
    • D3.js Scales
    • A Numerical Example
    • D3.js Scale Linear
    • D3.max
    • D3.min
    • Other D3.js Scales

  9. SVG Group Element and D3.js
    • The Goal
    • SVG Group Element
    • Grouping SVG Elements Together
    • Transforming SVG Elements Together (Part 1)
    • SVG Transform Attribute
    • Transforming SVG Elements Together (Part 2)
    • SVG Transform as a Coordinate Space Transformation
    • Grouping SVG Elements with D3.js
    • Transforming SVG Elements Together with D3.js

  10. SVG Text Element
    • The Goal
    • SVG Text Element
    • Adding an SVG Text Element
    • SVG Text Element and D3.js

  11. D3.js Axes
    • The Goal
    • D3.js Axis Component
    • Why We Add Axes
    • Horizontal Axis and Vertical Axis
    • Scale of Axis
    • Generating a D3.js Axis
    • Calling the D3.js Axis Function