Visualization in Europe: School of Open Data in Moscow
•Transferir como PPTX, PDF•
0 gostou•755 visualizações
Here's the presentation I created for my workshop at the School of Open Data in Moscow in December 2014.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (14)
Semelhante a Visualization in Europe: School of Open Data in Moscow
Semelhante a Visualization in Europe: School of Open Data in Moscow (20)
Visualization in Europe: School of Open Data in Moscow
- 1. Визуализация данных в Европе Кто, с кем, как и зачем – и как начать создавать визуализации самостоятельно Наталья Карбасова
- 2. О чем мы будем говорить? 1. Визуализация в Европе 2. Основные типы визуализаций и распространенные ошибки 3. Мастер-класс: Как создать собственную визуализацию
- 3. Зачем нужна визуализация данных? • Информации все больше • Времени все меньше • Меняется восприятие информации: мы меньше читаем и больше смотрим картинки • Идеи проще донести до аудитории + более объективная картинка • Неразборчивые ряды цифр превращаются в четкую картинку
- 5. Журналистикой данных всерьез занимается только несколько изданий
- 7. Что делает Zeit Online? • Приводит интересные примеры визуализаций из других источников • Объясняет, как создавались собственные визуализации и расследования
- 8. От простых графиков, созданных в datawrapper.com... http://blog.zeit.de/open-data/2013/05/07/statistik-ifg- kuenstlersozialkasse/
- 9. ...и word louds, созданных в Wordle.com http://blog.zeit.de/open- data/2013/11/27/koalitionsvertraege-woerter-
- 10. До более сложных проектов с участием программистов http://www.zeit.de/politik/deutschland/2013- 09/twitter-monitor Мониторинг Твиттера во время выборов
- 11. Что здесь показано? • Анализ 10000 важнейших аккаунтов по количеству пользователей, упоминаний и активности: какие темы предвыборной кампании волнуют пользователей Твиттера? • Взяли самые популярные хэштеги • Разбили по категориям: упомянули пользователи, медиа, политики, обществен ные организации
- 13. Что здесь показано? • Результаты деятельности Бундестага и отдельных парламентариев • Всего журналисты загрузили с сайта dip.bundestag.de почти 156 000 различных видов деятельности (категории: речь, устное замечание, групповая инициатива, вопрос правительству и ответ правительства) • Каждой категории присвоили свой цвет: видно, какой политик из какой партии чем занимался
- 14. Но и у Zeit бывают непонятные визуализации http://blog.zeit.de/open- data/2013/07/11/dispozinsen/
- 15. Что тут не так? • Цифры на карте нельзя быстро сравнить, непонятно, кто лучше, кто хуже. • Создается видимость общей картины, но на самом деле отсутствует прозрачность.
- 17. Что делает Spiegel.de? • Публикует собственные проекты • Показывает ошибки в официальной статистике
- 20. Berliner Morgenpost: карта выборов в Берлине 2011 2013
- 21. Задействовали программиста – получили результат быстрее и лучше -> European Newspaper Award http://berlinwahlkarte2013.morgenpost.de/index.html
- 22. Süddeutsche Zeitung: создают досье по темам http://www.sueddeutsche.de/thema/Bahn- Versp%C3%A4tungen
- 23. DataGraph
- 24. Атлас Европы
- 25. Раскрытие беспрецедентного уклонения от налогов Подробности: http://goo.gl/ln7FIu
- 28. Что здесь показано? • Факты об образовании во всем мире • Фокус на нескольких интересных фактах и корреляциях (грамотность по регионам, грамотность по странам/ по полу, запись в учебные заведения, расходы на образование vs. расходы на военный бюджет) • Дизайнер не только показывает, но и объясняет данные и рассказывает историю
- 31. «Швейцария с высоты птичьего полета» http://work.interactivethings.com/nzz-swiss- maps/index.html
- 32. Короткие информативные карты, выхватывающие фрагменты из жизни страны
- 33. Кто делает эти проекты? • В Швейцарии работает агентство Interactive Things (http://interactivethings.com/) • В Германии есть независимые информационные дизайнеры и агентства (Opendata City, Golden Section Infographics) • Редакции пока редко берут в штат программистов (исключение – Berliner Morgenpost)
- 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 или сохранить как картинку • Параллельно существует проект по объяснению данных при помощи этого инструмента
- 49. Но и тут красота подачи часто идет вразрез с функциональностью
- 51. Что здесь показано? • Визуализация демографических данных: как развивается население в различных странах мира в историческом контексте • Популяризация общедоступных фактов при помощи визуальной подачи информации • Gapminder – это программа, которую можно бесплатно загрузить и использовать для собственных презентаций (источники: данные международных организаций World Bank, OECD, etc)
- 52. Альтернативный проект на основе данных Gapminder (Мориц Штефанер) http://moritz.stefaner.eu/projects/remixing-rosling/
- 55. Визуализация бизнес-аналитики и больших данных
- 56. Splunk
- 58. Tableau Software
- 59. Типы визуализаций Источник: Andy Kirk, „Data Visualization: a successful design process“
- 60. „Разные формы визуализации по- разному отвечают на разные вопросы“ Amanda Cox, New York Times
- 62. Dot plot
- 63. Bar chart
- 64. Floating bar / Gantt chart
- 65. Гистограмма
- 66. Slopegraph
- 68. Glyph chart: форма (цветок, etc)
- 69. Sankey diagram
- 70. Word cloud
- 71. Показываем иерархии и отношение частей к целому
- 72. Pie chart
- 74. Square pie
- 75. Tree map
- 77. Bubble hierarchy
- 78. Tree hierarchy
- 80. Line chart
- 81. Sparklines
- 82. Area chart
- 83. Horizon chart
- 87. Barcode chart
- 88. Flow map
- 90. Scatter plot
- 91. Bubble plot
- 92. Heatmap
- 93. Parallel sets
- 94. Radial network (chord diagram)
- 95. Network diagram
- 97. Карты и их подвиды
- 103. «Основная задача инфографика – это не просто быть красивой и приятной на вид. В первую очередь инфографика должна быть понятна, а уж потом красива. Красота должна выражаться через изысканную функциональность». Альберто Кайро „The Functional Art“
- 104. Собственный опыт: попытка внедрить визуальный подход в Focus Online
- 106. Берем данные World Bank, импортиру ем в DataWrapper – и показываем, что министр не врет
- 109. Рейтинг немецких футболистов в соцсетях (среди 200 самых дорогих игроков) http://goo.gl/4IGWtQ
- 114. Slope graph
- 115. Создавать собственные визуализации гораздо проще, чем кажется
- 116. Альберто Кайро (Epoca) «Визуализация происходит не на странице газеты и не на экране. Она происходит у вас в голове».
- 117. • Хорошая инфографика представляет информацию и позволяет пользователям ее исследовать. • Визуализации должны не упрощать суть, а объяснять ее, указывать на тенденции, раскрывать структуры и делать невидимое видимым. • Создание визуализаций не отличается от создания журналистских текстов. Дизайнер (журналист) кодирует информацию, зритель (читатель) декодирует ее.
- 118. Создаем повествование • Сначала общая картина, потом отдельные подробности и фильтрация, лишь затем дополнительные детали
- 119. Создать визуализацию несложно, если: - понимать правила восприятия информации - иметь четкое представление о том, что вы хотите показать (= журналистский тезис)
- 121. • Мозг лучше воспринимает различия в цвете, чем различия в форме
- 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. Развивайте визуальное и аналитическое мышление!
- 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 отвечает за визуальное восприятие информации (теории коммуникаций, теории цвета, human- computer interaction) • Communicator отвечает за взаимодействие между клиентом и исполнителями и за решение вопросов в команде • Менеджер проекта отвечает за развитие проекта и за доведение его до логического завершения
- 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