Лекция Тани Мисютиной о визуализации данных

Чтобы поговорить о том, какую задачу я вижу главной при визуализации данных, я покажу несколько примеров.

Эта, на первый взгляд, невзрачная и непривлекательная карта Лондона, является фантастическим примером визуализации данных, который в прямом смысле спас жизни людей. С ней связана интереснейшая история. В 1840-х г. в Лондоне началась эпидемия холеры, доктор Джон Сноу боролся с ней, анализируя данные о заболевших и умерших от холеры пациентах. (Уточнение: Доктор Сноу начал свои исследования в 1840 годах, но история относится к вспышке холеры в 1854 г.)

В то время была распространена гипотеза, что холера передаётся воздушно-капельным путем (через «плохой» воздух), но доктор Сноу осмелился выдвинуть другую гипотезу: по его мнению, холера распространялась через заражённую воду.

На карте показаны улицы Лондона, чёрными столбиками отмечено количество смертей в каждом доме. На карте также показаны водозаборные колонки (PUMP). Джон Сноу обратил внимание, что большинство смертей сосредоточено у колонки на Броад-стрит. Но нашлось и несколько случаев на значительном удалении от этой колонки, более того, в непосредственной близости от другой. Доктор Сноу начал кропотливое исследование этих исключений. В ходе исследования он обнаружил, что все случаи связаны с колонкой на Броад-стрит тем или иным образом, все пострадавшие пользовались ей. Исключения ещё больше убедили доктора Сноу в правильности новой гипотезы. Это интереснейшая история в духе Шерлока Холмса, про неё есть статья на Википедии и подробный рассказ в книге Эдварда Тафти «Visual Explanations» (стр. 27-37).

Эта замечательная визуализация не просто помогла сформулировать верную гипотезу, но и стала красноречивым доказательством, которое убедило мэра Лондона закрыть злополучную колонку. После этого эпидемия пошла на спад. На Броад-стрит сейчас стоит памятник Джону Сноу, который представляет собой закрытую водозаборную колонку — без рычага.

Вот такой замечательный пример визуализации, которая спасла жизни людей.

Следующий пример визуализирует все землетрясения начиная с 1898 года. Яркость точки показывает интенсивность землетрясения.

Простая идея — собрать на одной картинке всю историю землетрясений — проявляет измерение, которое невозможно наблюдать в реальной жизни. На этой визуализации видна картина, недоступная глазу, которую нельзя увидеть со спутника или как-то ещё — за очагами землетрясений проступают очертания тектонических плит.

Ещё один пример визуализирует ураганы в необычной полярной проекции с центром в южном полюсе.

Здесь много вещей, на которые хочется обратить внимание. Например, на то, как неравномерно распределяются ураганы между западным и восточным полушарием. Или на пятиградусный пояс вокруг экватора, в котором ураганов нет, потому что, как я сегодня прочитала на Википедии, для их возникновения необходима сила Кориолиса. Эта сила закручивает ураганы в сторону полюса, а около экватора она слишком слаба.

Ещё одна аналогичная картинка показывает торнадо в Штатах. Почему в восточной части ураганов так много, а в западной почти нет? Есть мнение, что граница раздела проходит по скалистым горам, которые блокируют ветрам доступ на запад.

Не знаю, так это или нет, но представьте, что на уроках географии нам показывали бы такие картинки. Как это подталкивало бы к тому, чтобы задавать вопросы? Наглядно показанные данные пробуждают любопытство и желание придумать объяснение очевидным закономерностям.

Покажу несколько наших лабораторных работ. Одна из них — про анализ выделенных полос, который мы прошлым летом делали для департамента транспорта. Мой друг, который тогда работал в департаменте транспорта, пригласил меня поработать с огромным количеством данных, собранных о перемещении общественного транспорта по выделенным линиям. Когда я пришла, у ребят уже был интерфейс, с помощью которого они визуализировали эти данные.

Передвижение общественного транспорта по участкам выделенных полос было показано на карте. Можно было менять дату, переключать часы с 6 до 11 часов вечера и смотреть, как меняется картина со временем.

