D3 Tutorial Table of Contents

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

List of Sections

D3 Tutorial Part 1 - From Zero to Binding Data

Why Data Visualizations

A picture is worth 1000 words
A Famous Data Visualization
Data - now and in the future
Data is the new Oil

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

The Data Visualization Process

The Ben Fry Visualizing Data Process
Acquire
Parse
Filter
Mine
Represent
Refine
Interact

Basic Building Blocks

Modern Browsers
HTML
CSS
JavaScript
Document Object Model (DOM)
Scalable Vector Graphics (SVG)
Web Inspector

D3.js First Steps

HTML Setup
D3.js Setup
Source File Setup Test
JavaScript Console Setup Test

Adding a DOM element

Basic Example
D3.js Select Method
D3.js Append Operator

Adding an SVG element

Basic Example
D3.js Legibility
D3.js Style Operator
D3.js Chain Syntax
Selections as JavaScript Variables

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

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

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

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

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

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

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

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

Dynamic SVG Coordinate Space

The Goal
Three SVG Rectangle Example
Manually Adjusting SVG Container Space
Dynamically Adjusting SVG Container Space
The Finished Product

D3.js Scales

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

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

SVG Text Element

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

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