Toggle navigation
Net Ninja Pro
All Courses
Community
YouTube Channel
Login
Sign Up
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build Data UI's with D3.js & Firebase
Welcome to the Course
Before You Start
1 - Course Introduction (3:23)
2 - Examples of D3 (3:12)
3 - Text Editor (2:26)
4 - Course Files (0:46)
5 - Extra Resources (0:46)
SVG & D3.js Basics
6 - What are SVG's (3:47)
7 - Simple SVG Shapes (7:25)
8 - SVG Paths (10:23)
9 - Setting up D3 (1:46)
10 - Selecting Elements (4:09)
11 - Appending Elements (3:19)
12 - Method Chaining & Attributes (6:40)
13 - Text SVG's (2:46)
14 - Groups (4:06)
15 - Summary of Section (0:59)
Using Data with D3.js
16 - Joining Data (9:16)
20 - External Data (8:44)
18 - Joining Data (multiple elements) (4:54)
19 - The Enter Selection (7:40)
17 - Arrow Functions in D3 (5:34)
Scales & Bar Charts
21 - Why We Need Linear Scales (4:16)
22 - Creating a Linear Scale (9:30)
23 - Band Scales (10:37)
24 - Min, Max & Extent (5:54)
25 - Making a Bar Chart (part 1) (11:09)
26 - Making a Bar Chart (part 2) - Axes (6:23)
27 - Inverting Axes & Rects (7:15)
28 - Tick Formatting (6:00)
Firestore Database
29 - What is Firestore (3:01)
30 - Creating a Firestore Database (4:11)
31 - Setting up Firebase (3:31)
32 - Getting Data from Firestore (5:49)
The D3.js Update Pattern
33 - Updating Visualizations (1:48)
34 - Enter & Exit Selection (6:59)
35 - The Update Cycle (5:13)
36 - Creating an Update Function (10:18)
37 - D3 Interval (6:15)
38 - Exit Selection (3:40)
39 - Firestore Realtime Listener (6:10)
40 - Updating the Data (12:22)
D3.js Transitions
41 - D3 Transitions (1:12)
42 - Enter Transitions (6:36)
43 - Update Transitions (3:50)
44 - Merge & Refactor (4:16)
45 - Tweens (10:13)
Project - Donut Chart Budget Planner
46 - Project Intro & Setup (3:57)
47 - HTML Template (& Materialize) (13:13)
48 - Setting up Firestore (4:03)
49 - Adding Firestore Data (11:15)
50 - Pie & Arc Generators (3:46)
51 - Setting up the Pie Chart (11:21)
52 - Arc Generator (5:43)
53 - Reatime Data Setup (6:53)
54 - Drawing the Enter Selection (6:33)
55 - Ordinal Scales (7:25)
56 - Project Challenge (2:01)
57 - Project Solution (3:48)
58 - Enter Tween (9:57)
59 - Exit Tween (2:37)
60 - Update Tween (14:17)
61 - Legends (7:27)
User Interaction & Events
62 - Interactive Visualizations (1:41)
63 - Event Listeners (1:52)
64 - Mouseover Events (7:23)
65 - Transition Bug Fix (2:13)
66 - Click Events (4:34)
67 - Tooltips (11:25)
Project - Line Graph Fitness Tracker
68 - Project Introduction (2:25)
69 - HTML Template (10:05)
70 - DOM Manipulation (9:06)
71 - Adding Firestore Data (7:55)
72 - Realtime Data Setup (8:32)
73 - Graph Setup & Margins (6:11)
74 - Timescales & Axes (7:34)
75 - Domains & Axes (6:06)
76 - Formatting Axes (6:34)
77 - Enter, Exit & Update Selection (7:25)
78 - Adding Dummy Data (3:19)
79 - Filtering Data (5:07)
80 - Line Path Generator (9:11)
81 - Data Point Hover Effect (3:56)
82 - Project Challenge (3:15)
83 - Challenege Solution (7:14)
84 - Project Summary (1:15)
Data Hierarchy
85 - What is Data Hierarchy? (4:28)
86 - Data Structure (2:51)
87 - Data Stratify (8:07)
88 - Bubble Packing (part 1) (9:23)
89 - Bubble Packing (part 1) (11:51)
Project - Tree Diagram
90 - Project Preview & Setup (3:35)
91 - HTML Template (10:04)
92 - Adding Firestore Data (5:07)
93 - Realtime Data Setup (6:42)
94 - Graph Setup (3:13)
95 - Tree Generators (8:18)
96 - Nodes Enter Selection (9:13)
97 - Links Enter Selection (6:34)
98 - Node Positions (7:11)
99 - Project Challenge (2:21)
100 - Project Solution (3:07)
101 - Project Summary (1:07)
ES6 & Extras
D3.js version 6 migration guide
Firestore setup walkthrough
22 - Creating a Linear Scale
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
