Изучите D3 в этом бесплатном курсе визуализации данных из 10 частей

1656639372 izuchite d3 v etom besplatnom kurse vizualizaczii dannyh iz 10
1*sDp-GORp42nSv5xEuddOcw
Нажмите здесь, чтобы перейти к курсу.

D3.js – это библиотека JavaScript, которая позволяет оживлять данные с помощью HTML, SVG и CSS. Изучение этого даст вам сверхспособности, когда дело доходит до извлечения ценности из данных, поскольку вы, в сущности, сможете создавать любую визуализацию, которую только можете придумать.

Однако это не самая простая библиотека для изучения, поэтому начать работу может быть сложно. Вот почему мы объединились с веб-разработчиком и преподавателем Сохайбом Нехалом и создали бесплатный полнометражный курс. В течение всего курса Sohaib ознакомит вас с мощной библиотекой.

Давайте посмотрим, как это устроено!

Контент

Курс состоит из 10 скринкастов, которые в общей сложности продолжаются менее часа. Он начинается с основных понятий, таких как выбор, манипуляция, загрузка данных и т.д. Это закладывает основу для различных визуализаций, которые вы научитесь создавать в течение остального курса.

№1: поступление в курс

1*QTASftirCvIEkkzu09ZNcw

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

#2: Отбор и манипуляции

1*H-7cY_zluQqHuYdvNMbFGw

Первое, что вам нужно научиться, это как выбирать и манипулировать элементами DOM с помощью D3.js. Библиотека действительно достаточно мощная с точки зрения манипулирования DOM, поэтому теоретически вы можете использовать ее в качестве замены jQuery.

#3: Загрузка и связывание данных

1*5sEb4D4exhT8YZnpts-T9w

Поскольку вы собираетесь создавать визуализацию, важно научиться загружать данные, а также как привязывать их к DOM. Итак, на этой лекции вы узнаете это.

#4: Создание простой гистограммы

1*Jm03LA1t_o3-GKjt84MLrA

В третьей лекции вы узнаете, как создать свою первую визуализацию: простую столбчатую диаграмму. Причина, почему мы знакомим вас с созданием вещей так рано, состоит в том, что создавать визуализации гораздо интереснее, чем просто говорить о теории. Потому мы думаем, что вам понравится этот урок.

#5: Создание меток

1*sDp-GORp42nSv5xEuddOcw

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

№6: Весы

Весы являются критическим понятием в D3. Они позволяют сопоставлять ваши данные с другими соответствующими диапазонами, например объемом доступного пространства. Итак, на этой лекции вы узнаете о scaleLinear() метод:

var yScale = d3.scaleLinear()  
    .domain(\[0, d3.max(dataset)\])  
    .range(\[0, svgHeight\]);

#7: Топоры

1*nag8GxIZpnUrvtfM9HaYNg

Оси являются неотъемлемой частью любой диаграммы и D3 предлагает несколько простых методов их создания. Этот урок основывается на предыдущем, поскольку использует масштабы при создании осей. Это также настроит вас на понимание суперкрутой линейной диаграммы, которую вы узнаете во время финального курса.

#8: Создание элементов SVG

1*FZdi_TA96EMc0B8I-Tt6Cg

Несмотря на то, что вы уже создавали элементы SVG раньше во время курса, это настолько важная концепция, что она заслуживает отдельной лекции. В нем вы узнаете о <rect>, <circle> и <line> элементов.

#9: Создание секторной диаграммы

1*JvNCACLTK_o7Q1D2AlMVuw

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

#10: Создание линейной диаграммы

1*NSDd3qCL8-xYDsTnOMQ5KA

Наконец, вы узнаете, как создать линейную диаграмму для визуализации цены биткойна. Чтобы получить данные, вы будете использовать внешний API. Этот проект также объединит многие концепции, которые вы изучали во время курса, и это прекрасная визуализация для завершения.

И все это! Пройдя эти десять уроков, вы должны быть хорошо настроены, чтобы начать использовать D3.js в своей работе или в личных проектах.

Если вы достигнете этого момента, мы будем очень благодарны, если вы огласите Сохайбу в Twitter!

Формат Scrimba

Прежде чем уйти, давайте быстро рассмотрим технологию курса. Он создан с помощью Scrimba, инструмента интерактивного кодирования шкатулки. Scrim выглядит как обычное видео, однако оно полностью интерактивно. Это означает, что вы можете редактировать код в ящике.

Вот gif, объясняющий концепцию:

Приостановить скринкаст → Редактировать код → Запустить!  → Просмотрите свои изменения

Приостановить скринкаст → Редактировать код → Запустить! → Просмотрите свои изменения

Это отлично, когда вы чувствуете, что вам нужно поэкспериментировать с кодом, чтобы правильно его понять, или когда вы просто хотите скопировать часть кода.

Так чего же вы ждете? Перейдите к Scrimba и пройдите бесплатный курс сегодня!

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован.