1. Обзор
онлайн-­‐инструментов
для
визуализации
данных
Иван
Бегтин
Директор
НП
“Информационная
культура”

2. Выбор
способа
визуализации
Интерактивно
http://bit.ly/16NHT73

3. Какая
бывает
визуализация?
Примеры

4. Бюджеты->
BubbleTree
Интерактивно
http://bit.ly/1csa51y
Исходный
код
https://github.com/okfn/bubbletree

5. Интерактивно
http://ibm.co/1geu7gX
Бюджеты->
IBM Many Eyes

6. Интерактивно
http://bit.ly/17uMw6y
Бюджеты->
Бюджет Москвы (budget.mos.ru)

7. Времянные ряды->
OKFN Timeliner
Интерактивно
http://timeliner.okfnlabs.org/
Исходный
код
https://github.com/okfn/timeliner

8. Интерактивно
https://opendata.socrata.com
Любые данные->
Socrata

9. Интерактивно
https://mapbox.com
Геоданные ->
MapBox

10. Интерактивно
https://mapbox.com
Геоданные ->
Яндекс.Карты

11. Сравнение
Интерактивен
Открытый
код
Платформа
Бюджет
Москвы
Нет
Нет
Нет
BubbleTree
Да
Да
Нет
IBM
Many
Eyes
Да
Нет
Да
OKFN
Timeliner
Да
Да
Да
Socrata
Да
Нет
Да
MapBox
Да
Нет
Да
Яндекс
Карты
Да
Нет
Да

12. Много
вопросов
для
себя

13. Ответы
на
вопросы.
Контекст
• Умею
ли
я
программировать?
• Понимаю
ли
я
как
объяснить
задачу
программисту?
• Умею
ли
я
рисовать
?
• Понимаю
ли
я
как
объяснить
задачу
дизайнеру?

14. Ответы
на
вопросы.
Данные
• Есть
ли
у
данных
геопривязка
(координаты,
геообласть)?
• Есть
ли
у
данных
даты
и
значимы
ли
они?
• Есть
ли
у
данных
численные
показатели?
• Есть
ли
у
данных
суммы
?
• Обладают
ли
данные
большим
числом
значимых
связей
?
• Существуют
ли
данные
в
нужном
формате?

15. Ответы
на
вопросы.
Ограничения
• Надо
ли
соответствовать
формату/шаблону
статьи?
• Надо
ли
поддерживать
мобильные
устройства?
• Надо
ли
поддерживать
планшенты?
• Какой
запас
времени
у
меня
есть?

16. Инструменты

17. Data-­‐driven
Documents
•
Сайт:
http://d3js.org/
•
Открытый
код
•
Визуализируется
почти
все
виды
данных
•
Легко
встраивается
в
сайты
•
Надо
уметь
программировать
(Javascript)

18. Socrata
•
Сайт:
http://socrata.com/
•
Онлайн-­‐платформа
•
Визуализируется
почти
все
виды
данных
•
Не
нужно
уметь
программировать
•
Плохо
встраивается
в
сайты

19. Карты
Яндекса
•
Сайт:
http://api.yandex.ru
•
Онлайн-­‐платформа
•
Только
для
геоданных
•
Надо
уметь
программировать
(Javascript)

20. LeaVlet
•
Сайт:
http://lea„letjs.com/
• Открытый
код
•
Только
для
геоданных
•
Основан
на
OpenStreetMap
•
Надо
уметь
программировать
(Javascript)

21. Infogr.am
•
Сайт:
http://infogr.am/
• Онлайн
платформа
•
Не
все
данные
•
Типовая
инфографика
•
Не
нужно
уметь
программировать

22. Как
действовать

23. Последовательность
шагов
•
•
•
•
Формулируем
задачу
Выбираем
инструмент
Подготавливаем
данные
Создаём
визуализацию

24. Формулируем
задачу
• Четко
определяем
что
хотим
визуализировать
–
деньги,
цифры,
геоточки
или
отношения
• В
зависимости
от
контекста,
данных
и
ограничений
переходим
к
выбору
инструмента

25. Выбор
инструмента
•
В
зависимости
от
контекста,
данных
и
ограничений
выбираем
один
из
инструментов.
•
Ключевое
–
это
данные
и
ограничения
•
Если
задача
для
программирования
то:
• Смотрим
инструменты
в
презентации
• …
или
идем
на
selection.datavisualization.ch
и
подбираем
•
Если
задача
без
программирования
• Смотрим
инструменты
вроде
infogr.am
или
аналогов

26. Подготовка
данных
•
Выверяем
и
проверяем
данные
корректность
•
•
•
если
геоданные
с
адресами
без
координат
–
геокодируем
их
если
надо
сравнивать
суммы
–
рассчитываем
доли
и
проценты
Подготавливаем
данные
под
инструмент
визуализации:
•
•
при
необходимости
добавляем
доп.
атрибуты,
например,
цвета
для
графика
Переводим
данные
в
формат
принимаемый
инструментом:
•
Для
карт
форматы:
GeoJSON,
KML,
YMapsML
и
др.
•
Для
других
инструментов
свои
требования
–
узнаем
их
заранее

27. Много
ссылок

28. Ресурсы
•
http://datavisualization.ch/ - коллекция инструментов
•
http://www.creativebloq.com/design-tools/data-visualization-712402 - коллекция
инструментов
•
http://datavizchallenge.org - конкурс визуализаций
•
http://visualizing.org/ - сообщество
•
http://flowingdata.com/ - сообщество
•
http://visual.ly/ - сообщество
•
http://mashable.com/category/data-visualization/ - сообщество

29. Платформы
•
интерактивные визуализации - https://getdataseed.com -
•
Инфографика - http://infogr.am/
•
IBM Many Eyes - http://www-958.ibm.com
•
Tableau Online - http://www.tableausoftware.com/products/online
•
Google Charts - https://developers.google.com/chart/
•
Factual - http://factual.com/
•
SumAll - https://sumall.com/

30. Образование
•
Knights Foundation Course - http://open.journalismcourses.org
•
Edward Tufte courses - http://www.edwardtufte.com/tufte/courses
•
MIT Open Course “How to Process, Analyze and Visualize Data” http://ocw.mit.edu/resources/res-6-009-how-to-process-analyze-and-visualizedata-january-iap-2012/
•
Stanford Visualization Course - http://vis.stanford.edu/
•
Harvard Visualization Course - http://cs171.org/

31. Вопросы?
Иван Бегтин
Email: ibegtin@infoculture.ru
Сайт: http://ivan.begtin.name