Мне показалось, что такая визуализация недостаточно хорошо показывает, что происходит. Поэтому в следующий раз, когда я пришла на встречу в департамент, я задала один-единственный вопрос: «Эффективны ли выделенные полосы?».

Они накопили данные об участках до и после открытия выделенных полос. В тот момент, когда мы начали работать, они смотрели на собранные данные уже около полугода, визуализации была готова, люди с ней работали. Но ответом на мой вопрос было гробовое молчание. Это подтвердило мои догадки, что визуализация недостаточно хорошо показывает картину происходящего. Я предложила доработать их существующий интерфейс, и вот, что у меня получилось.

Я дополнила карту вот такой диаграммой. По вертикали отложено время (от 6 до 23), по горизонтали каждый квадратик — это участок какой-нибудь выделенной полосы. Например, выделенный квадрат — это Ленинградка в 12 часов дня. Чтобы квадратики различать между собой, я придумала разделитель между двумя направлениями в каждом квадратике, наклон которого совпадает с направлением дороги на карте. Цветом показана скорость движения общественного транспорта в каждом направлении.

Я предложила посмотреть на ситуацию до и после появления выделенных полос в таком виде:

Получается, что если у нас есть возможность сравнить глобальную картину за весь день на всех участках выделенных полос, мы можем, во-первых, увидеть, как меняется загруженность на макроуровне, во-вторых, рассмотреть конкретные детали. Например, видно, что Ленинградка «из центра» как стояла, так и стоит.

Меня очень вдохновило то, с каким рвением ребята взялись за внедрение диаграммы. В невероятные для департамента транспорта сроки в две недели новый интерфейс был реализован и наполнен данными. После внедрения мы общались с аналитиками, которые на основе этой информации составляют прогнозы и разрабатывают предложения по улучшению транспортной ситуации. Приятно было смотреть на людей, которые впервые собственными глазами увидели данные, с которыми они постоянно работают.

Ещё один проект — это визуализация моих собственных расходов за 2 года по одной из банковских карт. Я вытащила все транзакции из интернет-банка, раскидала их по категориям, визуализировала на D3. Получилась такая штука:

Цветами здесь показаны категории: например, зелёным показаны наличные, темно-зелёный цвет — транспорт и т. д. Можно разделить траты по категориям:

Видно, что наличные и транспорт — это самые большие статьи расходов. На еду (супермаркеты и рестораны) деньги расходуются постоянно. Здесь не видно платы за квартиру и других оплат наличными.

Я решила снабдить «расходограмму» информацией, где конкретно тратились средства. Эту информацию легко получить на основе валюты расчётов. Получается небольшая история путешествий, зафиксированная на банковской карте. Например, видно, как сильно всё подпрыгнуло в Штатах.

Как использовать эту штуку — интересный вопрос, и на него может быть множество ответов. Главная задача этой визуализации — проявить данные, которые до этого были недоступны. Теперь картина расходов перед глазами, её можно окинуть взглядом. Что с ней делать дальше, на какие вопросы она отвечает и как может помочь, решает пользователь.

Собственно, это и есть та самая главная мысль, которой я сегодня хотела с вами поделиться.

Визуализация «проявляет»

Это очень подходящий, чёткий глагол про визуализацию — именно это она делает. Вы можете пройтись по спискам землетрясений на Википедии, но ваш мозг не в силах построить на их основе карту тектонических плит. Зато это под силу визуализации, она показывает скрытые от глаз измерения в оптимальном для восприятия виде.

После этого мы сами решаем, что с этой информацией делать, как её использовать и интерпретировать, какие делать выводы. Во всяком случае, у нас для этого есть основание.

Спасибо за внимание! Микролекция оставила много вопросов за кадром. Вы можете задать их прямо сейчас.

Вопросы и ответы

Тинькофф недавно опубликовал новую версию сайта и завизуализировал калькулятор кредитных вкладов. Как ты оцениваешь эту визуализацию?

Кредитный калькулятор — это не задача визуализации данных, там всё довольно примитивно, обычная столбиковая диаграмма. Человек не думает, вложить миллион или десять, он отталкивается от этой имеющейся суммы, он смотрит, сколько может в итоге получить при разных условиях.

