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

Build Data Visualizations with D3.js & Firebase
Duration 10:21:04
Открыть все курсы от udemy

Узнайте, как использовать D3 (v5) и Firebase (Firestore) для создания динамических визуализаций данных SVG. Гистограммы, круговые диаграммы и тд. D3.js - это мощная библиотека JavaScript, которая позволяет легко создавать визуализации данных. В этом курсе я научу вас, как использовать возможности D3 для создания различных визуализаций, управляемых данными, таких как гистограммы, круговые диаграммы, линейные графики, пузырьковые пакеты и древовидные диаграммы.

Мы узнаем о D3 select, изменении атрибутов и стилей SVG, масштабах, осях, переходах, иерархических данных и о многом другом ...

Используйте Firebase Firestore для обновления ваших диаграмм D3.js в режиме реального времени

Я также научу вас, как использовать Firestore (из Google Firebase) - базу данных NoSQL в реальном времени, в которой мы можем хранить наши данные. Мы будем использовать это для визуализации D3.js в режиме реального времени (без обновления браузера) и для того, чтобы сделать их интерактивными, веселыми и динамичными.

Мы также создадим 3 проекта для проверки наших навыков в D3 и Firebase - в первую очередь планировщик денег по имени Ninja Wonga, затем фитнес-трекер под названием Dojo и, наконец, диаграмма дерева сотрудников компании Ninja Corp.

... почему все ниндзя?

Я также известен как Net Ninja на YouTube с более чем 200 000 подписчиками и почти 1000 бесплатными учебниками по разработке. Не стесняйтесь проверить мой стиль преподавания, прежде чем купить мой курс :).

