Главная страницаКатегория d3.jsВизуализация данных с помощью D3.js и Firebase

Визуализация данных с помощью D3.js и Firebase

Name: Визуализация данных с помощью D3.js и Firebase
Rating: 5 (27 reviews)

Build Data Visualizations with D3.js & Firebase

udemy

★5 (всего оценок - 27)

Продолжительность

10 ч 21 мин

Категория

D3.js

Количество уроков

105 Видео

Дата добавления

15 апр. 2019 г., 19:28

Язык

Английский

Дата выхода

18 окт. 2018 г., 22:19

Дата обновления

29 апр. 2026 г., 02:59

Освойте создание динамических и интерактивных визуализаций данных с помощью D3.js (v5) и Firebase Firestore. Этот курс поможет вам уверенно работать с SVG‑графикой, реальными потоками данных и современными инструментами фронтенд‑разработки, создавая графики, которые реагируют на изменение данных в режиме реального времени.

Что вы изучите в этом курсе

Курс шаг за шагом проводит через ключевые возможности D3.js и Firestore, помогая глубоко понять принципы динамической визуализации данных.

Основы и продвинутые возможности D3.js

Использование D3 select и работа с DOM‑элементами SVG
Создание и настройка масштабов, осей и областей построения
Работа с переходами, анимацией и плавными обновлениями графиков
Построение различных типов визуализаций: гистограмм, круговых диаграмм, линейных графиков, bubble‑pack и древовидных диаграмм
Обработка и визуализация иерархических данных

Интеграция Firebase Firestore

Научитесь использовать Firestore для обновления графиков в реальном времени — без перезагрузки страницы.

Подключение к Firestore и чтение данных
Структурирование коллекций и документов для визуализаций
Реактивное обновление графиков при изменении данных
Создание интерактивных элементов на основе живых данных

Практические проекты курса

Вы закрепите знания, создавая три полноценных проекта на связке D3.js + Firebase:

Ninja Wonga — интерактивный бюджетный планировщик

Создайте приложение с визуальными диаграммами расходов и доходов, которые обновляются в реальном времени.

Dojo Fitness Tracker — трекер активности

Постройте динамические графики прогресса и отслеживайте изменение данных в Firestore.

Ninja Corp — диаграмма структуры компании

Научитесь визуализировать иерархические данные через древовидные диаграммы и управлять их интерактивностью.

Почему вам понравится этот курс

Курс создан Net Ninja — автором более чем 1000 уроков по веб‑разработке на YouTube и экспертом, который объясняет сложные вещи просто. Прежде чем купить курс, вы можете ознакомиться с его стилем преподавания, посмотрев бесплатные уроки на канале.

Кому подойдёт этот курс

Разработчикам, которые хотят освоить D3.js с нуля
Фронтенд‑инженерам, стремящимся улучшить навыки визуализации данных
Тем, кто хочет работать с потоками данных в реальном времени
Студентам и аналитикам, которым нужны наглядные, интерактивные графики

Результат прохождения

К концу курса вы будете уверенно создавать сложные визуализации с D3.js, связывать их с Firestore и обновлять графики автоматически при изменении данных. Вы получите практические навыки, востребованные в современных data‑driven проектах.

