Build Data Visualizations with D3.js & Firebase

13,070 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

13,070 students enrolled

Created by The Net Ninja (Shaun Pelling)

Last updated 7/2019

English

English [Auto]

Preview this course

Build Data Visualizations with D3.js & Firebase

$69.99 $99.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

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 Introduction

5 lectures 10:34

Preview 03:23

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

Examples of D3.js on the Web

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.

Extra Resources

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

Introduction & Setup

Preview 03:57

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

Project Preview & Setup

Preview 02:25

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

3 more sections

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

Featured review

Cihan Oklap ( 3 courses, 1 review )

a year ago

Shaun can create another course about "How to be an instructor on Udemy". The way he teaches is that engaging, and I am thankful that the course had so many project examples. The only improvement I can suggest would be on the last project. While previewing, we were shown an interactive treemap with animations while we ended up having a treemap without any. Other than that, he is great and I specially appreciate his efforts on his Youtube channel as well.