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

Интервью с министром экономики Чили

http://goo.gl/oXtv7c

Берем данные 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/)

Как со мной связаться

Наталья Карбасоваmediakar.org

Twitter: @karbasakarbasova@ymail.com