Course Introduction
  • Introduction
  • Examples of D3.js on the Web
  • Text Editor & Packages
  • Course Files
  • Extra Resources
SVG and D3 Basics
  • What are SVG's?
  • Simple SVG Shapes
  • SVG Paths
  • Setting up D3.js
  • Selecting Elements
  • Appending Elements
  • Method Chaining & Attributes
  • Text SVG's
  • Groups
  • Section Summary
Using Data with D3
  • Joining Data to an Element
  • Using Arrow Functions
  • Joining Data to Multiple Elements
  • The Enter Selection
  • External Data ( JSON )
Scales & Bar Charts
  • Why We Need Linear Scales
  • Creating a Linear Scale
  • Band Scales
  • Min, Max & Extent
  • Creating a Bar Chart ( Groups & Margins )
  • Creating a Bar Chart ( Axes )
  • Inverting Scales
  • Tick Formatting
Firestore Database
  • What is a Firestore Database?
  • Creating a Firestore Database
  • Setting up the Firebase Config
  • Getting Data from Firestore
The D3 Update Pattern
  • Updating Visualizations
  • Enter & Exit Groups
  • The Update Pattern at a Glance
  • Creating an Update Function
  • D3 Interval Function
  • The Exit Selection
  • Firestore Realtime Data Updates
  • Updating Our Data
D3 Transitions
  • D3 Transitions Introduction
  • Enter Transitions
  • Update Transitions
  • Merge and Refactor
  • Tweens and Interpolation
Project One - Donut Chart (Budget Planner)
  • Introduction & Setup
  • HTML Template & Matetrialize
  • Firestore Setup
  • Adding Data to Firestore
  • Pie Charts & Arcs
  • Setting up a Pie Chart
  • Arc Path Generator
  • Realtime Data Setup
  • Drawing the Enter Selection
  • Ordinal Scales
  • Project Challenge
  • Project Solution
  • Arc Enter Tween
  • Arc Exit Tween
  • Arc Update Tween
  • Legends
User Interaction & Events
  • Interactive D3 Visuals
  • Event Listeners
  • Mouseover Events
  • Named Transitions (bug fix)
  • Click Events
  • Tooltips
Project Two - Fitness Tracker (Line Graphs)
  • Project Preview & Setup
  • HTML Template Setup
  • Adding DOM Events
  • Adding Data to Firestore
  • Realtime Data Setup
  • Graph Setup & Margins
  • Time Scales & Axes Groups
  • Domains & Axes
  • Formatting Times & Axes
  • Enter & Exit Selections
  • Adding Dummy Data
  • Filtering Data
  • Line Path Generator
  • Data Point Hover Effect
  • Project Challenge (SVG Lines)
  • Challenge Solution
  • Project Summary
Data Hierarchy
  • What is Data Hierarchy?
  • Data Structure Consideration
  • D3 Stratify & Root Nodes
  • Circle Packing (part 1)
  • Circle Packing (part 2)