Презентация "Визуализация данных в Европе" Натальи Карбасовой к занятию №8 в Школе открытых данных 17 декабря 2013 года.

1. Визуализация данных в Европе
Кто, с кем, как и зачем – и как
начать создавать визуализации
самостоятельно
Наталья Карбасова

2. О чем мы будем говорить?
1. Визуализация в Европе
2. Основные типы визуализаций и
распространенные ошибки
3. Мастер-класс: Как создать собственную
визуализацию

3. Зачем нужна визуализация данных?
• Информации все больше
• Времени все меньше
• Меняется восприятие информации: мы
меньше читаем и больше смотрим
картинки
• Идеи проще донести до аудитории + более
объективная картинка
• Неразборчивые ряды цифр превращаются в
четкую картинку

4. Визуализация в европейской
журналистике

5. Журналистикой данных всерьез
занимается только несколько
изданий

6. Zeit Online
blog.zeit.de/open-data/

7. Что делает Zeit Online?
• Приводит интересные примеры
визуализаций из других источников
• Объясняет, как создавались собственные
визуализации и расследования

8. От простых графиков, созданных в
datawrapper.com...
http://blog.zeit.de/open-data/2013/05/07/statistik-ifgkuenstlersozialkasse/

9. ...и word clouds,
созданных в
Wordle.com
http://blog.zeit.de/opendata/2013/11/27/koalitionsvertraege-woerter-

10. До более сложных проектов с
участием программистов
Мониторинг
Твиттера во время
выборов
http://www.zeit.de/politik/deutschland/201309/twitter-monitor

11. Что здесь показано?
• Анализ 10000 важнейших аккаунтов по
количеству пользователей, упоминаний и
активности: какие темы предвыборной
кампании волнуют пользователей
Твиттера?
• Взяли самые популярные хэштеги
• Разбили по категориям: упомянули
пользователи, медиа, политики,
общественные организации

12. http://www.zeit.de/politik/deutschland/abgeordnetenbilanz/?part
ei=-&ansicht=ml&kategorie=5

13. Что здесь показано?
• Результаты деятельности Бундестага и
отдельных парламентариев
• Всего журналисты загрузили с сайта
dip.bundestag.de почти 156 000 различных
видов деятельности (категории: речь, устное
замечание, групповая инициатива, вопрос
правительству и ответ правительства)
• Каждой категории присвоили свой цвет:
видно, какой политик из какой партии чем
занимался

14. Но и у Zeit
бывают
непонятные
визуализации
http://blog.zeit.de/opendata/2013/07/11/dispozinsen/

15. Что тут не так?
• Цифры на карте нельзя быстро сравнить,
непонятно, кто лучше, кто хуже.
• Создается видимость общей картины, но на
самом деле отсутствует прозрачность.

16. Spiegel.de: Блог Datenlese
http://www.spiegel.de/thema/daten/

17. Что делает Spiegel.de?
• Публикует собственные проекты
• Показывает ошибки в официальной
статистике

18. Перепись населения
http://www.spiegel.de/politik/deutschland/interaktive-karte-einwohnerzahlenzensus-2011-gewinner-verlierer-a-914393.html

19. Интерактивные визуализации
http://www.spiegel.de/politik/deutschland/interaktive-grafik-das-ist-merkels-neue-regierung-a928664.html

20. Berliner Morgenpost: карта выборов
в Берлине
2011
2013

21. Задействовали программиста –
получили результат быстрее и лучше
-> European Newspaper Award
http://berlinwahlkarte2013.morgenpost.de/index.html

22. Süddeutsche Zeitung: создают досье
по темам
http://www.sueddeutsche.de/thema/BahnVersp%C3%A4tungen

23. DataGraph

24. Атлас Европы

25. Раскрытие беспрецедентного
уклонения от налогов
Подробности: http://goo.gl/ln7FIu

27. „Немецкая Волна“
http://visualdata.dw.de/specials/bildung/en/in
dex.html

28. Что здесь показано?
• Факты об образовании во всем мире
• Фокус на нескольких интересных фактах и
корреляциях (грамотность по регионам,
грамотность по странам/ по полу, запись в
учебные заведения, расходы на
образование vs. расходы на военный
бюджет)
• Дизайнер не только показывает, но и
объясняет данные и рассказывает историю

30. Neue Zürcher Zeitung

31. «Швейцария с высоты птичьего полета»
http://work.interactivethings.com/nzz-swissmaps/index.html

32. Короткие информативные карты,
выхватывающие фрагменты из
жизни страны

