Build Data Visualizations with D3.js & Firebase
4.7 (960 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,657 students enrolled

Build Data Visualizations with D3.js & Firebase

Learn how to use D3 (v5) & Firebase (Firestore) to create dynamic SVG data visualizations. Bar charts, pie charts...
Highest Rated
4.7 (960 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,657 students enrolled
Last updated 7/2019
English
English [Auto-generated]
Current price: $64.99 Original price: $99.99 Discount: 35% off
6 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn D3 JS & Firebase (Firestore) from the ground up
  • Create data-driven visualizations (graphs, charts, diagrams) with D3 JS
  • Store (and retrieve) data in a real-time database called Firestore (from Firebase)
  • Updata data visualizations in real-time with Firestore
  • Create 3 projects with D3 and Firebase (Firestore)
Course content
Expand all 105 lectures 10:19:18
+ Course Introduction
5 lectures 10:34

In this video we'll look at some examples of data visualizations on the web, which have been made using the D3.js library.

Preview 03:13

Here I'll show you which code editor I'll be using for the course (VS code) as well as some of the packages I'll be using for VS Code too.

Text Editor & Packages
02:26

Here I'll show you how to access all of the course files from the course repository on GitHub.

Course Files
00:46

If you need extra help with some JavaScript topics (or HTML, CSS & Firebase), I'll show you where to get access to additional free tutorials.

Preview 00:46
+ SVG and D3 Basics
10 lectures 45:20

We'll take a look at what SVG's actually are and why we use them.

What are SVG's?
03:47

Here we'll create some simple SVG shapes directly in the HTML code.

Simple SVG Shapes
07:25

Now we'll take a look at a more complex SVG element - paths, Paths are used to create more complex SVG shapes.

SVG Paths
10:23

We'll get the D3.js library from the GitHub repo and load it into our HTML file.

Setting up D3.js
01:46
Selecting Elements
04:09
Appending Elements
03:19
Method Chaining & Attributes
06:40
Text SVG's
02:46
Groups
04:06
Section Summary
00:59
+ Using Data with D3
5 lectures 36:08
Joining Data to an Element
09:16
Using Arrow Functions
05:34
Joining Data to Multiple Elements
04:54
The Enter Selection
07:40
External Data ( JSON )
08:44
+ Scales & Bar Charts
8 lectures 01:01:07
Why We Need Linear Scales
04:17
Creating a Linear Scale
09:30
Band Scales
10:37
Min, Max & Extent
05:54
Creating a Bar Chart ( Groups & Margins )
11:09
Creating a Bar Chart ( Axes )
06:23
Inverting Scales
07:16
Tick Formatting
06:01
+ Firestore Database
4 lectures 16:32
What is a Firestore Database?
03:01
Creating a Firestore Database
04:11
Setting up the Firebase Config
03:31
Getting Data from Firestore
05:49
+ The D3 Update Pattern
8 lectures 52:45
Updating Visualizations
01:48
Enter & Exit Groups
06:59
The Update Pattern at a Glance
05:13
Creating an Update Function
10:18
D3 Interval Function
06:15
The Exit Selection
03:40
Firestore Realtime Data Updates
06:10
Updating Our Data
12:22
+ D3 Transitions
5 lectures 26:07
D3 Transitions Introduction
01:12
Enter Transitions
06:36
Update Transitions
03:50
Merge and Refactor
04:16
Tweens and Interpolation
10:13
+ Project One - Donut Chart (Budget Planner)
16 lectures 01:54:18
HTML Template & Matetrialize
13:13
Firestore Setup
04:03
Adding Data to Firestore
11:15
Pie Charts & Arcs
03:46
Setting up a Pie Chart
11:21
Arc Path Generator
05:44
Realtime Data Setup
06:53
Drawing the Enter Selection
06:33
Ordinal Scales
07:25
Project Challenge
02:01
Project Solution
03:48
Arc Enter Tween
09:57
Arc Exit Tween
02:38
Arc Update Tween
14:17
Legends
07:27
+ User Interaction & Events
6 lectures 29:09
Interactive D3 Visuals
01:41
Event Listeners
01:52
Mouseover Events
07:23
Named Transitions (bug fix)
02:13
Click Events
04:35
Tooltips
11:25
+ Project Two - Fitness Tracker (Line Graphs)
17 lectures 01:45:11
HTML Template Setup
10:05
Adding DOM Events
09:06
Adding Data to Firestore
07:55
Realtime Data Setup
08:33
Graph Setup & Margins
06:11
Time Scales & Axes Groups
07:34
Domains & Axes
06:06
Formatting Times & Axes
06:34
Enter & Exit Selections
07:25
Adding Dummy Data
03:19
Filtering Data
05:07
Line Path Generator
09:11
Data Point Hover Effect
03:56
Project Challenge (SVG Lines)
03:15
Challenge Solution
07:14
Project Summary
01:15
Requirements
  • A basic to moderate level of JavaScript
  • A basic to moderate level of HTML
  • A basic to moderate level of CSS
Description

Learn how to create great-looking data visualizations with D3.js

D3.js is a powerful JavaScript library used to create data visualizations easily. In this course I'll teach you how to harness the power of D3 to create a variety of different data-driven visualizations such as bar charts, pie charts, line graphs,  bubble packs and tree diagrams.

We'll learn about D3 select, changing SVG attributes & styles, scales, axes, transitions, hierarchial data and much more...

Use Firebase Firestore to update your D3.js diagrams in real-time

I'll also teach you how to use Firestore (from Google Firebase) - a real-time NoSQL database in which we can store our data. We'll use this to power our D3.js visualizations in real-time (without updating the browser) and to make them interactive, fun & dynamic.

We'll also be creating 3 projects to put our D3 & Firebase skills to the test - first of all a money planner called Ninja Wonga, then a fitness tracker called The Dojo and finally a company employee tree diagram called Ninja Corp.

...Why all the ninjas?

I'm also known as the Net Ninja on YouTube, with over 200,000 subscribers and nearly 1000 free development tutorials. Feel free to check out my teaching style there before you a buy my course :).


Who this course is for:
  • Developers wanting to build data-driven UI diagrams with JavaScript
  • Developers wanting to learn d3 and firebase
  • Developers wanting to learn about data visualization
  • Developers wanting to create SVG diagrams with d3
  • Developers wanting to use firebase to drive their d3 diagrams