Build Data Visualizations with D3.js & Firebase

Build Data Visualizations with D3.js & Firebase

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 10.5 Hours | 3.94 GB

Learn how to use D3 (v5) & Firebase (Firestore) to create dynamic SVG data visualizations. Bar charts, pie charts…

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.

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)
Table of Contents

Course Introduction
1 Introduction
2 Examples of D3.js on the Web
3 Text Editor & Packages
4 Course Files
5 Extra Resources

SVG and D3 Basics
6 What are SVG’s
7 Section Summary
8 Simple SVG Shapes
9 SVG Paths
10 Setting up D3.js
11 Selecting Elements
12 Appending Elements
13 Method Chaining & Attributes
14 Text SVG’s
15 Groups

Using Data with D3
16 Joining Data to an Element
17 Using Arrow Functions
18 Joining Data to Multiple Elements
19 The Enter Selection
20 External Data ( JSON )

Scales & Bar Charts
21 Why We Need Linear Scales
22 Creating a Linear Scale
23 Band Scales
24 Min, Max & Extent
25 Creating a Bar Chart ( Groups & Margins )
26 Creating a Bar Chart ( Axes )
27 Inverting Scales
28 Tick Formatting

Firestore Database
29 What is a Firestore Database
30 Creating a Firestore Database
31 Setting up the Firebase Config
32 Getting Data from Firestore

The D3 Update Pattern
33 Updating Visualizations
34 Enter & Exit Groups
35 The Update Pattern at a Glance
36 Creating an Update Function
37 D3 Interval Function
38 The Exit Selection
39 Firestore Realtime Data Updates
40 Updating Our Data

D3 Transitions
41 D3 Transitions Introduction
42 Enter Transitions
43 Update Transitions
44 Merge and Refactor
45 Tweens and Interpolation

Project One – Donut Chart (Budget Planner)
46 Introduction & Setup
47 Ordinal Scales
48 Project Challenge
49 Project Solution
50 Arc Enter Tween
51 Arc Exit Tween
52 Arc Update Tween
53 Legends
54 HTML Template & Matetrialize
55 Firestore Setup
56 Adding Data to Firestore
57 Pie Charts & Arcs
58 Setting up a Pie Chart
59 Arc Path Generator
60 Realtime Data Setup
61 Drawing the Enter Selection

User Interaction & Events
62 Interactive D3 Visuals
63 Event Listeners
64 Mouseover Events
65 Named Transitions (bug fix)
66 Click Events
67 Tooltips

Project Two – Fitness Tracker (Line Graphs)
68 Project Preview & Setup
69 Enter & Exit Selections
70 Adding Dummy Data
71 Filtering Data
72 Line Path Generator
73 Data Point Hover Effect
74 Project Challenge (SVG Lines)
75 Challenge Solution
76 Project Summary
77 HTML Template Setup
78 Adding DOM Events
79 Adding Data to Firestore
80 Realtime Data Setup
81 Graph Setup & Margins
82 Time Scales & Axes Groups
83 Domains & Axes
84 Formatting Times & Axes

Data Hierarchy
85 What is Data Hierarchy
86 Data Structure Consideration
87 D3 Stratify & Root Nodes
88 Circle Packing (part 1)
89 Circle Packing (part 2)

Project Three – Tree Diagram (Ninja Corp)
90 Project Preview & Setup
91 Project Challenge – Ordinal Scale
92 Challenge Solution
93 Project Summary
94 HTML Template
95 Adding Firestore Data
96 Realtime Data Setup
97 Graph Setup
98 Tree Generators
99 Nodes Enter Selection
100 Links Enter Selection
101 Node Positions

ES6 & Extras
102 Arrow Functions
103 Promise Basics
104 Filter & Map Methods
105 Template Strings