Visualization in Europe: School of Open Data in Moscow
-
Upload
natalia-karbasova -
Category
Data & Analytics
-
view
155 -
download
2
description
Transcript of Visualization in Europe: School of Open Data in Moscow
Визуализация данных в Европе
Кто, с кем, как и зачем – и как начать создавать визуализации
самостоятельно
Наталья Карбасова
О чем мы будем говорить?
1. Визуализация в Европе2. Основные типы визуализаций и
распространенные ошибки3. Мастер-класс: Как создать собственную
визуализацию
Зачем нужна визуализация данных?
• Информации все больше• Времени все меньше• Меняется восприятие информации: мы
меньше читаем и больше смотрим картинки• Идеи проще донести до аудитории + более
объективная картинка• Неразборчивые ряды цифр превращаются в
четкую картинку
Визуализация в европейской журналистике
Журналистикой данных всерьез занимается только несколько
изданий
Zeit Onlineblog.zeit.de/open-data/
Что делает Zeit Online?
• Приводит интересные примеры визуализаций из других источников
• Объясняет, как создавались собственные визуализации и расследования
От простых графиков, созданных в datawrapper.com...
http://blog.zeit.de/open-data/2013/05/07/statistik-ifg-kuenstlersozialkasse/
...и word clouds, созданных в Wordle.com
http://blog.zeit.de/open-data/2013/11/27/koalitionsvertraege-woerter-haeufigkeit/
До более сложных проектов с участием программистов
http://www.zeit.de/politik/deutschland/2013-09/twitter-monitor
Мониторинг Твиттера во время
выборов
Что здесь показано?
• Анализ 10000 важнейших аккаунтов по количеству пользователей, упоминаний и активности: какие темы предвыборной кампании волнуют пользователей Твиттера?
• Взяли самые популярные хэштеги• Разбили по категориям: упомянули
пользователи, медиа, политики, общественные организации
http://www.zeit.de/politik/deutschland/abgeordnetenbilanz/?partei=-&ansicht=ml&kategorie=5
Что здесь показано?
• Результаты деятельности Бундестага и отдельных парламентариев
• Всего журналисты загрузили с сайта dip.bundestag.de почти 156 000 различных видов деятельности (категории: речь, устное замечание, групповая инициатива, вопрос правительству и ответ правительства)
• Каждой категории присвоили свой цвет: видно, какой политик из какой партии чем занимался
Но и у Zeit бывают непонятные визуализации
http://blog.zeit.de/open-data/2013/07/11/dispozinsen/
Что тут не так?
• Цифры на карте нельзя быстро сравнить, непонятно, кто лучше, кто хуже.
• Создается видимость общей картины, но на самом деле отсутствует прозрачность.
Spiegel.de: Блог Datenlese
http://www.spiegel.de/thema/daten/
Что делает Spiegel.de?
• Публикует собственные проекты• Показывает ошибки в официальной
статистике
Перепись населения
http://www.spiegel.de/politik/deutschland/interaktive-karte-einwohnerzahlen-zensus-2011-gewinner-verlierer-a-914393.html
Интерактивные визуализации
http://www.spiegel.de/politik/deutschland/interaktive-grafik-das-ist-merkels-neue-regierung-a-928664.html
Berliner Morgenpost: карта выборов в Берлине
2011 2013
Задействовали программиста – получили результат быстрее и лучше -> European Newspaper Award
http://berlinwahlkarte2013.morgenpost.de/index.html
Süddeutsche Zeitung: создают досье по темам
http://www.sueddeutsche.de/thema/Bahn-Versp%C3%A4tungen
DataGraph
Атлас Европы
Раскрытие беспрецедентного уклонения от налогов
Подробности: http://goo.gl/ln7FIu
„Немецкая Волна“
http://visualdata.dw.de/specials/bildung/en/index.html
Что здесь показано?
• Факты об образовании во всем мире• Фокус на нескольких интересных фактах и
корреляциях (грамотность по регионам, грамотность по странам/ по полу, запись в учебные заведения, расходы на образование vs. расходы на военный бюджет)
• Дизайнер не только показывает, но и объясняет данные и рассказывает историю
Neue Zürcher Zeitung
«Швейцария с высоты птичьего полета»
http://work.interactivethings.com/nzz-swiss-maps/index.html
Короткие информативные карты, выхватывающие фрагменты из жизни страны
Кто делает эти проекты?
• В Швейцарии работает агентство Interactive Things (http://interactivethings.com/)
• В Германии есть независимые информационные дизайнеры и агентства (Opendata City, Golden Section Infographics)
• Редакции пока редко берут в штат программистов (исключение – Berliner Morgenpost)
Чрезмерное использование bubble charts
Проблема с «кружочками»
• Bubble Charts используются для сравнения величин, а надо – для общей картинки
• Слишком много «красоты» и мало информации
Bubble problem
• Человеческий мозг плохо высчитывает площади поверхностей. Он гораздо лучше умеет сравнивать отельные параметры, такие как высоту или длину.
• Читатели сравнивают не площадь, а высоту диаграммы
Financial Times
Handelsblatt
Проблемные инфографики в прессеFinancial Times
Можно использовать для общей картины
http://elections.nytimes.com/2012/results/president
Визуализации в других сферах
OECD Better Life Index
http://www.oecdbetterlifeindex.org/
Что здесь показано?
• Сравнение основных факторов, влияющих на восприятие качества жизни в странах ОБСЕ
• Каждый цветок = страна• Каждый лепесток = один из 11 факторов• Длина = балл страны по этой теме• Ширина = важность темы для конкретного
пользователя. • Пользователь сам настраивает рейтинг• Хороший баланс между дизайном и практичностью
Альтернативы в процессе разработки визуализации
http://vimeo.com/24609043#
Кто это сделал?
• Мориц Штефанер (Moritz Stefaner)
• Информационный дизайнер, фрилансер
• moritz.stefaner.eu
GED Viz (Global Economic Dynamics)
• www.ged-project.de/viz/ • Инструмент и проект по визуализации
экономических данных от Bertelsmann• Результаты можно экспортировать в виде
iframe или сохранить как картинку• Параллельно существует проект по
объяснению данных при помощи этого инструмента
www.ged-project.de/shorts
Но и тут красота подачи часто идет вразрез с функциональностью
Ханс Рослинг, Gapminder
http://www.gapminder.org/videos/the-river-of-myths/
Что здесь показано?
• Визуализация демографических данных: как развивается население в различных странах мира в историческом контексте
• Популяризация общедоступных фактов при помощи визуальной подачи информации
• Gapminder – это программа, которую можно бесплатно загрузить и использовать для собственных презентаций (источники: данные международных организаций World Bank, OECD, etc)
Альтернативный проект на основе данных Gapminder (Мориц Штефанер)
http://moritz.stefaner.eu/projects/remixing-rosling/
«Литературный организм» Stefanie Posavec
http://itsbeenreal.co.uk/
Визуализация бизнес-аналитикии больших данных
Splunk
Tableau Software
Типы визуализаций
Источник: Andy Kirk, „Data Visualization: a successful design process“
„Разные формы визуализации по-разному отвечают на разные вопросы“
Amanda Cox, New York Times
Сравниваем категории
Dot plot
Bar chart
Floating bar / Gantt chart
Гистограмма
Slopegraph
Radial chart
http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states
Glyph chart: форма (цветок, etc)
Sankey diagram
Word cloud
Показываем иерархии и отношение частей к целому
Pie chart
Stacked bar chart
Square pie
Tree map
Circle packing diagram
Bubble hierarchy
Tree hierarchy
Показываем изменения во времени
Line chart
Sparklines
Area chart
Horizon chart
Stacked area chart
Stream graph
http://visualization.geblogs.com/visualization/germanenergy/
Candlestick chart
Barcode chart
Flow map
Показываем связи и взаимоотношения
Scatter plot
Bubble plot
Heatmap
Parallel sets
Radial network (chord diagram)
Network diagram
Визуализируем географические данные
Карты и их подвиды
«Основная задача инфографика – это не просто быть красивой и приятной на вид. В первую очередь инфографика должна быть понятна, а уж потом красива. Красота должна выражаться через изысканную функциональность».Альберто Кайро„The Functional Art“
Собственный опыт: попытка внедрить визуальный подход в Focus Online
Берем данные World Bank, импортируем в DataWrapper – и показываем, что министр не врет
Рекорд по использованию солнечной энергии
http://goo.gl/T3kRw1
Актуальные цифры + статистика (Datawrapper, Excel)
Рейтинг немецких футболистов в соцсетях (среди 200 самых дорогих игроков)
http://goo.gl/4IGWtQ
20 самых дорогих игроков
20 самых популярных игроков
Сколько стоят их фанаты?
Сортировка исходных данных
Slope graph
Создавать собственные визуализации гораздо проще,
чем кажется
Альберто Кайро (Epoca)
«Визуализация происходит не на странице газеты и не на экране. Она происходит у вас в голове».
• Хорошая инфографика представляет информацию и позволяет пользователям ее исследовать.
• Визуализации должны не упрощать суть, а объяснять ее, указывать на тенденции, раскрывать структуры и делать невидимое видимым.
• Создание визуализаций не отличается от создания журналистских текстов. Дизайнер (журналист) кодирует информацию, зритель (читатель) декодирует ее.
Создаем повествование
• Сначала общая картина, потом отдельные подробности и фильтрация, лишь затем дополнительные детали
Создать визуализацию несложно, если:
- понимать правила восприятия информации- иметь четкое представление о том, что вы хотите показать (= журналистский тезис)
Правила восприятия информации
• Мозг лучше воспринимает различия в цвете, чем различия в форме
Ориентация, цвет, форма
Близость расположения
• Объекты, расположенные рядом друг с другом, воспринимаются как одна группа
Схожесть
• Идентичные объекты воспринимаются как часть одной группы
Связанность
• Объекты, связанные при помощи графических средств, воспринимаются как часть одной группы
Собственный опыт: анализ службы попутчиков Mitfahrgelegenheit.de
Куда едут немцы 1 мая?
Исходные данные на сайте mitfahrgelegenheit.de
Как извлечь?
• Google Spreadsheets: =importHTML• Расширение Google Scraper• Python Scraper (ScraperWiki)• Outwit Hub!
OutWit Hub
Дальнейшие шаги
• Очистка данных, экспорт в Excel/ Google Fusion Tables
• Сортировка и фильтрация• Определение формата и ограничений
(только 50 самых населенных городов, визуальная часть)
Сортировка
Результат
Инструменты
• 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
Если вам не хватает технических знаний, есть два выхода:
• Снизить собственный уровень ожиданий и создать базовую визуализацию
• Найти профессионалов, которые сделают сложный продукт на основе вашей идеи
Что нужно изучить
• Принципы восприятия и организации информации (Gestalt School of Psychology/ Gestalt laws), информационный дизайн
• Основы статистики («Я верю только той статистике, которую сам сфальсифицировал») – стандартное отклонение, медиан, модус, погрешность
• Основы графического дизайна и картографии
Развивайте визуальное и аналитическое мышление!
Как создавать собственные визуализации?
С чего начать?
• Изучайте и критикуйте чужие работы:– конкурсы визуализаций: visualizing.org,
infobeautyawards.com– блоги– Дата-блоги онлайн-СМИ
• Придумывайте, что бы вы сделали лучше• Попытайтесь сделать лучше
Подходы
• Есть данные –> ищем историю
• Есть история -> ищем подтверждение в данных
Основные шаги при создании визуализаций
• Создание наброска/ концепции• Поиск и подготовка данных• Анализ данных/ визуализация
Создание наброска
Поиск и подготовка данных
Поиск и подготовка данных – самый трудозатратный этап при
создании визуализации
Поиск и подготовка данных (1)1) Находим данные (данные уже есть в читаемом формате – Excel, csv, etc/ API/ скрейпинг/ извлечение из PDF). Подробнее: ЬЕГТИН2) Изучаем данные: насколько они соответствуют нашим целям? Просматриваем, фильтруем, сортируем (Excel, Tableau, Google Refine). – Подходят ли нам данные? – Присутствуют ли все необходимые категории?– Подходящий временной промежуток?– Определяем категории данных
Поиск и подготовка данных (2)
3) Подчищаем данные: убираем дубликаты, приводим названия к общему формату (Frankruft – Frankfurt-am-Main – Frankfurt/Main)4) Трансформируем данные для дальнейшего анализа:
- Извлекаем отдельные переменные (год из даты)- Совмещаем переменные (полное имя из двух ячеек с
именем и фамилией)- Считаем при необходимости относительные числа
(проценты)- Убираем то, что не собираемся использовать
Поиск и подготовка данных (3)
5) Консолидация данных: добавляем дополнительные слои данных6) Визуальный анализ данных:
- Изучаем данные и представляем их визуально перед тем, как создавать конечный продукт
- Сравнения и пропорции (сравниваем со средними значениями, стандартными отклонениями, прогнозами)
• Отфильтровываем сигнал от шума: берем только то, что действительно важно и из чего мы можем создать историю.
• Вот почему важно понимать, что именно вы хотите показать и что хотите этим сказать
Поиск и подготовка данных (4)
Командная работа
Распределение ролей в команде:• Инициатор (стратег)• Data scientist/ data miner должен находить, извлекать, обрабатывать
и подготавливать данные (статистический и математический анализ данных)
• Журналист рассказывает историю (основные тезисы и углы подачи)• Computer scientist претворяет проект в жизнь (программирование)• Дизайнер работает в паре с программистом• Cognitive scientist отвечает за визуальное восприятие информации
(теории коммуникаций, теории цвета, human-computer interaction)• Communicator отвечает за взаимодействие между клиентом и
исполнителями и за решение вопросов в команде• Менеджер проекта отвечает за развитие проекта и за доведение его
до логического завершения
Факторы и ограничения
Какие факторы влияют на создание визуализации?
• Цель (личные проекты, собственные инициативы для кого-то, заказы на конкретную тему с конкретными цифрами)
• Временные рамки (умение распределять время и управлять проектами)
• Бюджет• Давление со стороны клиента/ коллег • Формат (статическая или интерактивная визуализация? Для
интернета, планшетов или смартфонов? Постер или полстраницы в журнале? Видеоанимация? Одиночный проект или серия визуализаций?)
• Технические решения (Какие технические ресурсы есть в распоряжении? Только бесплатные сервисы или платные профессиональные программы? Техническая инфраструктура/ собственные сервисы? Какие браузеры должны отображать визуализацию? Базы данных?)
Списки и ссылки
Их нужно знать: дизайнеры и журналисты
• Грегор Айш (driven-by-data.net)• Мориц Штефанер (stefaner.eu)• Ян Швохоу (schwochow.de)• Ян Тульп (tulpinteractive.com)• Кристофер Варноу (christopherwarnow.com)• Себастиан Мондиаль (@djournalismus)• Юлиус Трегер (@juliustroeger)• Мирко Лоренц (mirkolorenz.com)
Что почитать: книги
• 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“
Что почитать: сайты и блоги
• 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/
Списки ресурсов и инструментов
• http://www.visualisingdata.com/index.php/resources/
• http://mediakar.org/tools/visualisation/• http://datavisualization.ch/tools/• http://te-st.ru/tools/
Инструменты: графики и статистика
• Datawrapper• Tableau public• Google Chart Tools: • Wordle • Excel• Google Fusion Tables / Pivot Tables• R: www.r-project.org/
Инструменты: карты
• 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/)