Визуализируй это!

Как инструменты влияют на наше визуальное мышление

Я давно занимаюсь визуализациями и слежу за интересными примерами. И чем больше я их вижу, тем сильнее замечаю, что подавляющее большинство современных визуализаций использует довольно небольшой набор стандартных форм — bar chart, line chart, scatterplot, sankey, карты и ещё несколько знакомых типов.

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

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

И мне стало интересно: как так получилось, что при почти полной современной технической свободе визуальный язык данных оказался таким ограниченным? И ограничен ли он в реальности или это просто так кажется на первый взгляд?

Недавно я прочитала статью Why creativity matters in data visualisation, и одна из мыслей там была как раз про ограничения инструментов, которыми мы пользуемся.

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

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

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

Я сама хорошо замечаю это, когда работаю с D3 и Chart.js. D3 почти не ограничивает меня формой: я сначала концентрируюсь на данных и задаче и только потом собираю визуализацию из отдельных элементов. В Chart.js у меня получается наоборот — работа начинается с выбора конкретного типа графика и собирания его конфига.

Получается, что с одними и теми же данными я думаю по-разному в зависимости от того, какую библиотеку собираюсь использовать. С другой стороны, возможно, я путаю причину и следствие и просто выбираю Chart.js, когда мне уже всё понятно, а D3 — если впереди этап экспериментов.

В той статье, про которую я писала выше, автор предлагает по-старинке начинать работу не с библиотеки, а с обычного скетча на бумаге. С бумагой проще избавиться от навязчивого вопроса «а как это вообще реализовать?». Плюс неудачный скетч легко выбросить и нарисовать заново. С кодом это часто сложнее, хотя AI сейчас и позволяет прототипировать намного быстрее, чем раньше.

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

​​Замки мира

Нашла очень классную карту для любителей путешествий и истории.

https://thecastlemap.com

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

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

Карты Маршалловых островов

Месяц назад в основной экспозиции Лувра в Абу-Даби увидела один из самых классных примеров карты, которая на первый взгляд выглядит совсем не как карта.

Навигационные карты с Маршалловых островов сделаны из тонких веточек, ниток и ракушек. Это исторический способ местных навигаторов визуализировать море.

Ракушки обозначали острова, а линии — волны, течения и то, как океанская зыбь меняется при приближении к островам. Такая карта не столько показывала поверхность моря, сколько описывала его поведение.

Это очень крутой пример геовизуализации: хорошая карта не обязана быть похожей на карту в привычном нам смысле. Она должна помогать ориентироваться.

​​Как можно сделать перепись населения интересной

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

Эта статья — очень классное исследование именно такого случая. Она о том, как индийские власти однажды попытались превратить сухую государственную статистику в что-то более человечное и понятное.

Portraits of Population

В 1960–70-х среди главных мировых тем были перенаселение, нехватка ресурсов и планирование семьи. ООН даже объявила 1974-й World Population Year. Разные страны пытались справиться с этими проблемами по-разному. Именно так в Китае появилась политика одного ребёнка, а в Индии — кампании вроде принудительной стерилизации.

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

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

Авторы статьи нашли и собрали вместе почти 700 нарисованных визуализаций из индийских переписей населения 1971 и 1981 годов. Это практически портрет эпохи — мне было очень любопытно его рассматривать!

👉 https://diagramchasing.fun/2026/portraits-of-population#explorer

Я вылезла за лимит символов одного сообщения, поэтому оставшиеся две библиотеки отдельно.

⭐️ G2
• библиотека на основе грамматики графики
• 248 тысяч недельных скачиваний на npm
• 12.5 тысяч звёзд на github

Похожа на Vega-Lite по подходу, но больше заточена под прикладные графики для интерфейсов, аналитики и дашбордов.

Код выглядит просто, а графики красиво. Оказалось, что это часть одной большой китайской DataViz/AI экосистемы (с сайтом на китайском!).

const chart = new Chart({ container: 'container' });

chart
  .interval()
  .data(data)
  .encode('x', '...')
  .encode('y', '...');

chart.render();

⭐️ deck.gl
• GPU-ориентированный фреймворк
• 187 тысяч недельных скачиваний на npm
• 14.1 тысяч звёзд на github

Библиотека для работы с большими данными, работающая с декларативно описываемыми слоями.

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

new DeckGL({
  initialViewState: { ... },
  controller: true,
  layers: [
    new ScatterplotLayer({ data }),
  ],
});

Какие бывают библиотеки для визуализации данных

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

В итоге у меня получился список из восьми популярных библиотек — очень разных и по возможностям, и по подходу к графикам.