33. Кто делает эти проекты?
• В Швейцарии работает агентство Interactive
Things (http://interactivethings.com/)
• В Германии есть независимые
информационные дизайнеры и агентства
(Opendata City, Golden Section Infographics)
• Редакции пока редко берут в штат
программистов (исключение – Berliner
Morgenpost)

34. Чрезмерное использование
bubble charts

35. Проблема с «кружочками»
• Bubble Charts используются для сравнения
величин, а надо – для общей картинки
• Слишком много «красоты» и мало
информации

36. Bubble problem
• Человеческий мозг плохо высчитывает
площади поверхностей. Он гораздо лучше
умеет сравнивать отельные параметры,
такие как высоту или длину.
• Читатели сравнивают не площадь, а высоту
диаграммы

37. Financial Times

38. Handelsblatt

39. Проблемные инфографики в прессе
Financial Times

40. Можно использовать для общей
картины
http://elections.nytimes.com/2012/results/pre
sident

41. Визуализации в других сферах

42. OECD Better Life Index
http://www.oecdbetterlifeindex.org/

43. Что здесь показано?
• Сравнение основных факторов, влияющих на
восприятие качества жизни в странах ОБСЕ
• Каждый цветок = страна
• Каждый лепесток = один из 11 факторов
• Длина = балл страны по этой теме
• Ширина = важность темы для конкретного
пользователя.
• Пользователь сам настраивает рейтинг
• Хороший баланс между дизайном и
практичностью

44. Альтернативы в процессе
разработки визуализации
http://vimeo.com/24609043#

45. Кто это сделал?
• Мориц Штефанер
(Moritz Stefaner)
• Информационный
дизайнер,
фрилансер
• moritz.stefaner.eu

46. GED Viz (Global Economic Dynamics)
• www.ged-project.de/viz/
• Инструмент и проект по визуализации
экономических данных от Bertelsmann
• Результаты можно экспортировать в виде
iframe или сохранить как картинку
• Параллельно существует проект по
объяснению данных при помощи этого
инструмента

48. www.ged-project.de/shorts

49. Но и тут красота подачи часто идет
вразрез с функциональностью

50. Ханс Рослинг, Gapminder
http://www.gapminder.org/videos/the-riverof-myths/

51. Что здесь показано?
• Визуализация демографических данных: как
развивается население в различных странах
мира в историческом контексте
• Популяризация общедоступных фактов при
помощи визуальной подачи информации
• Gapminder – это программа, которую можно
бесплатно загрузить и использовать для
собственных презентаций (источники: данные
международных организаций World Bank,
OECD, etc)

52. Альтернативный проект на основе
данных Gapminder (Мориц
Штефанер)
http://moritz.stefaner.eu/projects/remixing-rosling/

54. «Литературный организм»
Stefanie Posavec
http://itsbeenreal.co.uk/

55. Визуализация бизнес-аналитики
и больших данных

56. Splunk

58. Tableau Software

59. Типы визуализаций
Источник: Andy Kirk,
„Data Visualization: a successful design process“

60. „Разные формы визуализации поразному отвечают на разные вопросы“
Amanda Cox, New York Times

61. Сравниваем категории

62. Dot plot

63. Bar chart

64. Floating bar / Gantt chart

65. Гистограмма

66. Slopegraph

67. Radial
chart
http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states

68. Glyph chart: форма (цветок, etc)

69. Sankey diagram

70. Word cloud

71. Показываем иерархии и отношение
частей к целому

72. Pie chart

73. Stacked bar chart

74. Square pie

75. Tree map

76. Circle packing diagram

77. Bubble hierarchy

78. Tree hierarchy

79. Показываем изменения во
времени

80. Line chart

81. Sparklines

82. Area chart

83. Horizon chart

84. Stacked area chart

85. Stream graph
http://visualization.geblogs.com/visualization/
germanenergy/

86. Candlestick chart

87. Barcode chart

88. Flow map

89. Показываем связи и
взаимоотношения

90. Scatter plot

91. Bubble plot

92. Heatmap

93. Parallel sets

94. Radial network (chord diagram)

95. Network diagram

96. Визуализируем географические
данные

97. Карты и их подвиды

103. «Основная задача
инфографика – это не
просто быть красивой и
приятной на вид. В
первую очередь
инфографика должна быть
понятна, а уж потом
красива. Красота должна
выражаться через
изысканную
функциональность».
Альберто Кайро
„The Functional Art“

104. Собственный опыт:
попытка внедрить визуальный
подход в Focus Online

105. Интервью с
министром
экономики
Чили
http://goo.gl/oXtv7c

106. Берем данные
World Bank,
импортируем в
DataWrapper – и
показываем, что
министр не врет

107. Рекорд по
использованию
солнечной
энергии
http://goo.gl/T3kRw1

108. Актуальные
цифры +
статистика
(Datawrapper,
Excel)

109. Рейтинг
немецких
футболистов в
соцсетях
(среди 200
самых дорогих
игроков)
http://goo.gl/4IGWtQ

110. 20 самых
дорогих
игроков

111. 20 самых
популярных
игроков

112. Сколько
стоят их
фанаты?

113. Сортировка
исходных
данных

114. Slope graph

115. Создавать собственные
визуализации гораздо проще,
чем кажется

116. «Визуализация происходит не на
странице газеты и не на экране. Она
происходит у вас в голове».
Альберто
Кайро
(Epoca)

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

118. Создаем повествование
• Сначала общая картина, потом отдельные
подробности и фильтрация, лишь затем
дополнительные детали

119. Создать визуализацию несложно,
если:
- понимать правила восприятия
информации
- иметь четкое представление о том,
что вы хотите показать
(= журналистский тезис)

120. Правила восприятия информации

121. • Мозг лучше воспринимает различия в
цвете, чем различия в форме

122. Ориентация, цвет, форма

123. Близость расположения
• Объекты, расположенные рядом друг с
другом, воспринимаются как одна группа

124. Схожесть
• Идентичные объекты воспринимаются как
часть одной группы

125. Связанность
• Объекты, связанные при помощи
графических средств, воспринимаются как
часть одной группы

126. Собственный опыт:
анализ службы попутчиков
Mitfahrgelegenheit.de

127. Куда едут немцы 1 мая?

128. Исходные данные на сайте
mitfahrgelegenheit.de

129. Как извлечь?
•
•
•
•
Google Spreadsheets: =importHTML
Расширение Google Scraper
Python Scraper (ScraperWiki)
Outwit Hub!

130. OutWit Hub

131. Дальнейшие шаги
• Очистка данных, экспорт в Excel/ Google
Fusion Tables
• Сортировка и фильтрация
• Определение формата и ограничений
(только 50 самых населенных городов,
визуальная часть)

132. Сортировка

136. Результат

137. Инструменты
•
•
•
•
•
•
Google Spreadsheets
Google scraper add-on
OutWit Hub
Excel
Google Pivot Tables
Google Fusion Tables: creating the network
diagram and embedding it on the blog
• Datawrapper: creating bar charts with top-10
cities

138. Если вам не хватает технических
знаний, есть два выхода:
• Снизить собственный уровень ожиданий и
создать базовую визуализацию
• Найти профессионалов, которые сделают
сложный продукт на основе вашей идеи

139. Что нужно изучить
• Принципы восприятия и организации
информации (Gestalt School of Psychology/
Gestalt laws), информационный дизайн
• Основы статистики («Я верю только той
статистике, которую сам
сфальсифицировал») – стандартное
отклонение, медиан, модус, погрешность
• Основы графического дизайна и
картографии

140. Развивайте визуальное и
аналитическое мышление!

141. Как создавать собственные
визуализации?

142. С чего начать?
• Изучайте и критикуйте чужие работы:
– конкурсы визуализаций: visualizing.org,
infobeautyawards.com
– блоги
– Дата-блоги онлайн-СМИ
• Придумывайте, что бы вы сделали лучше
• Попытайтесь сделать лучше

143. Подходы
• Есть данные –> ищем историю
• Есть история -> ищем подтверждение в
данных

144. Основные шаги при создании
визуализаций
• Создание наброска/ концепции
• Поиск и подготовка данных
• Анализ данных/ визуализация

145. Создание наброска

146. Поиск и подготовка данных

147. Поиск и подготовка данных – самый
трудозатратный этап при создании
визуализации

148. Поиск и подготовка данных (1)
1) Находим данные (данные уже есть в
читаемом формате – Excel, csv, etc/ API/
скрейпинг/ извлечение из PDF). Подробнее:
ЬЕГТИН
2) Изучаем данные: насколько они
соответствуют нашим целям? Просматриваем,
фильтруем, сортируем (Excel, Tableau, Google
Refine).
–
–
–
–
Подходят ли нам данные?
Присутствуют ли все необходимые категории?
Подходящий временной промежуток?
Определяем категории данных

