Спрашивают сотрудники Института проблем безопасности и анализа информации:

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

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

Закодируем каждое значение цветом по шкале аномальности:

Усреднив аномальные отклонения в регионе за год, создадим карту аномалий:

Яркое пятно Челябинской области и относительно бледные Тюменская область и Ненецкий АО

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

Живой прототип: https://cashflow.datalaboratory.ru/

При наведении курсора на столбцы диаграммы, общая карта аномалий меняется на карту месяца. Переключая фильтры, можно сравнивать ситуации по внесению (!) и выдаче, юридическим и физическим (!) лицам, резидентам и нерезидентам (!!!). Управляя фильтрами, мы можем выяснить, что летние пики в Челябинской области обусловленны выдачей наличных физическим лицам, резидентам РФ.

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

Спасибо Серёже Долинину и Диме Бибикову за помощь в работе над визуализацией.

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Спрашивает Дмитрий Ачкасов:

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

Живой график и код на bl.ocks

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

Ещё один способ «свернуть» временное измерение — «червячки» Морица Штефанера. Размер кружков изменяется со временем и создаёт иллюзию движения:

А какие способы показать временное измерение, не используя отдельной шкалы, знаете вы?

Спрашивает Александр Семёнов:

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

Во время зимовки на Бали мы сделали три проекта на D3. О расходограмме я уже писала в блоге. Второй проект — визуализация результатов исследования кишечных бактерий, которую мы реализовали совместно с группой учёных из НИИ ФХМ. Третий проект — диаграмма рынка облигаций для акул банковского дела.

Создание работающей интерактивной визуализации в каждом случае занимало 2-3 дня. Первый результат служил плацдармом для дальнейших экспериментов, для испытания новых идей и гипотез. За пару недель мы получали полезный работоспособный инструмент, который продолжали совершенствовать. D3 — это не просто отличная визуализационная библиотека, это удобная среда для исследования данных и поиска оптимальных форматов отображения.

Что касается презентаций, вспомните знаменитое выступление Ганса Рослинга с ожившими диаграммами «The best stats you’ve ever seen». Скучные статические слайды скоро канут в лету, будущее презентаций и годовых отчётов — за интерактивными графиками.

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

Добавлено позже. А вот ещё замечательная вводная статья о D3.js Димы Тихвинского, веб-технолога лаборатории и преподавателя курса.

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Спрашивает Алексей Червяков:

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

Алексей, суммируя данные по месяцам, вы оставляете за кадром весь сок — отдельные транзакции, которые позволяют подмечать закономерности и делать выводы. На своей расходограмме я собрала все траты по одной из банковских карт с 1 января 2012 года по настоящее время.

Транзакции сгруппированы по неделям, при наведении показан размер, категория и конкретный товар (если его удалось вспомнить). Расходы в иностранной валюте показаны флагами стран внизу графика. Траты фильтруются по категориям:

Какие знания можно извлечь из этой диаграммы? Да какие угодно. В 2013 году я тратила больше, чем в 2012, причём в основном снимала наличные. В марте 2013 карту скомпрометировали и до возвращения из Таиланда в Москву я ей не пользовалась. Основные статьи расходов — транспорт и еда (супермаркеты и рестораны). В 2012 году я покупала продукты в «Перекрёстке» и «Азбуке вкуса» и привозила из дьютифри дорогой алкоголь, в 2013 перешла на «Алые паруса» (переехала) и спорттовары (увлеклась бегом). В Таиланде, Хорватии и Черногории я почти не использовала карту, в Скандинавии, Штатах и ЮАР — наоборот. Неделя в Нью-йорке поставила абсолютный рекорд по развлекательным тратам. В Финляндии и Норвегии я покупала платья Marimekko и COS — это мои любимые скандинавские марки.

Расходы рассказывают интересную историю. Жаль только, что не все данные доступны в удобном для визуализации формате.

Живая расходограмма: https://budget.datalaboratory.ru/

Спасибо Диме Тихвинскому за помощь в работе над визуализацией.

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

На прошедшем курсе мой коллега Дима Тихвинский, который обучал ребят основам D3.js, между делом прочитал неожиданно крутую лекцию про цвета. Для меня выбор цветов для визуализации всегда был головной болью, поэтому я с радостью поделюсь димиными секретами и отвечу на свой собственный вопрос:

Самое полезное открытие — набор палитр «Колорбрюер». Он поддерживается в D3.js и часто используется в визуализациях, созданных с помощью этой библиотеки. В набор входят приятные монохромные и разноцветные палитры для отображения качественных и количественных параметров. Для числовых массивов, расходящихся в обе стороны от нуля, подобраны градиенты с белым цветом посередине шкалы. Майк Босток собрал все палитры вместе:

Интересно было узнать о преимуществах цветового пространства HCL для визуализации данных и сравнить между собой градиенты в разных пространствах:

Ещё один полезный инструмент — HCL-пипетка.

Дима рассказал о проблеме искуственных палитр, советовал почитать психологический трактат Макса Люшера «Сигналы личности» и «Искусство цвета» Иоханнеса Иттена о закономерностях цветовой гармонии и конструирования. И если психологические теории цвета лично у меня не вызывают доверия, то вторая книга точно достойна внимания.

Делитесь в комментариях своими «цветовыми» рецептами!