Визуализируй это!
رفتن به کانال در Telegram
Привет, я Наташа (@gnykka) и это мой канал про программирование визуализаций данных и не только. ——— 🕸️ slaylines.io | gnykka.io
نمایش بیشتر2 799
مشترکین
+224 ساعت
+47 روز
-1030 روز
آرشیو پست ها
2 798
Tiny Charts: визуализации на почтовых марках
Нашла совершенно прекрасную статью с подборкой и разбором визуализаций в довольно неожиданном месте — на почтовых марках.
https://nightingaledvs.com/tiny-charts
Автор собрала 180 марок из 88 стран, на которых встречаются графики, карты и другие способы визуализации данных. Там есть и столбики, и линии, и карты, даже диаграммы в стиле Флоренс Найтингейл.
Любопытно, что только треть из них действительно показывает реальные данные. Например, динамику населения, возрастную структуру, экономический рост или распространение заболеваний. Остальные используют графики только как часть иллюстрации. Особенно популярна линия, уверенно растущая вправо и вверх.
Как-то так получилось, что графики и датавиз в целом уже давно стали самостоятельным визуальным образом. И не всегда нужны сами значения, чтобы передать смысл.
2 798
Несколько интересных примеров в одной картинке.
Жалко, конечно, что самый приятный климат оказался в тех городах, куда я бы не особо захотела переезжать. Например, в Латинской Америке или Африке.
2 798
Как ощущается температура в разных городах
Недавно с друзьями обсуждали разницу климатов и температур Дубая и Сингапура, размышляя, как сильно влажность может влиять на восприятие. А пару дней спустя я случайно наткнулась на визуализацию 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
2 798
Как инструменты влияют на наше визуальное мышление
Я давно занимаюсь визуализациями и слежу за интересными примерами. И чем больше я их вижу, тем сильнее замечаю, что подавляющее большинство современных визуализаций использует довольно небольшой набор стандартных форм — bar chart, line chart, scatterplot, sankey, карты и ещё несколько знакомых типов.
Хотя казалось бы, технически сегодня мы можем нарисовать и оживить на экране почти что угодно.
При этом если смотреть на известные графики и карты прошлых веков, многие из них выглядят гораздо менее стандартизированными. В них часто встречаются необычные формы, уникальные легенды и иногда даже странные решения.
И мне стало интересно: как так получилось, что при почти полной современной технической свободе визуальный язык данных оказался таким ограниченным? И ограничен ли он в реальности или это просто так кажется на первый взгляд?
Недавно я прочитала статью Why creativity matters in data visualisation, и одна из мыслей там была как раз про ограничения инструментов, которыми мы пользуемся.
Когда нужно сделать новую визуализацию, у нас часто уже есть в голове понимание, какую библиотеку взять. Обычно это что-то знакомое и проверенное: мало кто захочет устраивать рискованные эксперименты в рабочих проектах.
И в этот момент библиотека уже начинает ограничивать нашу фантазию. Она предлагает стандартные типы графиков, готовые компоненты и привычные абстракции, остаётся только подставить данные. И то, что легче всего сделать, постепенно начинает казаться естественным решением.
Получается интересная цепочка: сначала какой-то тип графика становится стандартным в инструментах, потом его используют тысячи разработчиков и дизайнеров, а через какое-то время мы уже сами начинаем воспринимать именно такую форму как очевидный способ показать эти данные. График становится дефолтом мышления.
Я сама хорошо замечаю это, когда работаю с D3 и Chart.js. D3 почти не ограничивает меня формой: я сначала концентрируюсь на данных и задаче и только потом собираю визуализацию из отдельных элементов. В Chart.js у меня получается наоборот — работа начинается с выбора конкретного типа графика и собирания его конфига.
Получается, что с одними и теми же данными я думаю по-разному в зависимости от того, какую библиотеку собираюсь использовать. С другой стороны, возможно, я путаю причину и следствие и просто выбираю Chart.js, когда мне уже всё понятно, а D3 — если впереди этап экспериментов.
В той статье, про которую я писала выше, автор предлагает по-старинке начинать работу не с библиотеки, а с обычного скетча на бумаге. С бумагой проще избавиться от навязчивого вопроса «а как это вообще реализовать?». Плюс неудачный скетч легко выбросить и нарисовать заново. С кодом это часто сложнее, хотя AI сейчас и позволяет прототипировать намного быстрее, чем раньше.
Не думаю, что проблема в стандартных графиках как таковых — в большинстве задач они отлично работают и снимают с нас почти всю головную боль. Но мне кажется, иногда полезно намеренно разделять этапы «что я хочу показать» и «как я буду это реализовывать», чтобы не давать способу реализации слишком рано влиять на саму идею.
2 798
Замки мира
Нашла очень классную карту для любителей путешествий и истории.
https://thecastlemap.com
На ней собраны тысячи замков, крепостей и руин со всего мира. Можно фильтровать их по эпохе, типу, цивилизации, популярности или просто скроллить, как будто листаешь исторический атлас.
Я особенно люблю карты за их наглядность. Сразу становятся заметны вещи, которые сложно увидеть в списке: где замки образуют целые кластеры, где их почти нет, а если плавно менять фильтр по периоду — как менялась картинка в разных странах и регионах.
2 798
Карты Маршалловых островов
Месяц назад в основной экспозиции Лувра в Абу-Даби увидела один из самых классных примеров карты, которая на первый взгляд выглядит совсем не как карта.
Навигационные карты с Маршалловых островов сделаны из тонких веточек, ниток и ракушек. Это исторический способ местных навигаторов визуализировать море.
Ракушки обозначали острова, а линии — волны, течения и то, как океанская зыбь меняется при приближении к островам. Такая карта не столько показывала поверхность моря, сколько описывала его поведение.
Это очень крутой пример геовизуализации: хорошая карта не обязана быть похожей на карту в привычном нам смысле. Она должна помогать ориентироваться.
2 798
Как можно сделать перепись населения интересной
Мне всегда было интересно, как визуализации вплетаются в повседневную жизнь и используются не только для науки или исследований, но и как инструмент образования.
Эта статья — очень классное исследование именно такого случая. Она о том, как индийские власти однажды попытались превратить сухую государственную статистику в что-то более человечное и понятное.
Portraits of Population
В 1960–70-х среди главных мировых тем были перенаселение, нехватка ресурсов и планирование семьи. ООН даже объявила 1974-й World Population Year. Разные страны пытались справиться с этими проблемами по-разному. Именно так в Китае появилась политика одного ребёнка, а в Индии — кампании вроде принудительной стерилизации.
Но не все инициативы были такими жёсткими. В той же Индии чиновники и учёные пытались придумать и как просвещать население. Так в школьной программе даже появились навыки создания и интерпретации простых графиков.
Одной из самых интересных инициатив стала попытка сделать данные переписи населения понятными и интересными для обычных людей. В разных штатах для этого оформляли специальные материалы по данным переписи, и над ними работали местные художники и картографы. В итоге у каждого штата получался свой собственный визуальный язык и те же данные начинали выглядеть совершенно по-разному.
Авторы статьи нашли и собрали вместе почти 700 нарисованных визуализаций из индийских переписей населения 1971 и 1981 годов. Это практически портрет эпохи — мне было очень любопытно его рассматривать!
👉 https://diagramchasing.fun/2026/portraits-of-population#explorer
2 798
Я вылезла за лимит символов одного сообщения, поэтому оставшиеся две библиотеки отдельно.
⭐️ 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 }),
],
});2 798
Какие бывают библиотеки для визуализации данных
Я сейчас пишу статью о сравнении подходов к созданию графиков в 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": { ... }
}
}2 798
London Underground Live
Нашла у себя в заметках ссылку на красивую живую визуализацию движения поездов лондонского метро.
https://www.londonunderground.live
Очень интересно сделана: каждый поезд — это небольшая линия на карте, которая оставляет шлейф при движении. Данные берутся из открытого API транспорта Лондона, поэтому всё обновляется почти в реальном времени.
Кстати, лондонское метро — самое старое и одно из самых крупных в мире. И довольно противное.
Однажды, ещё в 2009 году, я из-за него чуть не опоздала на самолёт. Рано утром в воскресенье я ехала в аэропорт с двумя пересадками после ночных тусовок с друзьями — и совсем не была готова к тому, что в такое время поезда ходят раз в 10 минут в лучшем случае.
2 798
У меня сегодня для вас тематическая подборка про карты и геоданные!
🌍 Tiny World Map — лёгковесные (даже со всеми уровнями зума) тайлы для Leaflet, которые хранятся прямо на клиенте. Работают даже в офлайне, поддерживают зум и не требуют подгрузки с сервера.
📍Оказывается, что Foursquare всё ещё жив, и у него есть открытый API! Можно получить детальные данные о местах с фильтрами, координатами и временем работы.
🗺 Туториал по генерации ретро-карт городов средствами R. Наглядно, с кодом и визуализациями в духе старых схем метро или атласов 80-х.
🔍 Zoomable Wikipedia — экспериментальная попытка представить вики-страницы в виде практически бесконечного масштабируемого пространства.
🧩 AnyMap — пятнашки из карт. Можно выбрать любой город и его карта превратится в небольшой паззл, который предстоит собрать.
2 798
У меня тут случился довольно длинный перерыв.
Последние полгода было много проектов, которые съели почти всё время. Плюс двухмесячная поездка по Азии и США — в таком режиме что-то осмысленное писать совершенно не получалось.
Но за эти месяцы накопилось много нового и интересного: ссылки, статьи, просто идеи и мысли. Кажется, пора возвращаться.
Попробую снова войти в ритм. Многого не обещаю — если получится делать 1–2 поста в неделю, это уже будет отлично.
Среди прочего сейчас пишу несколько больших текстов. Например, сравнение разных библиотек для визуализаций (вроде D3 и Chart.js).
Stay tuned — попробую тут всё немного оживить ❤️
2 798
За последние месяцы у меня скопилось несколько ссылок, как раз на новую подборку.
🌀 Небольшое исследование о том, почему простые числа в полярных координатах формируют спирали или линии.
🗓 Веб приложение, позволяющее визуализировать свою жизнь в виде раскрашенных и подписанных «дней-квадратиков» — от личных до глобальных событий.
📊 Подробный гайд с примерами кода на R, показывающий, как можно использовать гистограмму в роли легенды для графика.
🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.
🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.
2 798
Цвет в визуализациях
Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.
Собрала для вас краткий конспект.
Статья написана для людей, которые, хотя и не сильно погружены в теорию цвета, вынуждены постоянно с ней сталкиваться на практике.
Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.
🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!
🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.
На конференциях, посвященных теории и восприятию цвета, слайды презентаций чаще блёклые, с использованием оттенков серого. Это эмпирическое заключение автора, если что. Секрет в том, что использовать цвет стоит осмысленно.
🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.
🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.
В природе цвета часто служат определённым целям. Например, цвет кожи животных могут отпугивать хищников, привлекать партнёров или даже служить камуфляжем. Используя это свойство, можно научиться привлекать внимание к самому важному.
🔸Правило 5
Используйте мягкие и натуральный цвета для большей части информации, а яркие и тёмные — для выделение особенностей.
Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.
Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.
🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.
В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.
🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.
И пара финальных правил.
🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.
🔸Правило 9
Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше.
2 798
+7
📚 Five Lessons of Golf
Несколько месяцев назад я начала учиться играть в гольф. Результаты пока скромные, но некоторый прогресс уже ощущается.
Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.
Книга интересно и легко читается, но особенно меня привлекли картинки. Это визуализации: позы при замахе, удара, положения клюшки или тела.
Очень захотелось с вами поделиться!
2 798
Как оживить объекты в D3 с помощью анимаций?
Недавно я пыталась разобраться, как именно работают анимации под капотом D3, и в итоге написала небольшой (и, надеюсь, интересный) туториал.
Чтобы не делать банальные линии и столбики, в этот раз я решила анимировать орбитальную систему. Показываю базовые приёмы и объясняю, что такое tween функция и как с её помощью можно расставить планеты по орбитам.
Читать статью 👉 https://dev.to/gnykka/bringing-svg-elements-to-life-with-d3s-tween-function-42me
Смотреть код 👉 https://codepen.io/gnykka/pen/EaYzyJz
2 798
Год назад я писала про статью «Миф об объективных данных». В ней описывалась идея, что объективность данных — это относительно новый концепт, который зачастую ограничивает нас в познании и анализе. Любые данные всегда субъективны, потому что с ними на каждом этапе работает человек, внося всё больше потенциальных искажений. Мы не должны бояться этой субъективности, но обязаны её признавать и уметь с ней работать.
Недавно я наткнулась на другую статью «Этические аспекты исследований в области визуализации», которая, как мне кажется, перекликается с предыдущей. Здесь автор пытается понять, как этические вопросы проявляются в визуализациях данных, как это влияет на восприятие и что со всем этим делать.
С одной стороны, может показаться, что никаких серьёзных этических проблем нет. Создавая визуализации, мы часто выступаем лишь связующим звеном между данными и пользователями. Обычно мы не создаём сами данные и не отвечаем за то, как в дальнейшем будут использоваться наши визуализации.
Но, с другой стороны, данные не возникают из ниоткуда. И, как известно, они не могут быть полностью объективными: их собирают люди, чьи цели и опыт влияют на результат. Кроме того сами визуализации с помощью дизайна, цвета, символов и ассоциаций способны интерпретировать данные так, чтобы влиять на их восприятие. Именно поэтому графики часто применяют, например, в политической пропаганде — из-за их способности воздействовать на зрителей.
Если мы не можем избавиться от субъективности, то хотя бы должны не скрывать её. Из этого вытекают три основных правила:
1. Показывать невидимое. Откуда взялись данные? Насколько они могут быть неточными? Кто заинтересован в этих данных или на кого они могут повлиять?
2. Собирать данные с эмпатией. Меньше абстракций и сухих статистик, больше реалистичности деталей. Но при этом и никаких личных или конфиденциальных данных, которые могут кому-то навредить.
3. Задумываться о смыслах. Наша задача — бороться за частность данных и оберегать их от намеренных или ненамеренных искажений.
2 798
Давно не было подборок с интересными визуализациями!
🎞 Title Drops — увлекательное исследование явления title drop. Это момент, когда персонажи фильма произносят название самого фильма. Оказалось, что такие сцены встречаются гораздо чаще, чем кажется, и не только в биографических картинах.
🏆 Эффектно и лаконично анимированные результаты спортивных соревнований.
📰 Исследовательская статья о визуализациях Второй мировой войны с особым акцентом на карты из газет того времени.
📚 Карта книг, чаще всего упоминаемых на HackerNews. Все книги разделены по тематикам и дополнены краткими описаниями. В основном делятся связанным с бизнесом и программированием, но есть и наука с художественной литературой.
🏙 Любопытный хитмап преступлений в разных городах США. Данные взяты из открытых баз и обновляются в среднем раз в месяц.
Вакансия
2ГИС ищет менеджера продукта для 2GIS Pro —своей новой geoBI-системы управления и аналитики геоданных. Если стало интересно, пишите Ирине.
2 798
Как расставить лейблы на графике
Пару недель назад я занималась интересной задачей. У меня был график с несколькими линиями и эффектом наведения мышки. Нужно было придумать простой алгоритм размещения лейблов текущих значений так, чтобы они не перекрывали друг друга.
🔗 https://codepen.io/gnykka/pen/ExqJrKY
Я сделала обычный линейный график на D3, поместив поверх всего контейнеры для ховер-элементов (лейблов и точек на линиях) и прямоугольник, который ловит события мыши. Для лейблов я использую
foreignObject – он наконец-то более-менее поддерживается в разных браузерах, включая Safari (главное – не забыть явно указать его размеры и добавлять элементы с префиксом xhtml).
После отрисовки лейблов я вызываю специальную функцию для их размещения. Если кратко, то я прохожу по всем лейблам и сдвигаю их, если они накладываются на предыдущие. Если в результате сдвигов они выходят за пределы графика, то корректирую их положение обратно.
Получился очень простой алгоритм. Он эффективно работает если линий немного, а высота графика достаточная и точно вмещает все лейблы.2 798
Визуализация погоды с помощью рисованных пейзажей
Мне очень понравилась идея! Картинки показывают дом в лесу, по оси X отображено время, по оси Y — различные погодные условия, а деревья кодируют направление и силу ветра. Написано на Python, оптимизировано для рисования на небольших E-Ink дисплеях.
