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

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


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


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


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


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


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


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


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


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


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


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

←   Home Page Why Data Visualizations   →