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

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

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

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

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

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

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

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

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

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

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

💬 Канал: @data2kids

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

​​London Underground Live

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

https://www.londonunderground.live

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

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

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

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

Я сейчас пишу статью о сравнении подходов к созданию графиков в 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": { ... }
  }
}

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

⭐️ 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 }),
  ],
});

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

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

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

Portraits of Population

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

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

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

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

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