Полный список уроков Развернуть / Свернуть
  • Урок 1. Introduction 00:03:24
  • Урок 2. Examples of D3.js on the Web 00:03:14
  • Урок 3. Text Editor & Packages 00:02:27
  • Урок 4. Course Files 00:00:47
  • Урок 5. Extra Resources 00:00:47
  • Урок 6. What are SVG's? 00:03:48
  • Урок 7. Simple SVG Shapes 00:07:26
  • Урок 8. SVG Paths 00:10:24
  • Урок 9. Setting up D3.js 00:01:47
  • Урок 10. Selecting Elements 00:04:10
  • Урок 11. Appending Elements 00:03:20
  • Урок 12. Method Chaining & Attributes 00:06:41
  • Урок 13. Text SVG's 00:02:47
  • Урок 14. Groups 00:04:07
  • Урок 15. Section Summary 00:01:00
  • Урок 16. Joining Data to an Element 00:09:17
  • Урок 17. Using Arrow Functions 00:05:35
  • Урок 18. Joining Data to Multiple Elements 00:04:55
  • Урок 19. The Enter Selection 00:07:41
  • Урок 20. External Data ( JSON ) 00:08:45
  • Урок 21. Why We Need Linear Scales 00:04:18
  • Урок 22. Creating a Linear Scale 00:09:31
  • Урок 23. Band Scales 00:10:38
  • Урок 24. Min, Max & Extent 00:05:55
  • Урок 25. Creating a Bar Chart ( Groups & Margins ) 00:11:10
  • Урок 26. Creating a Bar Chart ( Axes ) 00:06:24
  • Урок 27. Inverting Scales 00:07:17
  • Урок 28. Tick Formatting 00:06:02
  • Урок 29. What is a Firestore Database? 00:03:02
  • Урок 30. Creating a Firestore Database 00:04:12
  • Урок 31. Setting up the Firebase Config 00:03:32
  • Урок 32. Getting Data from Firestore 00:05:50
  • Урок 33. Updating Visualizations 00:01:49
  • Урок 34. Enter & Exit Groups 00:07:00
  • Урок 35. The Update Pattern at a Glance 00:05:14
  • Урок 36. Creating an Update Function 00:10:19
  • Урок 37. D3 Interval Function 00:06:16
  • Урок 38. The Exit Selection 00:03:41
  • Урок 39. Firestore Realtime Data Updates 00:06:11
  • Урок 40. Updating Our Data 00:12:23
  • Урок 41. D3 Transitions Introduction 00:01:13
  • Урок 42. Enter Transitions 00:06:38
  • Урок 43. Update Transitions 00:03:51
  • Урок 44. Merge and Refactor 00:04:17
  • Урок 45. Tweens and Interpolation 00:10:14
  • Урок 46. Introduction & Setup 00:03:58
  • Урок 47. HTML Template & Matetrialize 00:13:14
  • Урок 48. Firestore Setup 00:04:04
  • Урок 49. Adding Data to Firestore 00:11:16
  • Урок 50. Pie Charts & Arcs 00:03:47
  • Урок 51. Setting up a Pie Chart 00:11:22
  • Урок 52. Arc Path Generator 00:05:45
  • Урок 53. Realtime Data Setup 00:06:54
  • Урок 54. Drawing the Enter Selection 00:06:34
  • Урок 55. Ordinal Scales 00:07:26
  • Урок 56. Project Challenge 00:02:02
  • Урок 57. Project Solution 00:03:49
  • Урок 58. Arc Enter Tween 00:09:58
  • Урок 59. Arc Exit Tween 00:02:39
  • Урок 60. Arc Update Tween 00:14:18
  • Урок 61. Legends 00:07:28
  • Урок 62. Interactive D3 Visuals 00:01:42
  • Урок 63. Event Listeners 00:01:53
  • Урок 64. Mouseover Events 00:07:24
  • Урок 65. Named Transitions (bug fix) 00:02:14
  • Урок 66. Click Events 00:04:36
  • Урок 67. Tooltips 00:11:26
  • Урок 68. Project Preview & Setup 00:02:26
  • Урок 69. HTML Template Setup 00:10:06
  • Урок 70. Adding DOM Events 00:09:07
  • Урок 71. Adding Data to Firestore 00:07:56
  • Урок 72. Realtime Data Setup 00:08:34
  • Урок 73. Graph Setup & Margins 00:06:12
  • Урок 74. Time Scales & Axes Groups 00:07:35
  • Урок 75. Domains & Axes 00:06:07
  • Урок 76. Formatting Times & Axes 00:06:35
  • Урок 77. Enter & Exit Selections 00:07:26
  • Урок 78. Adding Dummy Data 00:03:20
  • Урок 79. Filtering Data 00:05:08
  • Урок 80. Line Path Generator 00:09:12
  • Урок 81. Data Point Hover Effect 00:03:57
  • Урок 82. Project Challenge (SVG Lines) 00:03:16
  • Урок 83. Challenge Solution 00:07:15
  • Урок 84. Project Summary 00:01:16
  • Урок 85. What is Data Hierarchy? 00:04:29
  • Урок 86. Data Structure Consideration 00:02:52
  • Урок 87. D3 Stratify & Root Nodes 00:08:08
  • Урок 88. Circle Packing (part 1) 00:09:24
  • Урок 89. Circle Packing (part 2) 00:11:52
  • Урок 90. Project Preview & Setup 00:03:36
  • Урок 91. HTML Template 00:10:05
  • Урок 92. Adding Firestore Data 00:05:08
  • Урок 93. Realtime Data Setup 00:06:43
  • Урок 94. Graph Setup 00:03:14
  • Урок 95. Tree Generators 00:08:20
  • Урок 96. Nodes Enter Selection 00:09:14
  • Урок 97. Links Enter Selection 00:06:35
  • Урок 98. Node Positions 00:07:12
  • Урок 99. Project Challenge - Ordinal Scale 00:02:22
  • Урок 100. Challenge Solution 00:03:08
  • Урок 101. Project Summary 00:01:09
  • Урок 102. Arrow Functions 00:05:40
  • Урок 103. Promise Basics 00:03:34
  • Урок 104. Filter & Map Methods 00:06:23
  • Урок 105. Template Strings 00:03:20
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 15.05.2019. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