149. Поиск и подготовка данных (2)
3) Подчищаем данные: убираем дубликаты,
приводим названия к общему формату (Frankruft
– Frankfurt-am-Main – Frankfurt/Main)
4) Трансформируем данные для дальнейшего
анализа:
- Извлекаем отдельные переменные (год из даты)
- Совмещаем переменные (полное имя из двух
ячеек с именем и фамилией)
- Считаем при необходимости относительные числа
(проценты)
- Убираем то, что не собираемся использовать

150. Поиск и подготовка данных (3)
5) Консолидация данных: добавляем
дополнительные слои данных
6) Визуальный анализ данных:
- Изучаем данные и представляем их визуально
перед тем, как создавать конечный продукт
- Сравнения и пропорции (сравниваем со
средними значениями, стандартными
отклонениями, прогнозами)

151. Поиск и подготовка данных (4)
• Отфильтровываем сигнал от шума: берем
только то, что действительно важно и из
чего мы можем создать историю.
• Вот почему важно понимать, что именно вы
хотите показать и что хотите этим сказать

152. Командная работа

153. Распределение ролей в команде:
• Инициатор (стратег)
• Data scientist/ data miner должен находить, извлекать,
обрабатывать и подготавливать данные (статистический и
математический анализ данных)
• Журналист рассказывает историю (основные тезисы и углы
подачи)
• Computer scientist претворяет проект в жизнь
(программирование)
• Дизайнер работает в паре с программистом
• Cognitive scientist отвечает за визуальное восприятие
информации (теории коммуникаций, теории цвета, humancomputer interaction)
• Communicator отвечает за взаимодействие между клиентом и
исполнителями и за решение вопросов в команде
• Менеджер проекта отвечает за развитие проекта и за
доведение его до логического завершения

