Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Data Visualization in Europe" for Open Data School

3,820 views

Published on

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

Published in: Education
  • Be the first to comment

"Data Visualization in Europe" for Open Data School

  1. 1. Визуализация данных в Европе Кто, с кем, как и зачем – и как начать создавать визуализации самостоятельно Наталья Карбасова
  2. 2. О чем мы будем говорить? 1. Визуализация в Европе 2. Основные типы визуализаций и распространенные ошибки 3. Мастер-класс: Как создать собственную визуализацию
  3. 3. Зачем нужна визуализация данных? • Информации все больше • Времени все меньше • Меняется восприятие информации: мы меньше читаем и больше смотрим картинки • Идеи проще донести до аудитории + более объективная картинка • Неразборчивые ряды цифр превращаются в четкую картинку
  4. 4. Визуализация в европейской журналистике
  5. 5. Журналистикой данных всерьез занимается только несколько изданий
  6. 6. Zeit Online blog.zeit.de/open-data/
  7. 7. Что делает Zeit Online? • Приводит интересные примеры визуализаций из других источников • Объясняет, как создавались собственные визуализации и расследования
  8. 8. От простых графиков, созданных в datawrapper.com... http://blog.zeit.de/open-data/2013/05/07/statistik-ifgkuenstlersozialkasse/
  9. 9. ...и word clouds, созданных в Wordle.com http://blog.zeit.de/opendata/2013/11/27/koalitionsvertraege-woerter-
  10. 10. До более сложных проектов с участием программистов Мониторинг Твиттера во время выборов http://www.zeit.de/politik/deutschland/201309/twitter-monitor
  11. 11. Что здесь показано? • Анализ 10000 важнейших аккаунтов по количеству пользователей, упоминаний и активности: какие темы предвыборной кампании волнуют пользователей Твиттера? • Взяли самые популярные хэштеги • Разбили по категориям: упомянули пользователи, медиа, политики, общественные организации
  12. 12. http://www.zeit.de/politik/deutschland/abgeordnetenbilanz/?part ei=-&ansicht=ml&kategorie=5
  13. 13. Что здесь показано? • Результаты деятельности Бундестага и отдельных парламентариев • Всего журналисты загрузили с сайта dip.bundestag.de почти 156 000 различных видов деятельности (категории: речь, устное замечание, групповая инициатива, вопрос правительству и ответ правительства) • Каждой категории присвоили свой цвет: видно, какой политик из какой партии чем занимался
  14. 14. Но и у Zeit бывают непонятные визуализации http://blog.zeit.de/opendata/2013/07/11/dispozinsen/
  15. 15. Что тут не так? • Цифры на карте нельзя быстро сравнить, непонятно, кто лучше, кто хуже. • Создается видимость общей картины, но на самом деле отсутствует прозрачность.
  16. 16. Spiegel.de: Блог Datenlese http://www.spiegel.de/thema/daten/
  17. 17. Что делает Spiegel.de? • Публикует собственные проекты • Показывает ошибки в официальной статистике
  18. 18. Перепись населения http://www.spiegel.de/politik/deutschland/interaktive-karte-einwohnerzahlenzensus-2011-gewinner-verlierer-a-914393.html
  19. 19. Интерактивные визуализации http://www.spiegel.de/politik/deutschland/interaktive-grafik-das-ist-merkels-neue-regierung-a928664.html
  20. 20. Berliner Morgenpost: карта выборов в Берлине 2011 2013
  21. 21. Задействовали программиста – получили результат быстрее и лучше -> European Newspaper Award http://berlinwahlkarte2013.morgenpost.de/index.html
  22. 22. Süddeutsche Zeitung: создают досье по темам http://www.sueddeutsche.de/thema/BahnVersp%C3%A4tungen
  23. 23. DataGraph
  24. 24. Атлас Европы
  25. 25. Раскрытие беспрецедентного уклонения от налогов Подробности: http://goo.gl/ln7FIu
  26. 26. „Немецкая Волна“ http://visualdata.dw.de/specials/bildung/en/in dex.html
  27. 27. Что здесь показано? • Факты об образовании во всем мире • Фокус на нескольких интересных фактах и корреляциях (грамотность по регионам, грамотность по странам/ по полу, запись в учебные заведения, расходы на образование vs. расходы на военный бюджет) • Дизайнер не только показывает, но и объясняет данные и рассказывает историю
  28. 28. Neue Zürcher Zeitung
  29. 29. «Швейцария с высоты птичьего полета» http://work.interactivethings.com/nzz-swissmaps/index.html
  30. 30. Короткие информативные карты, выхватывающие фрагменты из жизни страны
  31. 31. Кто делает эти проекты? • В Швейцарии работает агентство Interactive Things (http://interactivethings.com/) • В Германии есть независимые информационные дизайнеры и агентства (Opendata City, Golden Section Infographics) • Редакции пока редко берут в штат программистов (исключение – Berliner Morgenpost)
  32. 32. Чрезмерное использование bubble charts
  33. 33. Проблема с «кружочками» • Bubble Charts используются для сравнения величин, а надо – для общей картинки • Слишком много «красоты» и мало информации
  34. 34. Bubble problem • Человеческий мозг плохо высчитывает площади поверхностей. Он гораздо лучше умеет сравнивать отельные параметры, такие как высоту или длину. • Читатели сравнивают не площадь, а высоту диаграммы
  35. 35. Financial Times
  36. 36. Handelsblatt
  37. 37. Проблемные инфографики в прессе Financial Times
  38. 38. Можно использовать для общей картины http://elections.nytimes.com/2012/results/pre sident
  39. 39. Визуализации в других сферах
  40. 40. OECD Better Life Index http://www.oecdbetterlifeindex.org/
  41. 41. Что здесь показано? • Сравнение основных факторов, влияющих на восприятие качества жизни в странах ОБСЕ • Каждый цветок = страна • Каждый лепесток = один из 11 факторов • Длина = балл страны по этой теме • Ширина = важность темы для конкретного пользователя. • Пользователь сам настраивает рейтинг • Хороший баланс между дизайном и практичностью
  42. 42. Альтернативы в процессе разработки визуализации http://vimeo.com/24609043#
  43. 43. Кто это сделал? • Мориц Штефанер (Moritz Stefaner) • Информационный дизайнер, фрилансер • moritz.stefaner.eu
  44. 44. GED Viz (Global Economic Dynamics) • www.ged-project.de/viz/ • Инструмент и проект по визуализации экономических данных от Bertelsmann • Результаты можно экспортировать в виде iframe или сохранить как картинку • Параллельно существует проект по объяснению данных при помощи этого инструмента
  45. 45. www.ged-project.de/shorts
  46. 46. Но и тут красота подачи часто идет вразрез с функциональностью
  47. 47. Ханс Рослинг, Gapminder http://www.gapminder.org/videos/the-riverof-myths/
  48. 48. Что здесь показано? • Визуализация демографических данных: как развивается население в различных странах мира в историческом контексте • Популяризация общедоступных фактов при помощи визуальной подачи информации • Gapminder – это программа, которую можно бесплатно загрузить и использовать для собственных презентаций (источники: данные международных организаций World Bank, OECD, etc)
  49. 49. Альтернативный проект на основе данных Gapminder (Мориц Штефанер) http://moritz.stefaner.eu/projects/remixing-rosling/
  50. 50. «Литературный организм» Stefanie Posavec http://itsbeenreal.co.uk/
  51. 51. Визуализация бизнес-аналитики и больших данных
  52. 52. Splunk
  53. 53. Tableau Software
  54. 54. Типы визуализаций Источник: Andy Kirk, „Data Visualization: a successful design process“
  55. 55. „Разные формы визуализации поразному отвечают на разные вопросы“ Amanda Cox, New York Times
  56. 56. Сравниваем категории
  57. 57. Dot plot
  58. 58. Bar chart
  59. 59. Floating bar / Gantt chart
  60. 60. Гистограмма
  61. 61. Slopegraph
  62. 62. Radial chart http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states
  63. 63. Glyph chart: форма (цветок, etc)
  64. 64. Sankey diagram
  65. 65. Word cloud
  66. 66. Показываем иерархии и отношение частей к целому
  67. 67. Pie chart
  68. 68. Stacked bar chart
  69. 69. Square pie
  70. 70. Tree map
  71. 71. Circle packing diagram
  72. 72. Bubble hierarchy
  73. 73. Tree hierarchy
  74. 74. Показываем изменения во времени
  75. 75. Line chart
  76. 76. Sparklines
  77. 77. Area chart
  78. 78. Horizon chart
  79. 79. Stacked area chart
  80. 80. Stream graph http://visualization.geblogs.com/visualization/ germanenergy/
  81. 81. Candlestick chart
  82. 82. Barcode chart
  83. 83. Flow map
  84. 84. Показываем связи и взаимоотношения
  85. 85. Scatter plot
  86. 86. Bubble plot
  87. 87. Heatmap
  88. 88. Parallel sets
  89. 89. Radial network (chord diagram)
  90. 90. Network diagram
  91. 91. Визуализируем географические данные
  92. 92. Карты и их подвиды
  93. 93. «Основная задача инфографика – это не просто быть красивой и приятной на вид. В первую очередь инфографика должна быть понятна, а уж потом красива. Красота должна выражаться через изысканную функциональность». Альберто Кайро „The Functional Art“
  94. 94. Собственный опыт: попытка внедрить визуальный подход в Focus Online
  95. 95. Интервью с министром экономики Чили http://goo.gl/oXtv7c
  96. 96. Берем данные World Bank, импортируем в DataWrapper – и показываем, что министр не врет
  97. 97. Рекорд по использованию солнечной энергии http://goo.gl/T3kRw1
  98. 98. Актуальные цифры + статистика (Datawrapper, Excel)
  99. 99. Рейтинг немецких футболистов в соцсетях (среди 200 самых дорогих игроков) http://goo.gl/4IGWtQ
  100. 100. 20 самых дорогих игроков
  101. 101. 20 самых популярных игроков
  102. 102. Сколько стоят их фанаты?
  103. 103. Сортировка исходных данных
  104. 104. Slope graph
  105. 105. Создавать собственные визуализации гораздо проще, чем кажется
  106. 106. «Визуализация происходит не на странице газеты и не на экране. Она происходит у вас в голове». Альберто Кайро (Epoca)
  107. 107. • Хорошая инфографика представляет информацию и позволяет пользователям ее исследовать. • Визуализации должны не упрощать суть, а объяснять ее, указывать на тенденции, раскрывать структуры и делать невидимое видимым. • Создание визуализаций не отличается от создания журналистских текстов. Дизайнер (журналист) кодирует информацию, зритель (читатель) декодирует ее.
  108. 108. Создаем повествование • Сначала общая картина, потом отдельные подробности и фильтрация, лишь затем дополнительные детали
  109. 109. Создать визуализацию несложно, если: - понимать правила восприятия информации - иметь четкое представление о том, что вы хотите показать (= журналистский тезис)
  110. 110. Правила восприятия информации
  111. 111. • Мозг лучше воспринимает различия в цвете, чем различия в форме
  112. 112. Ориентация, цвет, форма
  113. 113. Близость расположения • Объекты, расположенные рядом друг с другом, воспринимаются как одна группа
  114. 114. Схожесть • Идентичные объекты воспринимаются как часть одной группы
  115. 115. Связанность • Объекты, связанные при помощи графических средств, воспринимаются как часть одной группы
  116. 116. Собственный опыт: анализ службы попутчиков Mitfahrgelegenheit.de
  117. 117. Куда едут немцы 1 мая?
  118. 118. Исходные данные на сайте mitfahrgelegenheit.de
  119. 119. Как извлечь? • • • • Google Spreadsheets: =importHTML Расширение Google Scraper Python Scraper (ScraperWiki) Outwit Hub!
  120. 120. OutWit Hub
  121. 121. Дальнейшие шаги • Очистка данных, экспорт в Excel/ Google Fusion Tables • Сортировка и фильтрация • Определение формата и ограничений (только 50 самых населенных городов, визуальная часть)
  122. 122. Сортировка
  123. 123. Результат
  124. 124. Инструменты • • • • • • 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
  125. 125. Если вам не хватает технических знаний, есть два выхода: • Снизить собственный уровень ожиданий и создать базовую визуализацию • Найти профессионалов, которые сделают сложный продукт на основе вашей идеи
  126. 126. Что нужно изучить • Принципы восприятия и организации информации (Gestalt School of Psychology/ Gestalt laws), информационный дизайн • Основы статистики («Я верю только той статистике, которую сам сфальсифицировал») – стандартное отклонение, медиан, модус, погрешность • Основы графического дизайна и картографии
  127. 127. Развивайте визуальное и аналитическое мышление!
  128. 128. Как создавать собственные визуализации?
  129. 129. С чего начать? • Изучайте и критикуйте чужие работы: – конкурсы визуализаций: visualizing.org, infobeautyawards.com – блоги – Дата-блоги онлайн-СМИ • Придумывайте, что бы вы сделали лучше • Попытайтесь сделать лучше
  130. 130. Подходы • Есть данные –> ищем историю • Есть история -> ищем подтверждение в данных
  131. 131. Основные шаги при создании визуализаций • Создание наброска/ концепции • Поиск и подготовка данных • Анализ данных/ визуализация
  132. 132. Создание наброска
  133. 133. Поиск и подготовка данных
  134. 134. Поиск и подготовка данных – самый трудозатратный этап при создании визуализации
  135. 135. Поиск и подготовка данных (1) 1) Находим данные (данные уже есть в читаемом формате – Excel, csv, etc/ API/ скрейпинг/ извлечение из PDF). Подробнее: ЬЕГТИН 2) Изучаем данные: насколько они соответствуют нашим целям? Просматриваем, фильтруем, сортируем (Excel, Tableau, Google Refine). – – – – Подходят ли нам данные? Присутствуют ли все необходимые категории? Подходящий временной промежуток? Определяем категории данных
  136. 136. Поиск и подготовка данных (2) 3) Подчищаем данные: убираем дубликаты, приводим названия к общему формату (Frankruft – Frankfurt-am-Main – Frankfurt/Main) 4) Трансформируем данные для дальнейшего анализа: - Извлекаем отдельные переменные (год из даты) - Совмещаем переменные (полное имя из двух ячеек с именем и фамилией) - Считаем при необходимости относительные числа (проценты) - Убираем то, что не собираемся использовать
  137. 137. Поиск и подготовка данных (3) 5) Консолидация данных: добавляем дополнительные слои данных 6) Визуальный анализ данных: - Изучаем данные и представляем их визуально перед тем, как создавать конечный продукт - Сравнения и пропорции (сравниваем со средними значениями, стандартными отклонениями, прогнозами)
  138. 138. Поиск и подготовка данных (4) • Отфильтровываем сигнал от шума: берем только то, что действительно важно и из чего мы можем создать историю. • Вот почему важно понимать, что именно вы хотите показать и что хотите этим сказать
  139. 139. Командная работа
  140. 140. Распределение ролей в команде: • Инициатор (стратег) • Data scientist/ data miner должен находить, извлекать, обрабатывать и подготавливать данные (статистический и математический анализ данных) • Журналист рассказывает историю (основные тезисы и углы подачи) • Computer scientist претворяет проект в жизнь (программирование) • Дизайнер работает в паре с программистом • Cognitive scientist отвечает за визуальное восприятие информации (теории коммуникаций, теории цвета, humancomputer interaction) • Communicator отвечает за взаимодействие между клиентом и исполнителями и за решение вопросов в команде • Менеджер проекта отвечает за развитие проекта и за доведение его до логического завершения
  141. 141. Факторы и ограничения
  142. 142. Какие факторы влияют на создание визуализации? • Цель (личные проекты, собственные инициативы для кого-то, заказы на конкретную тему с конкретными цифрами) • Временные рамки (умение распределять время и управлять проектами) • Бюджет • Давление со стороны клиента/ коллег • Формат (статическая или интерактивная визуализация? Для интернета, планшетов или смартфонов? Постер или полстраницы в журнале? Видеоанимация? Одиночный проект или серия визуализаций?) • Технические решения (Какие технические ресурсы есть в распоряжении? Только бесплатные сервисы или платные профессиональные программы? Техническая инфраструктура/ собственные сервисы? Какие браузеры должны отображать визуализацию? Базы данных?)
  143. 143. Списки и ссылки
  144. 144. Их нужно знать: дизайнеры и журналисты • • • • • • • • Грегор Айш (driven-by-data.net) Мориц Штефанер (stefaner.eu) Ян Швохоу (schwochow.de) Ян Тульп (tulpinteractive.com) Кристофер Варноу (christopherwarnow.com) Себастиан Мондиаль (@djournalismus) Юлиус Трегер (@juliustroeger) Мирко Лоренц (mirkolorenz.com)
  145. 145. Что почитать: книги • 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“
  146. 146. Что почитать: сайты и блоги • • • • • • • • • • 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/
  147. 147. Списки ресурсов и инструментов • http://www.visualisingdata.com/index.php/re sources/ • http://mediakar.org/tools/visualisation/ • http://datavisualization.ch/tools/ • http://te-st.ru/tools/
  148. 148. Инструменты: графики и статистика • • • • • • • Datawrapper Tableau public Google Chart Tools: Wordle Excel Google Fusion Tables / Pivot Tables R: www.r-project.org/
  149. 149. Инструменты: карты • • • • • • • • • 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/)
  150. 150. Как со мной связаться Наталья Карбасова mediakar.org Twitter: @karbasa karbasova@ymail.com

×