В транспортной диаграмме у нас 2 плоских измерения (время и полосы), внутри квадратиков мы выделяем ещё одно измерение (направление движения), используем цвет для обозначения скорости. Никакой инструмент не используется ради красоты, потому что все следует одной задаче — показать данные. Такая расчётливость и экономность необходима для визуализации больших объёмов данных, но совсем не подходит для более простых задач.

Тогда назови 10 примеров постановки задач. С какими задачами к вам приходят?

Честно говоря, сама порой удивляюсь, с какими задачами к нам приходят. Например, ещё до Лаборатории данных, когда я работала проектировщиком интерфейсов, очень часто клиенты приходили со сложными данными. Даже в те времена стандартных графиков было недостаточно, всегда нужно было разобраться с данными, в чём суть, что клиенту важно увидеть, как это поможет им решать задачи бизнеса.

После возникновения лаборатории клиенты были самые разные. Например, была строительная компания, пожелавшая визуализировать продажи новостроек. Мы работаем с компанией, которая в России делает расшифровку генома и визуализирует ситуацию со здоровьем человека в наглядном и понятном виде.

Или, например, группа ученых из НИИ ФХМ, которым мы помогаем визуализировать результаты их экспериментов с кишечными бактериями. Много задач, связанных с финансами: графики продаж, отслеживание инвестиционных пакетов. Маркетинг, конечно, не отпускает нас, потому что задач по визуализации там очень много.

Расскажи о жизненном цикле проекта. С чего он начинается, как строится и где заканчивается?

Первый этап всегда характеризуется выуживанием максимума информации и определением сути работы. Мы погружаемся в предметную область и задаём открытые вопросы о задаче и целях, которые преследует визуализация. Это очень важный этап — половина пути к успеху.

Второй этап — это подбор (и иногда изобретение) форматов отображения данных. Собственно, за полгода работы Лаборатории, мы непрерывно что-то изобретаем. Вначале мне казалось, что нам очень везёт с задачами, что каждая из них настолько необычная, что нам приходится выдумывать новые форматы. Оказалось, что вообще все задачи такие. Если внимательно относиться к данным, всматриваться в каждое значение и стараться показать его оптимальным способом, то для каждой задачи найдётся свой наиболее подходящий и скорее всего уникальный формат.

А клиенту в каком формате работа отдается?

Если мы рисуем интерфейсы, то отдаём графические макеты, иногда сопровождаем их интерактивными прототипами визуализаций на D3. Если заказчику нужна готовая визуализация, то пишем код, загружаем данные, делаем полностью рабочий интерактивный блок. А дальше клиент его может выложить на сайт или внедрить в свою какую-то систему.

Расскажи про технологическую сторону процесса. Как большие данные из таблиц превращаются в картинку в браузере?

С такими вопросами я всех отправляю на сайт D3JS.org. Там множество форматов и готовых решений — бери и используй. Сама библиотека позволяет реализовывать какие угодно визуализации, но для этого нужно хоть немного уметь программировать.

Расскажи, пожалуйста, об алгоритме поиска решений

Идея рождается примерно так: ты изучаешь данные, извлекаешь всю необходимую информацию и пытаешься прочувствовать её, пропустить через себя. Почти все решения заложены в исходной задаче, в самих данных — поэтому я доверяю поиски интуиции. Не существует шаблона, по которому мы находим решения, результат в каждом случае индивидуален, слишком зависит от исходных данных.

Для решения задач необходим багаж подходов и приёмов. Например, я помню, что на такой-то карте я видела градиентные расплывчатые области, я могу применить этот приём для другой задачи — просто окажется, что он прекрасно подходит, хотя сама задача может быть совсем о другом. Без такой библиотеки знаний придётся постоянно изобретать велосипед, поиск решений будет идти очень медленно.

На нашем учебном курсе мы показываем участникам множество примеров, рассказываем, что к чему, учим ребят отличать хорошие примеры от плохих, пополнять свою внутреннюю библиотеку полезных приёмов и сочетать их между собой.

Пару раз в год Таня Мисютина проводит курс «Визуализация данных» в Москве.