⭐️ D3.js
• низкоуровневый тулкит
• 9.7 млн недельных скачиваний на npm
• 113 тысяч звёзд на github

Набор инструментов для работы с данными и DOM/SVG элементами — позволяет собрать практически что угодно, но собирать придётся самостоятельно как сложный конструктор.

Самая используемая у меня библиотека. Сложно влиться, но зато можно покрыть любые хотелки.

🖇 Ссылки на мои туториалы по D3

const line = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y));

⭐️ Chart.js
• готовая библиотека графиков
• 9 млн недельных скачиваний на npm
• 67.3 тысяч звёзд на github

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

Очень люблю Chart.js для визуализаций без сложных кастомизаций (хотя они тоже возможны благодаря системе плагинов). За десяток-другой строк можно уже получить работающий на канвасе график.

new Chart(ctx, {
  type: 'bar',
  data: { ... },
  options: { ... },
});

⭐️ Apache ECharts
• конфигурационная библиотека графиков
• 2.3 млн недельных скачиваний на npm
• 66.1 тысяч звёзд на github

Большая и мощная система для интерактивных графиков и дашбордов с кучей встроенных типов, способная работать в том числе с большими объёмами данных.

Я работала с ECharts на одном проекте, мне понравилось. Похожа на Chart.js, но больше про корпоративные дашборды и системы аналитики.

const myChart = echarts.init(chartDom);

myChart.setOption({
  xAxis: { ... },
  yAxis: { ... },
  series: [{ ... }],
});

⭐️ Plotly.js
• высокоуровневая декларативная библиотека
• 970 тысяч недельных скачиваний на npm
• 18.2 тысяч звёзд на github

Похожа на Chart.js и ECharts, но заметно ближе к научным и аналитическим визуализациям: есть статистические графики, 3D и прочее нетривиальное.

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

const data = [{ x: [...], y: [...], type: 'bar' }];

Plotly.newPlot('chart', data);

⭐️ Observable Plot
• библиотека для быстрых графиков
• 146 тысяч недельных скачиваний на npm
• 5.2 тысяч звёзд на github

Хороша для быстрого исследования данных — простое API и сборка графика из отдельных заготовленных частей.

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

Plot.plot({
  marks: [
    Plot.barY(data, { x: 'category', y: 'value' }),
  ],
});

⭐️ Vega-Lite
• декларативная грамматика графики
• 414 тысяч недельных скачиваний на npm
• 5.3 тысяч звёзд на github

Инструмент, где графики описываются через JSON-структуру с данными, типами отображения и всеми преобразованиями.

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

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": { ... },
  "mark": "bar",
  "encoding": {
    "x": { ... },
    "y": { ... }
  }
}

​​London Underground Live

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

https://www.londonunderground.live

Очень интересно сделана: каждый поезд — это небольшая линия на карте, которая оставляет шлейф при движении. Данные берутся из открытого API транспорта Лондона, поэтому всё обновляется почти в реальном времени.

Кстати, лондонское метро — самое старое и одно из самых крупных в мире. И довольно противное.

Однажды, ещё в 2009 году, я из-за него чуть не опоздала на самолёт. Рано утром в воскресенье я ехала в аэропорт с двумя пересадками после ночных тусовок с друзьями — и совсем не была готова к тому, что в такое время поезда ходят раз в 10 минут в лучшем случае.

У меня сегодня для вас тематическая подборка про карты и геоданные!

🌍 Tiny World Map — лёгковесные (даже со всеми уровнями зума) тайлы для Leaflet, которые хранятся прямо на клиенте. Работают даже в офлайне, поддерживают зум и не требуют подгрузки с сервера.

📍Оказывается, что Foursquare всё ещё жив, и у него есть открытый API! Можно получить детальные данные о местах с фильтрами, координатами и временем работы.

🗺 Туториал по генерации ретро-карт городов средствами R. Наглядно, с кодом и визуализациями в духе старых схем метро или атласов 80-х.

🔍 Zoomable Wikipedia — экспериментальная попытка представить вики-страницы в виде практически бесконечного масштабируемого пространства.

🧩 AnyMap — пятнашки из карт. Можно выбрать любой город и его карта превратится в небольшой паззл, который предстоит собрать.

У меня тут случился довольно длинный перерыв.

Последние полгода было много проектов, которые съели почти всё время. Плюс двухмесячная поездка по Азии и США — в таком режиме что-то осмысленное писать совершенно не получалось.

Но за эти месяцы накопилось много нового и интересного: ссылки, статьи, просто идеи и мысли. Кажется, пора возвращаться.

Попробую снова войти в ритм. Многого не обещаю — если получится делать 1–2 поста в неделю, это уже будет отлично.

