📚 Five Lessons of Golf
Несколько месяцев назад я начала учиться играть в гольф. Результаты пока скромные, но некоторый прогресс уже ощущается.
Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.
Книга интересно и легко читается, но особенно меня привлекли картинки. Это визуализации: позы при замахе, удара, положения клюшки или тела.
Очень захотелось с вами поделиться!
Несколько месяцев назад я начала учиться играть в гольф. Результаты пока скромные, но некоторый прогресс уже ощущается.
Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.
Книга интересно и легко читается, но особенно меня привлекли картинки. Это визуализации: позы при замахе, удара, положения клюшки или тела.
Очень захотелось с вами поделиться!
❤23🔥2😱1
Цвет в визуализациях
Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.
Собрала для вас краткий конспект.
Статья написана для людей, которые, хотя и не сильно погружены в теорию цвета, вынуждены постоянно с ней сталкиваться на практике.
Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.
🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!
🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.
На конференциях, посвященных теории и восприятию цвета, слайды презентаций чаще блёклые, с использованием оттенков серого. Это эмпирическое заключение автора, если что. Секрет в том, что использовать цвет стоит осмысленно.
🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.
🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.
В природе цвета часто служат определённым целям. Например, цвет кожи животных могут отпугивать хищников, привлекать партнёров или даже служить камуфляжем. Используя это свойство, можно научиться привлекать внимание к самому важному.
🔸Правило 5
Используйте мягкие и натуральный цвета для большей части информации, а яркие и тёмные — для выделение особенностей.
Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.
Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.
🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.
В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.
🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.
И пара финальных правил.
🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.
🔸Правило 9
Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше.
Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.
Собрала для вас краткий конспект.
Статья написана для людей, которые, хотя и не сильно погружены в теорию цвета, вынуждены постоянно с ней сталкиваться на практике.
Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.
🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!
🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.
На конференциях, посвященных теории и восприятию цвета, слайды презентаций чаще блёклые, с использованием оттенков серого. Это эмпирическое заключение автора, если что. Секрет в том, что использовать цвет стоит осмысленно.
🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.
🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.
В природе цвета часто служат определённым целям. Например, цвет кожи животных могут отпугивать хищников, привлекать партнёров или даже служить камуфляжем. Используя это свойство, можно научиться привлекать внимание к самому важному.
🔸Правило 5
Используйте мягкие и натуральный цвета для большей части информации, а яркие и тёмные — для выделение особенностей.
Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.
Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.
🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.
В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.
🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.
И пара финальных правил.
🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.
🔸Правило 9
Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше.
👍11🔥4❤2
За последние месяцы у меня скопилось несколько ссылок, как раз на новую подборку.
🌀 Небольшое исследование о том, почему простые числа в полярных координатах формируют спирали или линии.
🗓 Веб приложение, позволяющее визуализировать свою жизнь в виде раскрашенных и подписанных «дней-квадратиков» — от личных до глобальных событий.
📊 Подробный гайд с примерами кода на R, показывающий, как можно использовать гистограмму в роли легенды для графика.
🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.
🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.
🌀 Небольшое исследование о том, почему простые числа в полярных координатах формируют спирали или линии.
🗓 Веб приложение, позволяющее визуализировать свою жизнь в виде раскрашенных и подписанных «дней-квадратиков» — от личных до глобальных событий.
📊 Подробный гайд с примерами кода на R, показывающий, как можно использовать гистограмму в роли легенды для графика.
🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.
🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.
👍11🔥5
Как я собираю палитры для проектов
Вчера я прочитала пост Ромы Бунина про сервис для создания цветовых палитр и спонтанно решила рассказать, как я сама обычно составляю палитры для дизайн-систем, над которыми работаю.
Сразу уточню: это мини-гайд именно для дизайн-систем. Для графиков он подходит не всегда — разве что в случае последовательных палитр.
Обычно, когда мне приносят дизайн, в нём есть несколько цветов: для текста, фона, интерактивных элементов вроде ссылок или кнопок, отдельных акцентных деталей. Чаще всего это 1–2 брендовых цвета плюс нейтральные — светлый, тёмный и оттенки серого. Но редко дизайнеры сразу собирают из этого полноценные палитры, а создать непротиворечивую систему всё равно нужно.
Первое, что я делаю, — выписываю все цвета из макета и по возможности сокращаю их количество. Шаг суперважный! Однажды мне достался дизайн с шестнадцатью (!) разными оттенками серого, которые практически не различались визуально.
Моё основное правило: полная палитра каждого цвета должна содержать не больше 11–13 шагов. И это при том, что первый шаг — белый, а последний — чёрный. Этой схемы придерживаются многие CSS-фреймворки, например Tailwind или Material UI.
Для этого я чаще всего использую Palette App. Там я создаю 11 шагов будущей палитры, расставляю имеющиеся цвета от самого тёмного к самому светлому, стараясь сохранить равномерный шаг, и затем заполняю пустые промежутки, экстраполируя значения hue, saturation и lightness соседних цветов.
В итоге получается что-то вроде такого:
Это моя база для конкретного цвета. В саму дизайн-систему он попадает уже трансформированным. Здесь я позаимствовала подход из Material UI: я использую не физические названия, а семантические. Так понятнее и нагляднее при последующем использовании.
Например, цвет lava в конфиге Tailwind у меня превращается в:
Я оставляю только реально используемые цвета, даю палитрам осмысленные имена, а оттенки именую по акценту (этот принцип называется emphasis-based naming).
Когда-нибудь я сделаю из этого полноценный гайд по созданию дизайн-систем, а пока просто оставлю полезную ссылку на принципы именования цветов в Material Design.
Вчера я прочитала пост Ромы Бунина про сервис для создания цветовых палитр и спонтанно решила рассказать, как я сама обычно составляю палитры для дизайн-систем, над которыми работаю.
Сразу уточню: это мини-гайд именно для дизайн-систем. Для графиков он подходит не всегда — разве что в случае последовательных палитр.
Обычно, когда мне приносят дизайн, в нём есть несколько цветов: для текста, фона, интерактивных элементов вроде ссылок или кнопок, отдельных акцентных деталей. Чаще всего это 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.
❤10🔥5👍1
Вот как итоговая палитра выглядит внутри стайлгайда.
Это основные сочетания цветов, которые мы используем в Synnax — платформе для анализа кредитных рейтингов компаний.
Это основные сочетания цветов, которые мы используем в Synnax — платформе для анализа кредитных рейтингов компаний.
❤15
✨ Детский конкурс визуализаций ✨
Коллеги придумали очень классную инициативу — конкурс для детей 6–11 лет! Можно дать волю творчеству и придумать любую визуализацию данных: нарисовать на бумаге, собрать из игрушек или конфет или создать на компьютере.
Весь октябрь будут обучающие семинары и практические задания, а в ноябре пройдёт финал — с оценкой работ и ценными призами. Я же впервые попробую себя в жюри.
Если у вас есть дети, племянники или младшие братья и сёстры — покажите им конкурс. Отличный повод провести время вместе и сделать что-то по-настоящему необычное 🧡
👉 Регистрация
💬 Канал: @data2kids
Коллеги придумали очень классную инициативу — конкурс для детей 6–11 лет! Можно дать волю творчеству и придумать любую визуализацию данных: нарисовать на бумаге, собрать из игрушек или конфет или создать на компьютере.
Весь октябрь будут обучающие семинары и практические задания, а в ноябре пройдёт финал — с оценкой работ и ценными призами. Я же впервые попробую себя в жюри.
Если у вас есть дети, племянники или младшие братья и сёстры — покажите им конкурс. Отличный повод провести время вместе и сделать что-то по-настоящему необычное 🧡
👉 Регистрация
💬 Канал: @data2kids
🔥5👍3🥰2
Осталась последняя неделя приёма работ на конкурс!
Я уже писала про детский конкурс визуализаций, в жюри которого я оказалась. Так вот, он выходит на финишную прямую.
Дедлайн подачи работ: 30 октября.
🎨 А уже завтра пройдёт новый эфир, посвящённый номинации «Рисунок»! Ссылка на него будет в канале @data2kids.
Участников ждут подарки (iPad, LEGO и многое другое), гайды и памятные призы. Если вы ещё не присоединились — сейчас самое время.
Участвовать!
Я уже писала про детский конкурс визуализаций, в жюри которого я оказалась. Так вот, он выходит на финишную прямую.
Дедлайн подачи работ: 30 октября.
🎨 А уже завтра пройдёт новый эфир, посвящённый номинации «Рисунок»! Ссылка на него будет в канале @data2kids.
Участников ждут подарки (iPad, LEGO и многое другое), гайды и памятные призы. Если вы ещё не присоединились — сейчас самое время.
Участвовать!
🔥11❤3🥰3
Недавно увидела на Reddit интересную визуализацию: карту связей научных статей, где десятки тысяч работ собраны в кластеры по предметным областям.
Как это сделано: из открытого набора LAION (около 100 млн научных и исследовательских текстов, здесь — небольшой срез) извлекли краткие выжимки, перевели статьи в векторные представления, спроецировали в 2D и сгруппировали по близости.
🔗 Демо: https://laion.inference.net/embeddings
🛠️ Код: https://github.com/context-labs/laion-data-explorer (React + D3)
Как это сделано: из открытого набора LAION (около 100 млн научных и исследовательских текстов, здесь — небольшой срез) извлекли краткие выжимки, перевели статьи в векторные представления, спроецировали в 2D и сгруппировали по близости.
🔗 Демо: https://laion.inference.net/embeddings
🛠️ Код: https://github.com/context-labs/laion-data-explorer (React + D3)
🥰12👍7
У меня тут случился довольно длинный перерыв.
Последние полгода было много проектов, которые съели почти всё время. Плюс двухмесячная поездка по Азии и США — в таком режиме что-то осмысленное писать совершенно не получалось.
Но за эти месяцы накопилось много нового и интересного: ссылки, статьи, просто идеи и мысли. Кажется, пора возвращаться.
Попробую снова войти в ритм. Многого не обещаю — если получится делать 1–2 поста в неделю, это уже будет отлично.
Среди прочего сейчас пишу несколько больших текстов. Например, сравнение разных библиотек для визуализаций (вроде D3 и Chart.js).
Stay tuned — попробую тут всё немного оживить ❤️
Последние полгода было много проектов, которые съели почти всё время. Плюс двухмесячная поездка по Азии и США — в таком режиме что-то осмысленное писать совершенно не получалось.
Но за эти месяцы накопилось много нового и интересного: ссылки, статьи, просто идеи и мысли. Кажется, пора возвращаться.
Попробую снова войти в ритм. Многого не обещаю — если получится делать 1–2 поста в неделю, это уже будет отлично.
Среди прочего сейчас пишу несколько больших текстов. Например, сравнение разных библиотек для визуализаций (вроде D3 и Chart.js).
Stay tuned — попробую тут всё немного оживить ❤️
❤32🔥11👍8
У меня сегодня для вас тематическая подборка про карты и геоданные!
🌍 Tiny World Map — лёгковесные (даже со всеми уровнями зума) тайлы для Leaflet, которые хранятся прямо на клиенте. Работают даже в офлайне, поддерживают зум и не требуют подгрузки с сервера.
📍Оказывается, что Foursquare всё ещё жив, и у него есть открытый API! Можно получить детальные данные о местах с фильтрами, координатами и временем работы.
🗺 Туториал по генерации ретро-карт городов средствами R. Наглядно, с кодом и визуализациями в духе старых схем метро или атласов 80-х.
🔍 Zoomable Wikipedia — экспериментальная попытка представить вики-страницы в виде практически бесконечного масштабируемого пространства.
🧩 AnyMap — пятнашки из карт. Можно выбрать любой город и его карта превратится в небольшой паззл, который предстоит собрать.
🌍 Tiny World Map — лёгковесные (даже со всеми уровнями зума) тайлы для Leaflet, которые хранятся прямо на клиенте. Работают даже в офлайне, поддерживают зум и не требуют подгрузки с сервера.
📍Оказывается, что Foursquare всё ещё жив, и у него есть открытый API! Можно получить детальные данные о местах с фильтрами, координатами и временем работы.
🗺 Туториал по генерации ретро-карт городов средствами R. Наглядно, с кодом и визуализациями в духе старых схем метро или атласов 80-х.
🔍 Zoomable Wikipedia — экспериментальная попытка представить вики-страницы в виде практически бесконечного масштабируемого пространства.
🧩 AnyMap — пятнашки из карт. Можно выбрать любой город и его карта превратится в небольшой паззл, который предстоит собрать.
❤10
London Underground Live
Нашла у себя в заметках ссылку на красивую живую визуализацию движения поездов лондонского метро.
https://www.londonunderground.live
Очень интересно сделана: каждый поезд — это небольшая линия на карте, которая оставляет шлейф при движении. Данные берутся из открытого API транспорта Лондона, поэтому всё обновляется почти в реальном времени.
Кстати, лондонское метро — самое старое и одно из самых крупных в мире. И довольно противное.
Однажды, ещё в 2009 году, я из-за него чуть не опоздала на самолёт. Рано утром в воскресенье я ехала в аэропорт с двумя пересадками после ночных тусовок с друзьями — и совсем не была готова к тому, что в такое время поезда ходят раз в 10 минут в лучшем случае.
Нашла у себя в заметках ссылку на красивую живую визуализацию движения поездов лондонского метро.
https://www.londonunderground.live
Очень интересно сделана: каждый поезд — это небольшая линия на карте, которая оставляет шлейф при движении. Данные берутся из открытого API транспорта Лондона, поэтому всё обновляется почти в реальном времени.
Кстати, лондонское метро — самое старое и одно из самых крупных в мире. И довольно противное.
Однажды, ещё в 2009 году, я из-за него чуть не опоздала на самолёт. Рано утром в воскресенье я ехала в аэропорт с двумя пересадками после ночных тусовок с друзьями — и совсем не была готова к тому, что в такое время поезда ходят раз в 10 минут в лучшем случае.
❤7👍2
Какие бывают библиотеки для визуализации данных
Я сейчас пишу статью о сравнении подходов к созданию графиков в D3 и Chart.js и, пока собираю материал, решила структурировать у себя в голове, какие вообще бывают библиотеки визуализаций и чем они отличаются.
В итоге у меня получился список из восьми популярных библиотек — очень разных и по возможностям, и по подходу к графикам.
⭐️ D3.js
• низкоуровневый тулкит
• 9.7 млн недельных скачиваний на npm
• 113 тысяч звёзд на github
Набор инструментов для работы с данными и DOM/SVG элементами — позволяет собрать практически что угодно, но собирать придётся самостоятельно как сложный конструктор.
Самая используемая у меня библиотека. Сложно влиться, но зато можно покрыть любые хотелки.
🖇 Ссылки на мои туториалы по D3
⭐️ Chart.js
• готовая библиотека графиков
• 9 млн недельных скачиваний на npm
• 67.3 тысяч звёзд на github
Простой и удобный вариант для создания большинства стандартных графиков, с быстрым стартом и настройкой графиков через конфиг.
Очень люблю Chart.js для визуализаций без сложных кастомизаций (хотя они тоже возможны благодаря системе плагинов). За десяток-другой строк можно уже получить работающий на канвасе график.
⭐️ Apache ECharts
• конфигурационная библиотека графиков
• 2.3 млн недельных скачиваний на npm
• 66.1 тысяч звёзд на github
Большая и мощная система для интерактивных графиков и дашбордов с кучей встроенных типов, способная работать в том числе с большими объёмами данных.
Я работала с ECharts на одном проекте, мне понравилось. Похожа на Chart.js, но больше про корпоративные дашборды и системы аналитики.
⭐️ Plotly.js
• высокоуровневая декларативная библиотека
• 970 тысяч недельных скачиваний на npm
• 18.2 тысяч звёзд на github
Похожа на Chart.js и ECharts, но заметно ближе к научным и аналитическим визуализациям: есть статистические графики, 3D и прочее нетривиальное.
Признаюсь, что никогда не пользовалась. Конфиг простой и в доках я нашла очень много заготовленных типов, включая водопад, свечки и даже контурные карты.
⭐️ Observable Plot
• библиотека для быстрых графиков
• 146 тысяч недельных скачиваний на npm
• 5.2 тысяч звёзд на github
Хороша для быстрого исследования данных — простое API и сборка графика из отдельных заготовленных частей.
Когда-то давно я ковыряла ещё сырую бета версию (рассказывала тут). С тех пор, кажется, многое поменялось, включая даже синтаксис.
⭐️ Vega-Lite
• декларативная грамматика графики
• 414 тысяч недельных скачиваний на npm
• 5.3 тысяч звёзд на github
Инструмент, где графики описываются через JSON-структуру с данными, типами отображения и всеми преобразованиями.
Раньше не пробовала, но по докам и примерам выглядит как очень удобный инструмент для быстрых визуализаций.
Я сейчас пишу статью о сравнении подходов к созданию графиков в 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": { ... }
}
}❤6🔥3👍2
Я вылезла за лимит символов одного сообщения, поэтому оставшиеся две библиотеки отдельно.
⭐️ G2
• библиотека на основе грамматики графики
• 248 тысяч недельных скачиваний на npm
• 12.5 тысяч звёзд на github
Похожа на Vega-Lite по подходу, но больше заточена под прикладные графики для интерфейсов, аналитики и дашбордов.
Код выглядит просто, а графики красиво. Оказалось, что это часть одной большой китайской DataViz/AI экосистемы (с сайтом на китайском!).
⭐️ deck.gl
• GPU-ориентированный фреймворк
• 187 тысяч недельных скачиваний на npm
• 14.1 тысяч звёзд на github
Библиотека для работы с большими данными, работающая с декларативно описываемыми слоями.
Кажется, это все те красивые и красочные 3D визуализации на карте, на которые я всегда залипаю — сразу захотелось попробовать.
⭐️ 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 }),
],
});❤8👍4🔥3
Как можно сделать перепись населения интересной
Мне всегда было интересно, как визуализации вплетаются в повседневную жизнь и используются не только для науки или исследований, но и как инструмент образования.
Эта статья — очень классное исследование именно такого случая. Она о том, как индийские власти однажды попытались превратить сухую государственную статистику в что-то более человечное и понятное.
Portraits of Population
В 1960–70-х среди главных мировых тем были перенаселение, нехватка ресурсов и планирование семьи. ООН даже объявила 1974-й World Population Year. Разные страны пытались справиться с этими проблемами по-разному. Именно так в Китае появилась политика одного ребёнка, а в Индии — кампании вроде принудительной стерилизации.
Но не все инициативы были такими жёсткими. В той же Индии чиновники и учёные пытались придумать и как просвещать население. Так в школьной программе даже появились навыки создания и интерпретации простых графиков.
Одной из самых интересных инициатив стала попытка сделать данные переписи населения понятными и интересными для обычных людей. В разных штатах для этого оформляли специальные материалы по данным переписи, и над ними работали местные художники и картографы. В итоге у каждого штата получался свой собственный визуальный язык и те же данные начинали выглядеть совершенно по-разному.
Авторы статьи нашли и собрали вместе почти 700 нарисованных визуализаций из индийских переписей населения 1971 и 1981 годов. Это практически портрет эпохи — мне было очень любопытно его рассматривать!
👉 https://diagramchasing.fun/2026/portraits-of-population#explorer
Мне всегда было интересно, как визуализации вплетаются в повседневную жизнь и используются не только для науки или исследований, но и как инструмент образования.
Эта статья — очень классное исследование именно такого случая. Она о том, как индийские власти однажды попытались превратить сухую государственную статистику в что-то более человечное и понятное.
Portraits of Population
В 1960–70-х среди главных мировых тем были перенаселение, нехватка ресурсов и планирование семьи. ООН даже объявила 1974-й World Population Year. Разные страны пытались справиться с этими проблемами по-разному. Именно так в Китае появилась политика одного ребёнка, а в Индии — кампании вроде принудительной стерилизации.
Но не все инициативы были такими жёсткими. В той же Индии чиновники и учёные пытались придумать и как просвещать население. Так в школьной программе даже появились навыки создания и интерпретации простых графиков.
Одной из самых интересных инициатив стала попытка сделать данные переписи населения понятными и интересными для обычных людей. В разных штатах для этого оформляли специальные материалы по данным переписи, и над ними работали местные художники и картографы. В итоге у каждого штата получался свой собственный визуальный язык и те же данные начинали выглядеть совершенно по-разному.
Авторы статьи нашли и собрали вместе почти 700 нарисованных визуализаций из индийских переписей населения 1971 и 1981 годов. Это практически портрет эпохи — мне было очень любопытно его рассматривать!
👉 https://diagramchasing.fun/2026/portraits-of-population#explorer
❤5🔥1
Карты Маршалловых островов
Месяц назад в основной экспозиции Лувра в Абу-Даби увидела один из самых классных примеров карты, которая на первый взгляд выглядит совсем не как карта.
Навигационные карты с Маршалловых островов сделаны из тонких веточек, ниток и ракушек. Это исторический способ местных навигаторов визуализировать море.
Ракушки обозначали острова, а линии — волны, течения и то, как океанская зыбь меняется при приближении к островам. Такая карта не столько показывала поверхность моря, сколько описывала его поведение.
Это очень крутой пример геовизуализации: хорошая карта не обязана быть похожей на карту в привычном нам смысле. Она должна помогать ориентироваться.
Месяц назад в основной экспозиции Лувра в Абу-Даби увидела один из самых классных примеров карты, которая на первый взгляд выглядит совсем не как карта.
Навигационные карты с Маршалловых островов сделаны из тонких веточек, ниток и ракушек. Это исторический способ местных навигаторов визуализировать море.
Ракушки обозначали острова, а линии — волны, течения и то, как океанская зыбь меняется при приближении к островам. Такая карта не столько показывала поверхность моря, сколько описывала его поведение.
Это очень крутой пример геовизуализации: хорошая карта не обязана быть похожей на карту в привычном нам смысле. Она должна помогать ориентироваться.
🔥25❤6👍3
Замки мира
Нашла очень классную карту для любителей путешествий и истории.
https://thecastlemap.com
На ней собраны тысячи замков, крепостей и руин со всего мира. Можно фильтровать их по эпохе, типу, цивилизации, популярности или просто скроллить, как будто листаешь исторический атлас.
Я особенно люблю карты за их наглядность. Сразу становятся заметны вещи, которые сложно увидеть в списке: где замки образуют целые кластеры, где их почти нет, а если плавно менять фильтр по периоду — как менялась картинка в разных странах и регионах.
Нашла очень классную карту для любителей путешествий и истории.
https://thecastlemap.com
На ней собраны тысячи замков, крепостей и руин со всего мира. Можно фильтровать их по эпохе, типу, цивилизации, популярности или просто скроллить, как будто листаешь исторический атлас.
Я особенно люблю карты за их наглядность. Сразу становятся заметны вещи, которые сложно увидеть в списке: где замки образуют целые кластеры, где их почти нет, а если плавно менять фильтр по периоду — как менялась картинка в разных странах и регионах.
❤17🔥4👍3
Как инструменты влияют на наше визуальное мышление
Я давно занимаюсь визуализациями и слежу за интересными примерами. И чем больше я их вижу, тем сильнее замечаю, что подавляющее большинство современных визуализаций использует довольно небольшой набор стандартных форм — bar chart, line chart, scatterplot, sankey, карты и ещё несколько знакомых типов.
Хотя казалось бы, технически сегодня мы можем нарисовать и оживить на экране почти что угодно.
При этом если смотреть на известные графики и карты прошлых веков, многие из них выглядят гораздо менее стандартизированными. В них часто встречаются необычные формы, уникальные легенды и иногда даже странные решения.
И мне стало интересно: как так получилось, что при почти полной современной технической свободе визуальный язык данных оказался таким ограниченным? И ограничен ли он в реальности или это просто так кажется на первый взгляд?
Недавно я прочитала статью Why creativity matters in data visualisation, и одна из мыслей там была как раз про ограничения инструментов, которыми мы пользуемся.
Когда нужно сделать новую визуализацию, у нас часто уже есть в голове понимание, какую библиотеку взять. Обычно это что-то знакомое и проверенное: мало кто захочет устраивать рискованные эксперименты в рабочих проектах.
И в этот момент библиотека уже начинает ограничивать нашу фантазию. Она предлагает стандартные типы графиков, готовые компоненты и привычные абстракции, остаётся только подставить данные. И то, что легче всего сделать, постепенно начинает казаться естественным решением.
Получается интересная цепочка: сначала какой-то тип графика становится стандартным в инструментах, потом его используют тысячи разработчиков и дизайнеров, а через какое-то время мы уже сами начинаем воспринимать именно такую форму как очевидный способ показать эти данные. График становится дефолтом мышления.
Я сама хорошо замечаю это, когда работаю с D3 и Chart.js. D3 почти не ограничивает меня формой: я сначала концентрируюсь на данных и задаче и только потом собираю визуализацию из отдельных элементов. В Chart.js у меня получается наоборот — работа начинается с выбора конкретного типа графика и собирания его конфига.
Получается, что с одними и теми же данными я думаю по-разному в зависимости от того, какую библиотеку собираюсь использовать. С другой стороны, возможно, я путаю причину и следствие и просто выбираю Chart.js, когда мне уже всё понятно, а D3 — если впереди этап экспериментов.
В той статье, про которую я писала выше, автор предлагает по-старинке начинать работу не с библиотеки, а с обычного скетча на бумаге. С бумагой проще избавиться от навязчивого вопроса «а как это вообще реализовать?». Плюс неудачный скетч легко выбросить и нарисовать заново. С кодом это часто сложнее, хотя AI сейчас и позволяет прототипировать намного быстрее, чем раньше.
Не думаю, что проблема в стандартных графиках как таковых — в большинстве задач они отлично работают и снимают с нас почти всю головную боль. Но мне кажется, иногда полезно намеренно разделять этапы «что я хочу показать» и «как я буду это реализовывать», чтобы не давать способу реализации слишком рано влиять на саму идею.
Я давно занимаюсь визуализациями и слежу за интересными примерами. И чем больше я их вижу, тем сильнее замечаю, что подавляющее большинство современных визуализаций использует довольно небольшой набор стандартных форм — bar chart, line chart, scatterplot, sankey, карты и ещё несколько знакомых типов.
Хотя казалось бы, технически сегодня мы можем нарисовать и оживить на экране почти что угодно.
При этом если смотреть на известные графики и карты прошлых веков, многие из них выглядят гораздо менее стандартизированными. В них часто встречаются необычные формы, уникальные легенды и иногда даже странные решения.
И мне стало интересно: как так получилось, что при почти полной современной технической свободе визуальный язык данных оказался таким ограниченным? И ограничен ли он в реальности или это просто так кажется на первый взгляд?
Недавно я прочитала статью Why creativity matters in data visualisation, и одна из мыслей там была как раз про ограничения инструментов, которыми мы пользуемся.
Когда нужно сделать новую визуализацию, у нас часто уже есть в голове понимание, какую библиотеку взять. Обычно это что-то знакомое и проверенное: мало кто захочет устраивать рискованные эксперименты в рабочих проектах.
И в этот момент библиотека уже начинает ограничивать нашу фантазию. Она предлагает стандартные типы графиков, готовые компоненты и привычные абстракции, остаётся только подставить данные. И то, что легче всего сделать, постепенно начинает казаться естественным решением.
Получается интересная цепочка: сначала какой-то тип графика становится стандартным в инструментах, потом его используют тысячи разработчиков и дизайнеров, а через какое-то время мы уже сами начинаем воспринимать именно такую форму как очевидный способ показать эти данные. График становится дефолтом мышления.
Я сама хорошо замечаю это, когда работаю с D3 и Chart.js. D3 почти не ограничивает меня формой: я сначала концентрируюсь на данных и задаче и только потом собираю визуализацию из отдельных элементов. В Chart.js у меня получается наоборот — работа начинается с выбора конкретного типа графика и собирания его конфига.
Получается, что с одними и теми же данными я думаю по-разному в зависимости от того, какую библиотеку собираюсь использовать. С другой стороны, возможно, я путаю причину и следствие и просто выбираю Chart.js, когда мне уже всё понятно, а D3 — если впереди этап экспериментов.
В той статье, про которую я писала выше, автор предлагает по-старинке начинать работу не с библиотеки, а с обычного скетча на бумаге. С бумагой проще избавиться от навязчивого вопроса «а как это вообще реализовать?». Плюс неудачный скетч легко выбросить и нарисовать заново. С кодом это часто сложнее, хотя AI сейчас и позволяет прототипировать намного быстрее, чем раньше.
Не думаю, что проблема в стандартных графиках как таковых — в большинстве задач они отлично работают и снимают с нас почти всю головную боль. Но мне кажется, иногда полезно намеренно разделять этапы «что я хочу показать» и «как я буду это реализовывать», чтобы не давать способу реализации слишком рано влиять на саму идею.
Nicola Rennie
Why creativity matters in data visualisation – Nicola Rennie
Creativity is an important aspect of data visualisation, and it can affect engagement, recall, and trustworthiness. This blog post outlines what creativity means when it comes to data visualisation, why it’s important, and how you can design more creative…
❤3👍1
Как ощущается температура в разных городах
Недавно с друзьями обсуждали разницу климатов и температур Дубая и Сингапура, размышляя, как сильно влажность может влиять на восприятие. А пару дней спустя я случайно наткнулась на визуализацию 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
Недавно с друзьями обсуждали разницу климатов и температур Дубая и Сингапура, размышляя, как сильно влажность может влиять на восприятие. А пару дней спустя я случайно наткнулась на визуализацию 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
👍6❤4👏1
Tiny Charts: визуализации на почтовых марках
Нашла совершенно прекрасную статью с подборкой и разбором визуализаций в довольно неожиданном месте — на почтовых марках.
https://nightingaledvs.com/tiny-charts
Автор собрала 180 марок из 88 стран, на которых встречаются графики, карты и другие способы визуализации данных. Там есть и столбики, и линии, и карты, даже диаграммы в стиле Флоренс Найтингейл.
Любопытно, что только треть из них действительно показывает реальные данные. Например, динамику населения, возрастную структуру, экономический рост или распространение заболеваний. Остальные используют графики только как часть иллюстрации. Особенно популярна линия, уверенно растущая вправо и вверх.
Как-то так получилось, что графики и датавиз в целом уже давно стали самостоятельным визуальным образом. И не всегда нужны сами значения, чтобы передать смысл.
Нашла совершенно прекрасную статью с подборкой и разбором визуализаций в довольно неожиданном месте — на почтовых марках.
https://nightingaledvs.com/tiny-charts
Автор собрала 180 марок из 88 стран, на которых встречаются графики, карты и другие способы визуализации данных. Там есть и столбики, и линии, и карты, даже диаграммы в стиле Флоренс Найтингейл.
Любопытно, что только треть из них действительно показывает реальные данные. Например, динамику населения, возрастную структуру, экономический рост или распространение заболеваний. Остальные используют графики только как часть иллюстрации. Особенно популярна линия, уверенно растущая вправо и вверх.
Как-то так получилось, что графики и датавиз в целом уже давно стали самостоятельным визуальным образом. И не всегда нужны сами значения, чтобы передать смысл.
🔥6👍2