D3 v6 Tutorial Table of Contents

D3 v6 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

D3 Data Visualization 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 Using D3.js

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

Adding an SVG Element Using D3.js

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

Use D3.js To Bind 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

Use Data Bound To DOM Elements With D3.js

Basic Example
D3.js Text Operator Revisited
JavaScript Functions in D3.js Operators
Variables Available inside D3.js Operators

D3 v6 Tutorial Part 2: Using Data to Create Data Visualizations

Use D3.js To Create 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 With D3.js

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

What we have seen thus far
D3.js Selections are Arrays
Loading External Data Resources

JSON
Array of JSON Objects
D3 JSON Data
Previous Example of Three Circles
Bind JSON Objects to the __data__ Attribute
Use Bound JSON Objects to Alter SVG Elements