There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Build Data Visualizations with D3.js & Firebase

Video Introducing this tutorial

Course 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
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

User Interaction & Events :
Interactive D3 Visuals
Event Listeners
Mouseover Events
Named Transitions (bug fix)
Click Events

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)

Project Three - Tree Diagram (Ninja Corp) :
Project Preview & Setup
HTML Template
Adding Firestore Data
Realtime Data Setup
Graph Setup
Tree Generators
Nodes Enter Selection
Links Enter Selection
Node Positions
Project Challenge - Ordinal Scale
Challenge Solution
Project Summary

ES6 & Extras :
Arrow Functions
Promise Basics
Filter & Map Methods
Template Strings