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

​​Замки мира Нашла очень классную карту для любителей путешествий и истории. 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 Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше.