D3 Tutorial Table of Contents

https://www.dashingd3js.com/table-of-contents

List of Sections

D3 Tutorial Part 1 - From Zero to Binding Data  

1. 
   
2. Why Data Visualizations
   • A picture is worth 1000 words
   • A Famous Data Visualization
   • Data - now and in the future
   • Data is the new Oil
   
   
3. 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
   
   
4. The Data Visualization Process
   • The Ben Fry Visualizing Data Process
   • Acquire
   • Parse
   • Filter
   • Mine
   • Represent
   • Refine
   • Interact
   
   
5. Basic Building Blocks
   • Modern Browsers
   • HTML
   • CSS
   • JavaScript
   • Document Object Model (DOM)
   • Scalable Vector Graphics (SVG)
   • Web Inspector
   
   
6. D3.js First Steps
   • HTML Setup
   • D3.js Setup
   • Source File Setup Test
   • JavaScript Console Setup Test
   
   
7. Adding a DOM element
   • Basic Example
   • D3.js Select Method
   • D3.js Append Operator
   
   
8. Adding an SVG element
   • Basic Example
   • D3.js Legibility
   • D3.js Style Operator
   • D3.js Chain Syntax
   • Selections as JavaScript Variables
   
   
9. 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
   
   
10. 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. 
    
11. 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
    
    
12. 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
    
    
13. 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
    
    
14. 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
    
    
15. 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
    
    
16. 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
    
    
17. Dynamic SVG Coordinate Space
    • The Goal
    • Three SVG Rectangle Example
    • Manually Adjusting SVG Container Space
    • Dynamically Adjusting SVG Container Space
    • The Finished Product
    
    
18. D3.js Scales
    • The Goal
    • D3.js Scales
    • A Numerical Example
    • D3.js Scale Linear
    • D3.max
    • D3.min
    • Other D3.js Scales
    
    
19. 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
    
    
20. SVG Text Element
    • The Goal
    • SVG Text Element
    • Adding an SVG Text Element
    • SVG Text Element and D3.js
    
    
21. 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