Пошаговое руководство Free Code Camp 46 | Визуализация данных - D3

В этом уроке я покажу вам, как пройти курс D3 — Визуализация данных на Free Code Camp. Выполняйте упражнения самостоятельно на freecodecamp.org и обращайтесь к пошаговому руководству, когда столкнетесь с трудностями — кстати, как следует из названия: freecodecamp бесплатен. Free Code Camp | https://www.freecodecamp.org/learn/data-visualization/ Временные метки/Задания: 0:00 Введение 0:21 1 | Добавление элементов документа с помощью D3 1:32 2 | Выбор группы элементов с помощью D3 2:20 3 | Работа с данными в D3 4:24 4 | Работа с динамическими данными в D3 5:19 5 | Добавление встроенных стилей к элементам 6:13 6 | Изменение стилей в зависимости от данных 7:43 7 | Добавление классов с помощью D3 8:26 8 | Динамическое изменение высоты элемента 9:27 9 | Изменение отображения столбчатой диаграммы 10:33 10 | Изучение SVG в D3 12:05 11 | Отображение фигур с помощью SVG 13:33 12 | Создание столбца для каждой точки данных в наборе 14:55 13 | Динамическая установка координат для каждого столбца 15:49 14 | Динамическое изменение высоты каждого столбца 16:42 15 | Инвертирование элементов SVG 17:54 16 | Изменение цвета элемента SVG 18:22 17 | Добавление меток к элементам D3 20:43 18 | Стилизация меток D3 21:48 19 | Добавление эффекта наведения к элементу D3 22:54 20 | Добавление всплывающей подсказки к элементу D3 24:15 21 | Создание диаграммы рассеяния с использованием SVG-кругов 25:09 22 | Добавление атрибутов к элементам круга 27:03 23 | Добавление меток к кругам диаграммы рассеяния 29:26 24 | Создание линейной шкалы с помощью D3 30:07 25 | Установка области определения и диапазона шкалы 31:38 26 | Использование функций d3.max и d3.min для нахождения минимальных и максимальных значений в наборе данных 33:23 27 | Использование динамических шкал 36:18 28 | Использование предопределенной шкалы для размещения элементов 40:17 29 | Добавление осей к визуализации 42:54 Заключение Все мои бесплатные пошаговые руководства по Code Camp | https://www.youtube.com/playlist?list=PLJO7vAdVP8x0BF4qzwIk5OAmx71rVz8lQ Музыка Silent Partner Medium | https://medium.com/@brigstudios