Недавно увидела на 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

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

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

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

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

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

​​Замки мира

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

https://thecastlemap.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как ощущается температура в разных городах

Недавно с друзьями обсуждали разницу климатов и температур Дубая и Сингапура, размышляя, как сильно влажность может влиять на восприятие. А пару дней спустя я случайно наткнулась на визуализацию Weather Ribbon, которая отображает распределение усреднённых температур за 30 лет в разных городах (красивая, кстати, посмотрите тоже!).

Мне пришло в голову, что вот есть температура «feels like», которая очень часто не похожа на реальную температуру воздуха и зависит от влажности, ветра и других факторов.

Мне захотелось поисследовать эту тему, и так за выходные появилась страничка

🌡️ The Temperature You Feel

В ней я выбрала почти 40 городов из разных частей света. Где-то я жила или часто бывала, какие-то мне просто показались интересными. Мне хотелось увидеть, как климат в разных частях света может влиять на восприятие температуры воздуха.

Для этого я взяла почасовые погодные данные за последние 10 полных лет (2016–2025) из открытого API Open-Meteo. Для каждого дня отдельно определила максимальную и минимальную обычную и ощущаемую температуру, а затем усреднила их по месяцам за все десять лет. В итоге у меня получились графики, показывающие, как меняется температура в течение года в разных городах.

Сама ощущаемая температура тоже рассчитывается Open-Meteo по модели, которая учитывает влажность, ветер, солнечное излучение и температуру воздуха. Это не совсем то, что почувствует конкретный человек на улице, а скорее принятая математическая оценка того, как погодные условия влияют на восприятие тепла и холода.

И вот несколько любопытных вещей, которые обнаружились в данных:

• Дубай ощущается жарче Эр-Рияда, хотя температура воздуха там ниже. При июльской температуре 41°C в Дубае ощущается 44,5°C, а в более жарком Эр-Рияде — наоборот, на несколько градусов прохладнее. Так сказывается сухой пустынный климат Саудовской Аравии против влажности Персидского залива.

• Летние ночи в Дубае жарче, чем дни в большинстве других городов. В июле даже средний минимум ощущаемой температуры составляет 35,2°C — больше, чем дневной максимум самого жаркого месяца в 23 из 38 городов. А я здесь живу... 🫠

• В Сингапуре практически не бывает прохладно. Близость к экватору и высокая влажность круглый год делают климат одинаково жарким. Здесь почти нет смены сезонов, а даже в самые прохладные часы средняя ощущаемая температура не опускается ниже 27,7°C ни в одном месяце.

• Близость к экватору ещё не означает одинаковый климат. Сингапур и Найроби находятся почти на одной широте, но Найроби расположен на высоте около 1800 метров над уровнем моря. Поэтому там значительно прохладнее: в самые жаркие месяцы ощущаемая температура достигает в среднем 27,6°C против 37,4°C в Сингапуре.

• В Сеуле огромный сезонный перепад. Здесь сочетаются холодная, ветреная зима и жаркое влажное лето. Из-за этого разница между зимними минимумами и летними максимумами ощущаемой температуры достигает почти 45 градусов, хотя по обычной температуре воздуха она составляет 36 градусов.

На странице можно переключаться между максимальными и минимальными температурами, влажностью и осадками.

Это, конечно, только усреднённые данные, и каждый отдельный день может быть как жарче, так и холоднее среднего. А ещё реальные ощущения могут сильно отличаться. Но мне было интересно посмотреть на привычные города с такой стороны!

👉 https://gnykka.io/temperature-you-feel

Несколько интересных примеров в одной картинке.

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

Tiny Charts: визуализации на почтовых марках

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

https://nightingaledvs.com/tiny-charts

Автор собрала 180 марок из 88 стран, на которых встречаются графики, карты и другие способы визуализации данных. Там есть и столбики, и линии, и карты, даже диаграммы в стиле Флоренс Найтингейл.

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

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