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

​​Как можно сделать перепись населения интересной Мне всегда было интересно, как визуализации вплетаются в повседневную жизнь и используются не только для науки или исследований, но и как инструмент образования. Эта статья — очень классное исследование именно такого случая. Она о том, как индийские власти однажды попытались превратить сухую государственную статистику в что-то более человечное и понятное. 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 — платформе для анализа кредитных рейтингов компаний.