Среди прочего сейчас пишу несколько больших текстов. Например, сравнение разных библиотек для визуализаций (вроде D3 и Chart.js).

Stay tuned — попробую тут всё немного оживить ❤️

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

Как это сделано: из открытого набора LAION (около 100 млн научных и исследовательских текстов, здесь — небольшой срез) извлекли краткие выжимки, перевели статьи в векторные представления, спроецировали в 2D и сгруппировали по близости.

🔗 Демо: https://laion.inference.net/embeddings

🛠️ Код: https://github.com/context-labs/laion-data-explorer (React + D3)

Осталась последняя неделя приёма работ на конкурс!

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

Дедлайн подачи работ: 30 октября.

🎨 А уже завтра пройдёт новый эфир, посвящённый номинации «Рисунок»! Ссылка на него будет в канале @data2kids.

Участников ждут подарки (iPad, LEGO и многое другое), гайды и памятные призы. Если вы ещё не присоединились — сейчас самое время.

Участвовать!

✨ Детский конкурс визуализаций ✨

Коллеги придумали очень классную инициативу — конкурс для детей 6–11 лет! Можно дать волю творчеству и придумать любую визуализацию данных: нарисовать на бумаге, собрать из игрушек или конфет или создать на компьютере.

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

Если у вас есть дети, племянники или младшие братья и сёстры — покажите им конкурс. Отличный повод провести время вместе и сделать что-то по-настоящему необычное 🧡

👉 Регистрация

💬 Канал: @data2kids

Вот как итоговая палитра выглядит внутри стайлгайда.

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

​​Как я собираю палитры для проектов

Вчера я прочитала пост Ромы Бунина про сервис для создания цветовых палитр и спонтанно решила рассказать, как я сама обычно составляю палитры для дизайн-систем, над которыми работаю.

Сразу уточню: это мини-гайд именно для дизайн-систем. Для графиков он подходит не всегда — разве что в случае последовательных палитр.

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

Первое, что я делаю, — выписываю все цвета из макета и по возможности сокращаю их количество. Шаг суперважный! Однажды мне достался дизайн с шестнадцатью (!) разными оттенками серого, которые практически не различались визуально.

Моё основное правило: полная палитра каждого цвета должна содержать не больше 11–13 шагов. И это при том, что первый шаг — белый, а последний — чёрный. Этой схемы придерживаются многие CSS-фреймворки, например Tailwind или Material UI.

Для этого я чаще всего использую Palette App. Там я создаю 11 шагов будущей палитры, расставляю имеющиеся цвета от самого тёмного к самому светлому, стараясь сохранить равномерный шаг, и затем заполняю пустые промежутки, экстраполируя значения hue, saturation и lightness соседних цветов.

В итоге получается что-то вроде такого:

lava: {
  900: "#821C0C",
  800: "#A11E0B",
  700: "#CC2402",
  600: "#FF3800",
  500: "#FF530A",
  400: "#FF7832",
  300: "#FFA86D",
  200: "#FFCCA5",
  100: "#FFE8D3",
},

Это моя база для конкретного цвета. В саму дизайн-систему он попадает уже трансформированным. Здесь я позаимствовала подход из Material UI: я использую не физические названия, а семантические. Так понятнее и нагляднее при последующем использовании.

Например, цвет lava в конфиге Tailwind у меня превращается в:

"primary": {
  DEFAULT: palettes.lava[600],
  hover: palettes.lava[500],
  high: palettes.lava[200],
},
"on-primary": {
  DEFAULT: palettes.white,
  high: palettes.lava[600],
},

Я оставляю только реально используемые цвета, даю палитрам осмысленные имена, а оттенки именую по акценту (этот принцип называется emphasis-based naming).

Когда-нибудь я сделаю из этого полноценный гайд по созданию дизайн-систем, а пока просто оставлю полезную ссылку на принципы именования цветов в Material Design.

За последние месяцы у меня скопилось несколько ссылок, как раз на новую подборку.

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

🗓 Веб приложение, позволяющее визуализировать свою жизнь в виде раскрашенных и подписанных «дней-квадратиков» — от личных до глобальных событий.

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

🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.

🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.

Цвет в визуализациях

Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.

Собрала для вас краткий конспект.

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

Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.

🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!

🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.

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

🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.

🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.

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

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

Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.

Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.

🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.

В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.

🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.

И пара финальных правил.

🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.

🔸Правило 9
Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше.

📚 Five Lessons of Golf

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

Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.

Книга интересно и легко читается, но особенно меня привлекли картинки. Это визуализации: позы при замахе, удара, положения клюшки или тела.

Очень захотелось с вами поделиться!