Data Visualization with D3.js & Firebase
This is a 10-hr premium master class course.
Learn how to make great-looking, interactive & fun data visualizations such as line graphs, bar charts, pie charts, tree diagrams & more, with D3.js. You'll also learn how to hook your visualizations up to a real-time database (Firebase Firestore), so that your graphs & charts update in real-time.
What You'll Learn...
Welcome to the Course
Available in
days
days
after you enroll
SVG & D3.js Basics
Available in
days
days
after you enroll
Using Data with D3.js
Available in
days
days
after you enroll
Scales & Bar Charts
Available in
days
days
after you enroll
Firestore Database
Available in
days
days
after you enroll
The D3.js Update Pattern
Available in
days
days
after you enroll
D3.js Transitions
Available in
days
days
after you enroll
Project - Donut Chart Budget Planner
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Project - Line Graph Fitness Tracker
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Project - Tree Diagram
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Course Preview
Sign up for Net Ninja Pro
Most popular
Monthly Membership
$9/mo
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Cancel at any time
Yearly Membership
$79/yr
- Instant access to all courses
- Early access to new courses
- Access to premium & Udemy courses
- Save over 25%!
Get your first month half price when you use the code NINJAFLEDGLING. (monthly plan only).