Урок 1.00:03:24
Introduction
Урок 2.00:03:14
Examples of D3.js on the Web
Урок 3.00:02:27
Text Editor & Packages
Урок 4.00:00:47
Course Files
Урок 5.00:00:47
Extra Resources
Урок 6.00:03:48
What are SVG's?
Урок 7.00:07:26
Simple SVG Shapes
Урок 8.00:10:24
SVG Paths
Урок 9.00:01:47
Setting up D3.js
Урок 10.00:04:10
Selecting Elements
Урок 11.00:03:20
Appending Elements
Урок 12.00:06:41
Method Chaining & Attributes
Урок 13.00:02:47
Text SVG's
Урок 14.00:04:07
Groups
Урок 15.00:01:00
Section Summary
Урок 16.00:09:17
Joining Data to an Element
Урок 17.00:05:35
Using Arrow Functions
Урок 18.00:04:55
Joining Data to Multiple Elements
Урок 19.00:07:41
The Enter Selection
Урок 20.00:08:45
External Data ( JSON )
Урок 21.00:04:18
Why We Need Linear Scales
Урок 22.00:09:31
Creating a Linear Scale
Урок 23.00:10:38
Band Scales
Урок 24.00:05:55
Min, Max & Extent
Урок 25.00:11:10
Creating a Bar Chart ( Groups & Margins )
Урок 26.00:06:24
Creating a Bar Chart ( Axes )
Урок 27.00:07:17
Inverting Scales
Урок 28.00:06:02
Tick Formatting
Урок 29.00:03:02
What is a Firestore Database?
Урок 30.00:04:12
Creating a Firestore Database
Урок 31.00:03:32
Setting up the Firebase Config
Урок 32.00:05:50
Getting Data from Firestore
Урок 33.00:01:49
Updating Visualizations
Урок 34.00:07:00
Enter & Exit Groups
Урок 35.00:05:14
The Update Pattern at a Glance
Урок 36.00:10:19
Creating an Update Function
Урок 37.00:06:16
D3 Interval Function
Урок 38.00:03:41
The Exit Selection
Урок 39.00:06:11
Firestore Realtime Data Updates
Урок 40.00:12:23
Updating Our Data
Урок 41.00:01:13
D3 Transitions Introduction
Урок 42.00:06:38
Enter Transitions
Урок 43.00:03:51
Update Transitions
Урок 44.00:04:17
Merge and Refactor
Урок 45.00:10:14
Tweens and Interpolation
Урок 46.00:03:58
Introduction & Setup
Урок 47.00:13:14
HTML Template & Matetrialize
Урок 48.00:04:04
Firestore Setup
Урок 49.00:11:16
Adding Data to Firestore
Урок 50.00:03:47
Pie Charts & Arcs
Урок 51.00:11:22
Setting up a Pie Chart
Урок 52.00:05:45
Arc Path Generator
Урок 53.00:06:54
Realtime Data Setup
Урок 54.00:06:34
Drawing the Enter Selection
Урок 55.00:07:26
Ordinal Scales
Урок 56.00:02:02
Project Challenge
Урок 57.00:03:49
Project Solution
Урок 58.00:09:58
Arc Enter Tween
Урок 59.00:02:39
Arc Exit Tween
Урок 60.00:14:18
Arc Update Tween
Урок 61.00:07:28
Legends
Урок 62.00:01:42
Interactive D3 Visuals
Урок 63.00:01:53
Event Listeners
Урок 64.00:07:24
Mouseover Events
Урок 65.00:02:14
Named Transitions (bug fix)
Урок 66.00:04:36
Click Events
Урок 67.00:11:26
Tooltips
Урок 68.00:02:26
Project Preview & Setup
Урок 69.00:10:06
HTML Template Setup
Урок 70.00:09:07
Adding DOM Events
Урок 71.00:07:56
Adding Data to Firestore
Урок 72.00:08:34
Realtime Data Setup
Урок 73.00:06:12
Graph Setup & Margins
Урок 74.00:07:35
Time Scales & Axes Groups
Урок 75.00:06:07
Domains & Axes
Урок 76.00:06:35
Formatting Times & Axes
Урок 77.00:07:26
Enter & Exit Selections
Урок 78.00:03:20
Adding Dummy Data
Урок 79.00:05:08
Filtering Data
Урок 80.00:09:12
Line Path Generator
Урок 81.00:03:57
Data Point Hover Effect
Урок 82.00:03:16
Project Challenge (SVG Lines)
Урок 83.00:07:15
Challenge Solution
Урок 84.00:01:16
Project Summary
Урок 85.00:04:29
What is Data Hierarchy?
Урок 86.00:02:52
Data Structure Consideration
Урок 87.00:08:08
D3 Stratify & Root Nodes
Урок 88.00:09:24
Circle Packing (part 1)
Урок 89.00:11:52
Circle Packing (part 2)
Урок 90.00:03:36
Project Preview & Setup
Урок 91.00:10:05
HTML Template
Урок 92.00:05:08
Adding Firestore Data
Урок 93.00:06:43
Realtime Data Setup
Урок 94.00:03:14
Graph Setup
Урок 95.00:08:20
Tree Generators
Урок 96.00:09:14
Nodes Enter Selection
Урок 97.00:06:35
Links Enter Selection
Урок 98.00:07:12
Node Positions
Урок 99.00:02:22
Project Challenge - Ordinal Scale
Урок 100.00:03:08
Challenge Solution
Урок 101.00:01:09
Project Summary
Урок 102.00:05:40
Arrow Functions
Урок 103.00:03:34
Promise Basics
Урок 104.00:06:23
Filter & Map Methods
Урок 105.00:03:20
Template Strings

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии

thanhhung.0706
12 окт. 2021 г., 13:20
please update, thank you so much ^^
dev23
5 мар. 2021 г., 19:18
Please update this course with the latest version. Thank you!