Главная страницаКатегория htmlВизуализация данных + D3.js

Визуализация данных + D3.js

Name: Визуализация данных + D3.js
Price: 13 USD
Rating: 4.6 (13 reviews)

Data Visualization + D3.js

superhi.com

★4.6 (всего оценок - 13)

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

16 ч 48 мин

Категория

HTML

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

184 Видео

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

25 дек. 2021 г., 21:36

Язык

Английский

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

29 апр. 2026 г., 13:41

Хотите научиться превращать данные в понятные, динамичные и визуально привлекательные истории?Этот курс поможет вам уверенно освоить основы визуализации данных и работу с D3.js, независимо от уровня подготовки.

О чем этот курс

Программа построена так, чтобы постепенно познакомить вас с ключевыми инструментами и техниками визуализации. Вы начнете с фундаментальных концепций работы с данными, а затем перейдёте к созданию интерактивных графиков с помощью HTML, CSS, SVG и Javascript. Особое внимание уделяется библиотеке D3.js — стандарту де-факто для динамических визуализаций в вебе.

Чему вы научитесь

Основы визуализации данных

Различные форматы и типы визуализации
Выбор оптимального визуального представления под конкретные данные
Понимание структуры и качества данных

Работа с HTML, CSS и SVG

Создание статических диаграмм и графиков
Использование SVG как основы для визуальных элементов
Подготовка структуры для будущей интерактивности

Javascript и интерактивность

Добавление анимации и переходов
Создание пользовательских взаимодействий
Работа с событиями и динамическими обновлениями данных

Знакомство с D3.js

D3.js — мощная библиотека для работы с данными, которая позволит вам связывать данные с элементами интерфейса и создавать по-настоящему динамичные визуализации.

Основные концепции D3.js
Работа с масштабами, осями и привязкой данных
Создание интерактивных графиков и анимаций

Получение данных с помощью Ajax

Вы научитесь извлекать данные из разных источников, обрабатывать их и использовать в своих визуализациях.

Кому подходит курс

Этот курс создан для новичков: дизайнеров, аналитиков, разработчиков и всех, кто хочет визуализировать данные в веб-среде. Базовые знания HTML и CSS будут полезны, но не обязательны.

Какие навыки вы получите

Понимание принципов визуальной коммуникации
Умение анализировать и подготавливать наборы данных
Навыки создания визуализаций на основе HTML, CSS, SVG
Базовая и продвинутая работа с Javascript и D3.js
Создание динамических и интерактивных графиков
Получение данных через Ajax и интеграция с визуализациями

Преимущества курса

Практический подход — вы создадите свои собственные визуализации
Понятные объяснения даже для новичков
Пошаговые разборы кода и примеры
Акцент на современных инструментах и методиках

