«Визуализация. Основы»: Часть 2. Основы D3.js

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

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

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

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

Фиддл

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

Фиддл

Практическое задание

1. Используя первый фиддл, потренируйтесь добавлять и удалять данные и свойства. Превратите круги в прямоугольники, ширина которых вдвое больше высоты, и измените цвет прямоугольников с чёрного на зелёный с чёрной обводкой.
2. Используя второй фиддл и расширенный сет данных, создайте график зависимости продолжительности жизни от количества детей в семье. Размером кружка покажите население страны.
3. Создайте интерактивную визуализацию на основе результатов дизайнерской практики — отчёта для руководства или интерфейса покупателя на выбор. Данные: mirgorod-sales.csv.

Дедлайн по практике D3.js — 16 ноября. В понедельник будут опубликованы решения для самостоятельной проверки.

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

  1. Четыре книги и сайт Эдварда Тафти
  2. Библиотека D3.js
  3. Визуализации Майка Бостока
  4. Блог Flowing Data и книги Натана Яу
  5. Вся интерактивная инфографика «Нью‑Йорк таймс» в твиттере
  6. Советы по визуализации данных и рубрика вопрос‑ответ Тани Бибиковой
  7. Лаборатория данных
  8. Любимые примеры лаборантов на пинтересте
  9. ТОП 10 книг по инфографике и визуализации данных

 

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