• Инфографика
• 1 мин на чтение
• 10411

«Визуализация. Основы»: Часть 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 книг по инфографике и визуализации данных

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

• #инфографика
• #лекция

• Поделиться
• 2
• -1