Всем привет!

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

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

В России область визуализации данных (в отличие от того же дизайна) развита не очень хорошо. Хочется начать это менять. Присоединяйтесь!

​​Начать я хочу с примера, который немного рифмуется с текущими событиями.

В 1854 году в центральном Лондоне была вспышка холеры. Британский врач, доктор Джон Сноу (который очень много знал и даже стал основоположником эпидемиологии) исследовал эту вспышку и придумал нанести на карту точки в местах домов, где умирали люди. На получившейся картинке стало видно, что все смерти сконцентрированы на одной улице (Broad Street) вокруг одного колодца, снабжавшего водой весь район (обозначен крестиком посередине улицы). Когда колодец закрыли, эпидемия пошла на спад и вскоре закончилась.

#пример

​​Эдвард Тафти и его правила создания визуализаций

История и картинка выше взяты из книги Эдварда Тафти "The Visual Display of Quantitative Information". Эта книга — это, пожалуй, главная базовая книга в мире по визуализациям данных.

Эдвард Тафти — американский статистик и профессор Йельского университета. Он известен своими работами по информационному дизайну, придуманному им графику спарклайну (такие маленькие линии, рисуемые сразу в тексте, часто используются для отображения изменения курсов акций) и выпущенной серии книг. Первая редакция первой книги (именно её я упомянула выше) вышла ещё в 1983 году. Я покупала в 2013 году на американском Амазоне уже второе издание 2001 года.

Главное, что продвигал в своих книгах Тафти — чистота и честность отображения информации. На первом месте в любой визуализии должны быть данные, а не дизайн или интерпретация. Изучив множество примеров хороших и плохих графиков, Тафти придумал понятие "data-ink ratio", то есть коэффициент соотношения данных и чернил. Он вычисляется как отношение чернил, используемых для данных, ко всем чернилам графика.

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

#книга #теория

​​Визуализации сортировок

Иногда мне кажется, что сортировки — это такая базовая тема, которую все рано или поздно захотят (некоторые даже попробуют) визуализировать. Там есть и алгоритмы, и простор для дизайна, и динамика.

А вот три ссылки на очень классные визуализации, которые мне совершенно не надоедает рассматривать:

1. sorting.at — пошаговое сравнение разных алгоритмов, считает количество необходимых шагов.

2. Часть большой статьи Майка Бостока (автора библиотеки d3.js) про алгоритмы. Мне здесь очень нравится идея с сортировкой наклонённых палочек.

3. Видео сортировок в закрашенном разноцветными плитками квадрате с достаточно подробными объяснениями.

#алгоритмы #пример

Выбор цвета

Когда-то я работала в команде, где очень любили использовать радужную палитру по умолчанию во всех графиках. В тот период я уже начала изучать основы дизайна и интересовалась теорией цвета. Однажды я наткнулась на серию статей Синтии Брюэр, где она рассказывала про подбор правильных палитр для разных типов данных в картографии.

Так я узнала, что радужная палитра не подходит ни в одной визуализации. У неё есть две основные проблемы:

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

2. Нет установленного порядка цветов, они зациклены. Если кодировать диапазон значений, то непонятно, какой цвет означает минимум, а какой — максимум.

В любом цвете есть три составляющих: оттенок (hue), насыщенность (saturation) и значение (value). Эти параметры собираются в цветовую модель HSV. Иногда вместо насыщенности цвета используют параметр светлоты (lightness), это модель HSL. Модель HSV более интуитивно описывает цвет, чем известная всем RGB. Не «сколько в этом цвете красного или зелёного?», а «какой у этого цвета оттенок, насколько он насыщенный?».

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

1. Стараюсь учитывать стандартные стереотипы. Синий цвет — холодный, красный — горячий, оттенки голубого и синего — глубина, оттенки коричневого — высота, зелёный — успех, красный — ошибка и т.д.

2. Изучаю данные и сам график. Если данные — диапазон значений одного типа, то можно зафиксировать оттенок. Если данные — разные категории, то можно наоборот менять только оттенок.

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

А чтобы каждый раз не придумывать палитры самостоятелько, их можно подсматривать в сервисе Color Brewer.

#теория #цвет