154. Факторы и ограничения

155. Какие факторы влияют на создание
визуализации?
• Цель (личные проекты, собственные инициативы для кого-то,
заказы на конкретную тему с конкретными цифрами)
• Временные рамки (умение распределять время и управлять
проектами)
• Бюджет
• Давление со стороны клиента/ коллег
• Формат (статическая или интерактивная визуализация? Для
интернета, планшетов или смартфонов? Постер или
полстраницы в журнале? Видеоанимация? Одиночный проект
или серия визуализаций?)
• Технические решения (Какие технические ресурсы есть в
распоряжении? Только бесплатные сервисы или платные
профессиональные программы? Техническая инфраструктура/
собственные сервисы? Какие браузеры должны отображать
визуализацию? Базы данных?)

156. Списки и ссылки

157. Их нужно знать: дизайнеры и
журналисты
•
•
•
•
•
•
•
•
Грегор Айш (driven-by-data.net)
Мориц Штефанер (stefaner.eu)
Ян Швохоу (schwochow.de)
Ян Тульп (tulpinteractive.com)
Кристофер Варноу (christopherwarnow.com)
Себастиан Мондиаль (@djournalismus)
Юлиус Трегер (@juliustroeger)
Мирко Лоренц (mirkolorenz.com)

158. Что почитать: книги
• Dona M. Wong, „The Wall Street Journal Guide to Information
Graphics“
• Noah Iliinsky & Julie Steele, „Designing Data Visualizations“
• Andy Kirk, „Data Visualization: a successful design process“
• Steven Few, „Show me the Numbers“
• Don Norman, „Design of Everyday Things“
• Simon Rogers, „The Guardian: Facts are Sacred“
• Colin Ware, „Visual Thinking by Design“
• Ben Goldacre, „Bad Science“
• Nathan Yau, „Visualize This“
• Nigel Holmes, „Designer‘s Guide to Creating Charts and Diagrams“
• Edward Tufte, „The visual display of Quantitative Information“

159. Что почитать: сайты и блоги
•
•
•
•
•
•
•
•
•
•
http://www.theguardian.com/news/datablog
http://www.periscopic.com/
http://infosthetics.com/
http://www.visualisingdata.com/
http://benfry.com/
http://bost.ocks.org/mike/
http://eagereyes.org/
http://www.thefunctionalart.com/
http://vis4.net/blog/
https://drawingbynumbers.org/

160. Списки ресурсов и инструментов
• http://www.visualisingdata.com/index.php/re
sources/
• http://mediakar.org/tools/visualisation/
• http://datavisualization.ch/tools/
• http://te-st.ru/tools/

161. Инструменты: графики и статистика
•
•
•
•
•
•
•
Datawrapper
Tableau public
Google Chart Tools:
Wordle
Excel
Google Fusion Tables / Pivot Tables
R: www.r-project.org/

162. Инструменты: карты
•
•
•
•
•
•
•
•
•
Arc GIS
Quantum GIS
CartoDB (http://cartodb.com/).
Geocommons
Instant Atlas (http://communities.instantatlas.com/)
Polymaps (http://polymaps.org/)
Kartograph (http://kartograph.org/)
Leaflet (http://leafletjs.com/)
OpenStreetMap (http://www.openstreetmap.org/)

163. Как со мной
связаться
Наталья Карбасова
mediakar.org
Twitter: @karbasa
karbasova@ymail.com