Итог

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

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:43
Welcome to the Data Visualization + D3 course
Урок 2. 00:02:09
Introduction to the Step Counter project
Урок 3. 00:02:58
What is the SuperHi Editor?
Урок 4. 00:06:00
Adding basic HTML structure for our project
Урок 5. 00:07:31
Adding navigation bar content
Урок 6. 00:09:02
Introducing our CSS
Урок 7. 00:02:22
Adding webfont typography
Урок 8. 00:04:13
Adding extra type styles
Урок 9. 00:03:02
How to add CSS rules
Урок 10. 00:04:18
Adding spacing using margins
Урок 11. 00:07:49
Giving our project layout with CSS Grid
Урок 12. 00:03:34
Filling in our main content area
Урок 13. 00:03:46
Inside an SVG
Урок 14. 00:08:23
Adding a rect tag
Урок 15. 00:08:03
Drawing circles
Урок 16. 00:01:47
Welcome to automating our HTML
Урок 17. 00:06:28
How to add a Javascript file
Урок 18. 00:07:38
Picking tags and changing HTML
Урок 19. 00:05:24
Updating the style of selected tags
Урок 20. 00:08:19
Using forEach to loop through tags
Урок 21. 00:06:18
Variation: adding randomness
Урок 22. 00:07:33
forEach with an index
Урок 23. 00:07:55
Changing our rect tags using forEach
Урок 24. 00:03:45
Using index to change widths
Урок 25. 00:05:05
Adding in a data array
Урок 26. 00:10:16
Automating addition of rect tags
Урок 27. 00:03:47
Positioning our rect tags
Урок 28. 00:01:15
Homework
Урок 29. 00:02:15
Homework solution
Урок 30. 00:01:27
Welcome to Week 2!
Урок 31. 00:02:59
What is D3 and why do we use it?
Урок 32. 00:04:11
How to add D3 to a project
Урок 33. 00:07:45
Using select and selectAll with D3
Урок 34. 00:05:16
Adding data to D3 and using attr
Урок 35. 00:08:18
Automating attribute changes
Урок 36. 00:06:13
Adding in rect tags automatically with D3
Урок 37. 00:04:41
Adding in real data
Урок 38. 00:07:53
Introducing scales
Урок 39. 00:08:37
Adding text tags to our data visualizations
Урок 40. 00:08:18
Adding classes and circle tags
Урок 41. 00:03:43
Thinking about grids
Урок 42. 00:04:01
The modulo (%) and Math.floor to make a grid
Урок 43. 00:06:42
Scaling our circle's radius
Урок 44. 00:01:14
Homework
Урок 45. 00:01:38
Homework solution
Урок 46. 00:01:48
Welcome to the final part of Step Count
Урок 47. 00:06:00
Adding in a transition
Урок 48. 00:06:00
Adding delay and easing to transitions
Урок 49. 00:04:40
Adding transitions to our bar chart
Урок 50. 00:02:46
Why we group tags in our visualizations
Урок 51. 00:09:09
Adding g tags to our bar chart
Урок 52. 00:05:16
Adding our second text tags
Урок 53. 00:06:38
Adding hover states using CSS
Урок 54. 00:04:26
Adding both classes and states in CSS
Урок 55. 00:06:48
Hovering within a group
Урок 56. 00:09:40
Adding a group for our circles
Урок 57. 00:09:24
Adding in goal rings using stroke
Урок 58. 00:07:29
Adding text to our Last 28 Days section
Урок 59. 00:05:29
Altering HTML content
Урок 60. 00:04:26
D3's array functions
Урок 61. 00:08:07
Using D3 Format
Урок 62. 00:00:25
Homework
Урок 63. 00:02:07
Homework solution
Урок 64. 00:02:30
Welcome to Heat Map
Урок 65. 00:04:56
Creating our HTML content
Урок 66. 00:07:56
Adding our overall page styling
Урок 67. 00:08:58
Adding our header layout
Урок 68. 00:04:27
Storing data in arrays and objects
Урок 69. 00:01:44
How our data file looks
Урок 70. 00:02:35
Data collection using the Javascript Developer tools
Урок 71. 00:01:53
Adding our script tags
Урок 72. 00:02:07
Reflecting our data in design
Урок 73. 00:07:02
Setting up our group tags
Урок 74. 00:04:32
Adding our cities to the data visualization
Урок 75. 00:01:45
Adding our country text tag
Урок 76. 00:08:03
Adding data groups within data points
Урок 77. 00:06:38
Color scales
Урок 78. 00:05:06
Adding labels to our heat map
Урок 79. 00:03:29
Adding box scale
Урок 80. 00:03:26
What is a path tag
Урок 81. 00:06:28
D3's line generators
Урок 82. 00:08:15
Changing temperature units with a select tag
Урок 83. 00:00:32
Homework
Урок 84. 00:02:53
Homework solution
Урок 85. 00:02:44
Welcome to Discover The World
Урок 86. 00:09:01
Setting up our HTML
Урок 87. 00:05:58
Adding our styling
Урок 88. 00:05:36
Adding our own Javascript functions
Урок 89. 00:07:18
Adding events to both page load and select tag changes
Урок 90. 00:03:35
Setting up our Javascript
Урок 91. 00:03:31
How we got our data source
Урок 92. 00:06:57
Adding groups per city
Урок 93. 00:06:37
Adding scales to our data
Урок 94. 00:06:19
Changing our data depending on which value
Урок 95. 00:06:21
Hooking our select tags up
Урок 96. 00:03:35
Adding movement to select changes
Урок 97. 00:05:29
Changing our circle radius data
Урок 98. 00:07:48
Adding axes
Урок 99. 00:08:50
Styling our axes
Урок 100. 00:08:51
Adding axis labels
Урок 101. 00:04:28
Adding a city label
Урок 102. 00:06:14
Raising in D3
Урок 103. 00:03:54
Responsive design with SVG viewBox
Урок 104. 00:00:23
Homework
Урок 105. 00:01:09
Homework solution
Урок 106. 00:01:52
Welcome to The Top
Урок 107. 00:05:47
Why this data and why visualize it in this way
Урок 108. 00:04:37
Setting up our HTML
Урок 109. 00:04:25
CSS page styles
Урок 110. 00:07:05
Styling our header
Урок 111. 00:04:45
Making a sticky header
Урок 112. 00:05:23
Creating our groups from the data set
Урок 113. 00:04:36
Fixing our text and header
Урок 114. 00:07:45
Adding circle tags to each group
Урок 115. 00:11:44
Sorting our data by a key
Урок 116. 00:05:09
Sorting data by the select tag + homework
Урок 117. 00:00:58
Homework solution
Урок 118. 00:06:02
Data visualization accessibility
Урок 119. 00:02:00
Welcome to part 2 of The Top
Урок 120. 00:07:01
Adding a background hover to each group
Урок 121. 00:12:00
Adding our line shapes
Урок 122. 00:04:28
Updating our lines on select box change
Урок 123. 00:04:58
Adding curves to lines
Урок 124. 00:07:43
D3's area shape
Урок 125. 00:03:21
forEach vs map
Урок 126. 00:03:50
Making a difference
Урок 127. 00:08:12
Adding our text scores
Урок 128. 00:06:01
Responsive design, part 1
Урок 129. 00:12:59
Responsive design, part 2
Урок 130. 00:02:08
Homework
Урок 131. 00:01:48
Welcome to Kiddo Kiddo
Урок 132. 00:05:16
Our data source
Урок 133. 00:08:51
Adding our HTML content
Урок 134. 00:11:34
Styling our header and form
Урок 135. 00:08:52
Styling our key
Урок 136. 00:12:13
Setting up our form in Javascript
Урок 137. 00:06:43
Filtering the data set
Урок 138. 00:09:18
Adding our paths
Урок 139. 00:06:26
Defining paths
Урок 140. 00:02:43
Exit data
Урок 141. 00:09:47
Adding axes
Урок 142. 00:04:31
Different types of scales
Урок 143. 00:04:29
Transitioning in and out
Урок 144. 00:02:04
Gendering colors
Урок 145. 00:00:58
Homework
Урок 146. 00:03:49
Welcome to Boundless
Урок 147. 00:03:05
Setting up our project
Урок 148. 00:07:00
Setting up our updateGraph script
Урок 149. 00:04:58
Making a quick bar graph
Урок 150. 00:09:42
Making a pie generator + arc generator
Урок 151. 00:07:57
Pie and arc options
Урок 152. 00:07:21
Update the pie chart on next button
Урок 153. 00:07:32
Autoplaying the visualization
Урок 154. 00:07:04
Time formatting
Урок 155. 00:02:37
Stopping the loop when we have no data
Урок 156. 00:10:47
Arc tweening
Урок 157. 00:01:16
Homework
Урок 158. 00:02:38
Welcome to StockFinder
Урок 159. 00:02:10
Setting up our project
Урок 160. 00:05:35
Pulling our data in using d3.json()
Урок 161. 00:08:25
Processing our data
Урок 162. 00:04:08
Finding the min and max data points
Урок 163. 00:03:52
Adding our scales
Урок 164. 00:07:36
Making our line generator and graph
Урок 165. 00:05:28
Adding an area generator
Урок 166. 00:06:10
Adding in live data
Урок 167. 00:05:03
Adding in our hover tooltip
Урок 168. 00:07:29
Moving our tooltip across the page
Урок 169. 00:02:38
Hiding our tooltip on mouseout
Урок 170. 00:03:01
Finding the date on hover
Урок 171. 00:05:55
Bisecting our data
Урок 172. 00:06:19
Fixing our tooltip to the line
Урок 173. 00:01:51
Extra resources
Урок 174. 00:04:17
Welcome to Population Densities of the World
Урок 175. 00:10:07
Loading in our dataset
Урок 176. 00:12:00
Adding in map projections
Урок 177. 00:07:22
Drawing country by country
Урок 178. 00:05:21
Highlighting a country
Урок 179. 00:06:37
Mapping our data to our countries
Урок 180. 00:08:17
Adding a color scale
Урок 181. 00:07:47
Filtering based on scroll
Урок 182. 00:07:40
Adding scales to our scroll position
Урок 183. 00:01:04
Homework
Урок 184. 00:00:29
Thank you for being part of our course!

Автор - superhi.com

superhi.com

Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!

+99

Комментарии