30-11--0001 en 6 уроков
frontendmasters d3.js v4
Мы начнем с рассмотрения документации D3, которая обширна и очень тщательна и может быть слишком сложной для пользования. Я расскажу, как структурированы документы, а также мы будем исследовать blockbuilder и использовать его в наших интересах. После этого мы погрузимся прямо в код, начиная с того, как выбор D3 и привязка данных работают под капотом. Как только мы сможем хорошо разбираться в этих концепциях, мы будем использовать enter-append,...
Duration 04:50:07
9 0
30-11--0001 en 15 уроков
treehouse D3.js course
D3.js - одна из самых захватывающих интерфейсных веб-технологий, которая позволяет разработчикам разрабатывать визуализацию данных. Этот курс предназначен для углубленного изучения основных функциональных возможностей и концепций, используемых в D3.js, а также обзор потенциала с помощью D3. Поскольку D3 использует очень много других технологий, этот курс также затронет SVG.
Duration 01:52:44
5 1
09-06-2018 en 84 урока
udemy Mastering data visualization in D3.js
Cоздавайте красивые визуализации данных с помощью d3.js. Интенсивное введение в библиотеку D3. Этот курс поднимет вас в D3 до такой степени, что вы сможете построить практически любую визуализацию, которую вы можете себе представить. Курс научит вас программировать в последней версии D3 - версия 5.x.
Duration 06:53:20
13 2
24-01-2019 en 77 уроков
udemy D3.js in Action: Build 12 D3.js Data Visualization Projects
D3.js (V 5) с нуля! Сборка полезных проектов визуализации данных D3.js! D3.js для начинающих. "Одна картинка стоит тысячи слов". Это правда, что концепции легко понять, если объяснить их с помощью диаграмм. В современном мире, управляемом данными, очень важно наилучшим образом использовать имеющиеся данные таким образом, чтобы из них можно было извлечь полезную информацию. Визуализация данных - это самый простой и быстрый способ...
Duration 14:43:46
6 0
en
leanpub React+D3v4
Повторно используемые данные и игры с использованием современного JavaScript. Создание динамических визуализаций данных в сети - боль в заднице. С React + d3.js ES6 вы научитесь создавать многократно используемые компоненты визуализации с использованием современных стандартов JavaScript примерно за час.
Duration 00:00:00
8 0

Последнее добавленное

Жесткие части: cерверы и Node.js

Жесткие части: cерверы и Node.js

en
На этом семинаре мы пойдем под капот Node двумя противоположными способами - поняв разработку серверов на основе интуитивно понятных принципов (HTTP, TCP / IP, Ports, Loopback, SSH) и поняв функции JavaScript, составляющие Node (событие цикл, потоки, буферы, асинхронность, прототипы).
Microsoft Azure Инфраструктура и Развертывание - Экзамен AZ-100

Microsoft Azure Инфраструктура и Развертывание - Экзамен AZ-100

en
Этот курс предназначен для того, чтобы помочь вам выучить и развить необходимые навыки для сдачи сертификационного экзамена Microsoft Azure AZ-100. Экзамен AZ-100 проверяет ваши знания в области создания, настройки и управления ресурсами в облаке Azure, включая, помимо прочего: управление...
Сертифицированный специалист по безопасности информационных систем (CISSP)

Сертифицированный специалист по безопасности информационных систем (CISSP)

en
Чтобы получить сертификат CISSP, кандидаты должны сдать экзамен, состоящий в основном из вопросов с несколькими вариантами ответов. Цель этого курса - подготовить вас к сертификационному экзамену, познакомив вас с понятиями и терминологией, которые вам необходимо знать для прохождения.
Сертифицированный архитектор решений AWS - Professional

Сертифицированный архитектор решений AWS - Professional

en
AWS является одной из самых быстрорастущих платформ облачных сервисов, предлагаемых сегодня. Он используется во всем мире миллионами пользователей! Возможность получить сертификацию уровня CSA Pro является одним из главных достижений для любого облачного инженера. Учитывая это, это также один...
Тестирование мобильных приложений

Тестирование мобильных приложений

ru
В современном мире бизнес всё чаще обращает внимание на мобильные технологии. И в этом нет ничего удивительного. Рынок мобильных устройств растёт в разы быстрее рынка домашних компьютеров, позволяя реализовывать новые возможности для развития и продвижения самых передовых бизнес идей.
Фреймворк NuxtJS. Руководство по FullStack-разработке

Фреймворк NuxtJS. Руководство по FullStack-разработке

ru
Полное руководство по Nuxt. Почему стоит посмотреть этот курс? Полный охват теоретических и практических знаний с полным циклом разработки: клиентская и серверная части. Nuxt.js позволяет создавать SEO-дружественные приложения, которые можно продвигать в поисковых системах. По урокам курса...
Moscow Python Conf ++ 2019

Moscow Python Conf ++ 2019

ru
Конференция Moscow Python Conf ++ посвящена всему, что делают Python разработчики: backend и web, сбор и обработка данных, AI/ML, тестирование, DevOps, базы данных, IoT, infosec. Кроме этого, мы обсуждаем сам язык, его развитие, организацию проектов, управление зависимостями и лучшие практики...
Разработка PHP-пакетов (PRO версия)

Разработка PHP-пакетов (PRO версия)

en
Премиум видео курс по разработке пакетов для PHP и Laravel. "Я вроде уже делал такое, давайте я гляну на старых проектах." Знакомы такие слова ? Когда мне давали задание на моей работе, я обычно отправлялся на поиски доступного пакета с открытым исходным кодом на packagist.org - и если не было...
chat
logo