Онлайн-курс «Визуализация. Основы»

Это первый курс в серии онлайн‑брейнвошингов по визуализации от Лаборатории данных. Он посвящён дизайнерским принципам работы со сложными данными и знакомит слушателей с библиотекой D3.js — самым мощным и гибким инструментом создания интерактивных визуализаций.

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

даты уточняются
3378 слушателей
уже прослушало курс.
Успех!
Ждите приглашения на курс.

Инструкторы

Таня Бибикова
Таня Бибикова
инфодизайнер, руководитель лаборатории
Дима Семьюшкин
Дима Семьюшкин
технический директор
лаборатории

Часть 1. Дизайнерские принципы

Первая часть курса посвящена дизайнерским принципам работы со сложными данными. Мы поговорим о трёх столпах, на которых стоит хорошая визуализация: осмысленном визуальном кодировании, объединении микро– и макроуровня и использовании интерактивности. Чтобы закрепить теорию, примените эти принципы в работе над практическим заданием.

Лекция 1. Визуальное кодирование

Слайды

Лекция 2. Микро– и макроуровень

Слайды

Лекция 3. Интерактивность

Слайды

Практическое задание
Новосибирская строительная компания продаёт квартиры в жилом комплексе «Миргород». Данные о продажах: Mirgorod-sales.xls.

1. Ответьте на вопросы. Что является элементарным кирпичиком данных? Какие закономерности проявляются на макроуровне? Какой способ представления будет наиболее естественным и наглядным? Каких параметров, количественных и качественных, не хватает в наборе?

2. Подготовьте отчёт для руководства. Сколько квартир продано, на какую сумму? Сколько получено средств? Какие квартиры продаются лучше всего?

3. Помогите покупателю выбрать квартиру: визуализируйте доступные варианты и необходимую для выбора информацию. Используйте интерактивность.

Решение дизайнерской практики для самостоятельной проверки.

Часть 2. Основы D3.js

Вторая часть курса посвящена знакомству с библиотекой D3.js. Мы потренируемся создавать простейшие SVG-элементы и разберём «текучий» интерфейс D3, создадим график и хитмап (теплокарту) на основе реальных данных.

Лекция 4. Основы SVG и D3

Слайды, фиддл

Лекция 5. График на D3

Фиддл

Лекция 6. Хитмап (теплокарта) на D3

Фиддл

Практическое задание
1. Используя первый фиддл, потренируйтесь добавлять и удалять данные и свойства. Превратите круги в прямоугольники, ширина которых вдвое больше высоты, и измените цвет прямоугольников с чёрного на зелёный с чёрной обводкой.

2. Используя второй фиддл и расширенный сет данных, создайте график зависимости продолжительности жизни от количества детей в семье. Размером кружка покажите население страны.

3. Создайте интерактивную визуализацию на основе результатов дизайнерской практики — отчёта для руководства или интерфейса покупателя, на выбор. Данные: mirgorod-sales.csv.

Решение практики по D3.js: фиддл 1, фиддл 2, фиддл 3.

Полезные ссылки

  1. Четыре книги и сайт Эдварда Тафти
  2. Библиотека D3.js
  3. Визуализации Майка Бостока
  4. Блог Flowing Data и книги Натана Яу
  5. Вся интерактивная инфографика «Нью‑Йорк таймс» в твиттере
  6. Советы по визуализации данных и рубрика вопрос‑ответ Тани Бибиковой
  7. Лаборатория данных
  8. Любимые примеры лаборантов на пинтересте
  9. Курсеро‑курсы: Introduction to Data Science, Maps and the Geospatial Revolution
    и специализации Data Science и Data Mining
  10. Статьи о D3.js на русском:  «Введение в D3» и  «Мыслим связками»

Ответы на вопросы и обсуждение курса в открытой группе на фэйсбуке.