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