Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
D3.js
Build Data Visualizations with D3.js & Firebase

Build Data Visualizations with D3.js & Firebase

Loại khoá học: Web Development

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

image
50.000 VND
1.249.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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 :).


Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

15 sections

Course Introduction

5 lectures
Introduction
03:23
Examples of D3.js on the Web
03:13
Text Editor & Packages
02:26
Course Files
00:46
Extra Resources
00:46

SVG and D3 Basics

10 lectures
What are SVG's?
03:47
Simple SVG Shapes
07:25
SVG Paths
10:23
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
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
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
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
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
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
Introduction & Setup
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
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
Project Preview & Setup
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

Data Hierarchy

5 lectures
What is Data Hierarchy?
04:28
Data Structure Consideration
02:51
D3 Stratify & Root Nodes
08:07
Circle Packing (part 1)
09:23
Circle Packing (part 2)
11:51

Project Three - Tree Diagram (Ninja Corp)

12 lectures
Project Preview & Setup
03:35
HTML Template
10:04
Adding Firestore Data
05:07
Realtime Data Setup
06:42
Graph Setup
03:13
Tree Generators
08:19
Nodes Enter Selection
09:13
Links Enter Selection
06:34
Node Positions
07:11
Project Challenge - Ordinal Scale
02:21
Challenge Solution
03:07
Project Summary
01:08

ES6 & Extras

4 lectures
Arrow Functions
05:39
Promise Basics
03:33
Filter & Map Methods
06:22
Template Strings
03:19

D3 v6/v7

1 lectures
D3 v6/v7 migration guide
03:03

Firestore Setup

1 lectures
Firestore setup walkthrough
00:53

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi