Визуализируй это!
前往频道在 Telegram
Привет, я Наташа (@gnykka) и это мой канал про программирование визуализаций данных и не только. ——— 🕸️ slaylines.io | gnykka.io
显示更多2 905
订阅者
无数据24 小时
-87 天
-1730 天
数据加载中...
吸引订阅者
八月 '25
八月 '250
在0个频道中
七月 '25
+26
在0个频道中
Get PRO
六月 '25
+36
在0个频道中
Get PRO
五月 '25
+59
在0个频道中
Get PRO
四月 '25
+38
在1个频道中
Get PRO
三月 '25
+36
在0个频道中
Get PRO
二月 '25
+53
在0个频道中
Get PRO
一月 '25
+51
在0个频道中
Get PRO
十二月 '24
+53
在2个频道中
Get PRO
十一月 '24
+63
在0个频道中
Get PRO
十月 '24
+62
在1个频道中
Get PRO
九月 '24
+69
在1个频道中
Get PRO
八月 '24
+40
在1个频道中
Get PRO
七月 '24
+124
在1个频道中
Get PRO
六月 '24
+72
在0个频道中
Get PRO
五月 '24
+78
在3个频道中
Get PRO
四月 '24
+87
在1个频道中
Get PRO
三月 '24
+80
在1个频道中
Get PRO
二月 '24
+92
在2个频道中
Get PRO
一月 '24
+86
在0个频道中
Get PRO
十二月 '23
+110
在2个频道中
Get PRO
十一月 '23
+166
在10个频道中
Get PRO
十月 '23
+98
在2个频道中
Get PRO
九月 '23
+127
在0个频道中
Get PRO
八月 '23
+184
在0个频道中
Get PRO
七月 '23
+1 053
在0个频道中
Get PRO
六月 '23
+18
在0个频道中
Get PRO
五月 '23
+56
在0个频道中
Get PRO
四月 '23
+17
在0个频道中
Get PRO
三月 '23
+17
在0个频道中
Get PRO
二月 '23
+42
在0个频道中
Get PRO
一月 '23
+27
在0个频道中
Get PRO
十二月 '22
+15
在0个频道中
Get PRO
十一月 '22
+63
在0个频道中
Get PRO
十月 '22
+31
在0个频道中
Get PRO
九月 '22
+143
在0个频道中
Get PRO
八月 '22
+12
在0个频道中
Get PRO
七月 '22
+11
在0个频道中
Get PRO
六月 '22
+27
在0个频道中
Get PRO
五月 '22
+9
在0个频道中
Get PRO
四月 '22
+120
在0个频道中
Get PRO
三月 '220
在0个频道中
Get PRO
二月 '220
在0个频道中
Get PRO
一月 '220
在0个频道中
Get PRO
十二月 '210
在0个频道中
Get PRO
十一月 '210
在0个频道中
Get PRO
十月 '210
在0个频道中
Get PRO
九月 '21
+5
在0个频道中
Get PRO
八月 '21
+10
在0个频道中
Get PRO
七月 '21
+4
在0个频道中
Get PRO
六月 '21
+6
在0个频道中
Get PRO
五月 '21
+8
在0个频道中
Get PRO
四月 '21
+11
在0个频道中
Get PRO
三月 '21
+30
在0个频道中
Get PRO
二月 '21
+56
在0个频道中
Get PRO
一月 '21
+420
在0个频道中
频道帖子
За последние месяцы у меня скопилось несколько ссылок, как раз на новую подборку.
🌀 Небольшое исследование о том, почему простые числа в полярных координатах формируют спирали или линии.
🗓 Веб приложение, позволяющее визуализировать свою жизнь в виде раскрашенных и подписанных «дней-квадратиков» — от личных до глобальных событий.
📊 Подробный гайд с примерами кода на R, показывающий, как можно использовать гистограмму в роли легенды для графика.
🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.
🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.
| 2 | Цвет в визуализациях
Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.
Собрала для вас краткий конспект.
Статья написана для людей, которые, хотя и не сильно погружены в теорию цвета, вынуждены постоянно с ней сталкиваться на практике.
Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.
🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!
🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.
На конференциях, посвященных теории и восприятию цвета, слайды презентаций чаще блёклые, с использованием оттенков серого. Это эмпирическое заключение автора, если что. Секрет в том, что использовать цвет стоит осмысленно.
🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.
🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.
В природе цвета часто служат определённым целям. Например, цвет кожи животных могут отпугивать хищников, привлекать партнёров или даже служить камуфляжем. Используя это свойство, можно научиться привлекать внимание к самому важному.
🔸Правило 5
Используйте мягкие и натуральный цвета для большей части информации, а яркие и тёмные — для выделение особенностей.
Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.
Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.
🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.
В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.
🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.
И пара финальных правил.
🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.
🔸Правило 9
Не используйте визуальные эффекты в графиках. Чем проще и понятнее выглядит визуализация, тем лучше. | 1 070 |
| 3 |  +7📚 Five Lessons of Golf
Несколько месяцев назад я начала учиться играть в гольф. Результаты пока скромные, но некоторый прогресс уже ощущается.
Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.
Книга интересно и легко читается, но особенно меня привлекли картинки. Это визуализации: позы при замахе, удара, положения клюшки или тела.
Очень захотелось с вами поделиться! | 1 217 |
| 4 |  Как оживить объекты в D3 с помощью анимаций?
Недавно я пыталась разобраться, как именно работают анимации под капотом D3, и в итоге написала небольшой (и, надеюсь, интересный) туториал.
Чтобы не делать банальные линии и столбики, в этот раз я решила анимировать орбитальную систему. Показываю базовые приёмы и объясняю, что такое tween функция и как с её помощью можно расставить планеты по орбитам.
Читать статью 👉 https://dev.to/gnykka/bringing-svg-elements-to-life-with-d3s-tween-function-42me
Смотреть код 👉 https://codepen.io/gnykka/pen/EaYzyJz | 1 241 |
| 5 | Год назад я писала про статью «Миф об объективных данных». В ней описывалась идея, что объективность данных — это относительно новый концепт, который зачастую ограничивает нас в познании и анализе. Любые данные всегда субъективны, потому что с ними на каждом этапе работает человек, внося всё больше потенциальных искажений. Мы не должны бояться этой субъективности, но обязаны её признавать и уметь с ней работать.
Недавно я наткнулась на другую статью «Этические аспекты исследований в области визуализации», которая, как мне кажется, перекликается с предыдущей. Здесь автор пытается понять, как этические вопросы проявляются в визуализациях данных, как это влияет на восприятие и что со всем этим делать.
С одной стороны, может показаться, что никаких серьёзных этических проблем нет. Создавая визуализации, мы часто выступаем лишь связующим звеном между данными и пользователями. Обычно мы не создаём сами данные и не отвечаем за то, как в дальнейшем будут использоваться наши визуализации.
Но, с другой стороны, данные не возникают из ниоткуда. И, как известно, они не могут быть полностью объективными: их собирают люди, чьи цели и опыт влияют на результат. Кроме того сами визуализации с помощью дизайна, цвета, символов и ассоциаций способны интерпретировать данные так, чтобы влиять на их восприятие. Именно поэтому графики часто применяют, например, в политической пропаганде — из-за их способности воздействовать на зрителей.
Если мы не можем избавиться от субъективности, то хотя бы должны не скрывать её. Из этого вытекают три основных правила:
1. Показывать невидимое. Откуда взялись данные? Насколько они могут быть неточными? Кто заинтересован в этих данных или на кого они могут повлиять?
2. Собирать данные с эмпатией. Меньше абстракций и сухих статистик, больше реалистичности деталей. Но при этом и никаких личных или конфиденциальных данных, которые могут кому-то навредить.
3. Задумываться о смыслах. Наша задача — бороться за частность данных и оберегать их от намеренных или ненамеренных искажений. | 830 |
| 6 | Давно не было подборок с интересными визуализациями!
🎞 Title Drops — увлекательное исследование явления title drop. Это момент, когда персонажи фильма произносят название самого фильма. Оказалось, что такие сцены встречаются гораздо чаще, чем кажется, и не только в биографических картинах.
🏆 Эффектно и лаконично анимированные результаты спортивных соревнований.
📰 Исследовательская статья о визуализациях Второй мировой войны с особым акцентом на карты из газет того времени.
📚 Карта книг, чаще всего упоминаемых на HackerNews. Все книги разделены по тематикам и дополнены краткими описаниями. В основном делятся связанным с бизнесом и программированием, но есть и наука с художественной литературой.
🏙 Любопытный хитмап преступлений в разных городах США. Данные взяты из открытых баз и обновляются в среднем раз в месяц.
Вакансия
2ГИС ищет менеджера продукта для 2GIS Pro —своей новой geoBI-системы управления и аналитики геоданных. Если стало интересно, пишите Ирине. | 3 770 |
| 7 | Как расставить лейблы на графике
Пару недель назад я занималась интересной задачей. У меня был график с несколькими линиями и эффектом наведения мышки. Нужно было придумать простой алгоритм размещения лейблов текущих значений так, чтобы они не перекрывали друг друга.
🔗 https://codepen.io/gnykka/pen/ExqJrKY
Я сделала обычный линейный график на D3, поместив поверх всего контейнеры для ховер-элементов (лейблов и точек на линиях) и прямоугольник, который ловит события мыши. Для лейблов я использую foreignObject – он наконец-то более-менее поддерживается в разных браузерах, включая Safari (главное – не забыть явно указать его размеры и добавлять элементы с префиксом xhtml).
После отрисовки лейблов я вызываю специальную функцию для их размещения. Если кратко, то я прохожу по всем лейблам и сдвигаю их, если они накладываются на предыдущие. Если в результате сдвигов они выходят за пределы графика, то корректирую их положение обратно.
Получился очень простой алгоритм. Он эффективно работает если линий немного, а высота графика достаточная и точно вмещает все лейблы. | 947 |
| 8 |  Визуализация погоды с помощью рисованных пейзажей
Мне очень понравилась идея! Картинки показывают дом в лесу, по оси X отображено время, по оси Y — различные погодные условия, а деревья кодируют направление и силу ветра. Написано на Python, оптимизировано для рисования на небольших E-Ink дисплеях. | 1 425 |
| 9 | Рассылки, которые я читаю
Я давно хотела составить личную подборку с основными рассылками, на которые подписана. У меня их много: часть про визуализации, часть про программирование, а часть — про ведение проектов.
В этом списке я собрала свой топ-10:
1. Refind. Ежедневная подборка статей по выбранным интересам. Это моя самая любимая рассылка, с её помощью я нашла много крутых блогов.
2. HackerNews Letter. HackerNews — это что-то вроде форума или соцсети с фокусом на технические и бизнес темы. Эта рассылка каждую пятницу приносит мне лучшие посты и обсуждения оттуда.
3. Flowing Data. Разбавлю список визуализациями: хорошая рассылка с примерами и материалами про данные, статистику и графики.
4. Data Elixir. Ещё одна рассылка про визуализации, но с технической стороны. В основном статьи про данные, алгоритмы, машинное обучение, AI и прочее подобное.
5. Gorilla Sun. Одна из моих любимых и самых длинных рассылок про генеративный арт и Web3. Много новостей, статей, примеров и ссылок.
6. HeyDesigner. Еженедельная рассылка для дизайнеров и всех причастных. Иногда беру отсюда ссылки про дизайн.
7. Javascript Weekly. Это уже про программирование, с уклоном во фронтенд. Статьи, как что-то сделать, новости релизов и прочее. Я ещё подписана на похожие рассылки по React и Ruby, но по сути все они схожи.
8. Fullstack Bulletin. Ещё одна техническая рассылка, но уже для фулл-стек разработчиков.
9. Leadership in Tech. Подборка статей про ведение проектов, менторинг, управление и многое другое — много полезного нетехнического контента.
10. The Bootstrapped Founder. Это рассылка для build in public сообщества с интервью и советами по созданию, монетизации и управлению цифровыми продуктами.
Буду рада рекомендациям, поэтому добавляйте свои любимые рассылки в комментариях! | 968 |
| 10 |  Нашла недавно прекрасную статью про паттерны дизайна таблиц.
Небольшая выдержка от меня:
1. Текстовые данные выравнивайте по левому краю, числовые – по правому.
2. Избегайте центрирования текста – оно усложняет восприятие.
3. Используйте моноширинные шрифты для чисел – так их легче сравнивать.
4. Избегайте повторений заголовков в ячейках.
5. Не злоупотребляйте рамками и цветами фона. Стремитесь убрать визуальный шум.
6. Если в двух столбцах находятся связанные данные, объедините их.
7. Используйте визуальные индикаторы, например, лейблы для статусов.
8. Для больших данных закрепляйте строку заголовков или первый столбец.
9. Пагинация, сортировка и изменение размеров столбцов дадут пользователям больше контроля.
10. Часть активных действий с ячейками можно показывать при наведении на строку.
Всё проиллюстрировано примерами, которые хорошо показывают, как даже маленькие изменения способны повысить читабельность любых таблиц. | 1 194 |
| 11 | React Sparklines
Написала вчера подробную статью, как создать компонент для рисования спарклайнов на Typescript и React без использования каких-либо зависимостей, только с помощью SVG. И как с помощью ResizeObserver сделать их автоматически подстраиваемыми под размер родителя.
Читать тут 👉 https://dev.to/gnykka/how-to-create-a-sparkline-component-in-react-4e1 | 1 152 |
| 12 | Нерегулярная подборка ссылок на этой неделе получилась про интересные и необычные примеры.
📝 Amy Goodchild написала очень большую и подробную статью, как с помощью p5.js она оцифровала свой почерк, чтобы использовать его в генеративных проектах.
🔊 Статья учёных Мичиганского университета рассказывает, как можно создать визуальные спектрограммы, выглядящие как обычные изображения, но при этом воспроизводимые как звук.
🎶 Ещё одна статья про музыку, на этот раз — как красиво и с минимумом усилий заверстать ноты с помощью HTML и CSS.
🎮 Статья про визуализацию механик игры Tekken описывает, как можно разбить игровые механики на компоненты и создать карточки для их сравнения. | 1 281 |
| 13 | Где-то месяц назад мне на Upwork написал один потенциальный клиент, который искал разработчика для 3D визуализации.
Реальным этот клиент так и не стал, но в процессе обсуждений я сделала небольшой прототип на ThreeJS с TweenMax анимациями. Идея прототипа — проверить, насколько эффективно получится нарисовать несколько тысяч интерактивных элементов в пространстве.
Не знаю, насколько этот прототип оказался полезен в итоге, но не пропадать же ему — поделюсь с вами!
https://codepen.io/gnykka/pen/NWVjbQP | 1 377 |
| 14 | Возвращаюсь с новой подборкой!
🌟 Статья Familiar vs Novel исследует вопрос, когда стоит придерживаться привычных решений в дизайне, а когда можно экспериментировать и придумывать новое. Стандартные интерфейсы уже знакомы пользователям, поэтому воспринимаются интуитивно. Но всегда ли это лучший путь?
🎨 Продолжает тему привычного и нового статья How the meaning of colour varies per culture. Основываясь на примерах из разных стран и контекстов, автор раскрывает, как один и тот же цвет может иметь разные ассоциации в различных культурах. Например, красный цвет в Китае символизирует удачу, тогда как на Западе он может означать опасность или стоп-сигнал. Зелёный цвет в исламских странах священен, в то время как в западной культуре он часто связан с природой и экологией. Чёрный способен вызвать чувство опасности, белый символизирует чистоту и мир, а пурпурный и жёлтый — богатство и успех. В статье приведено ещё много примеров с рассуждениями, как можно учесть культурные аспекты в дизайне продуктов для рынков разных стран.
📊 Немного про визуализации, а конкретно про график «ящик с усиками»: I’ve Stopped Using Box Plots. Should You?. Мы привыкли использовать этот график для оценки распределения, но так ли он хорош? Автор приводит примеры, когда «ящик» может ввести в заблуждение, и размышляет, чем именно его можно было бы заменить.
🌐 Большая статья от Google про всё новое, что появилось в web за последний год: The latest in CSS and web UI: I/O 2024 recap. Это, например, поддержка селектора :has(), новый Popover API, анимации, основанные на скролле, или возможность кастомизировать select тег. | 1 501 |
| 15 | Недавно я наткнулась на увлекательное видео про визуализацию всех статей английской Википедии.
Существует игра Wikipedia Race или Wiki Game, в которой нужно на скорость найти путь между двумя совершенно разными и как будто бы несвязанными статьями Википедии. Автор визуализации хотел понять, всегда ли можно найти решение для этой игры.
Оказывается, что нет, и около 5% статей находятся в тупиках или же являются сиротами, не связанными со статьями на другие темы. Например, значительное количество статей о иранских деревнях образуют кластеры, которые не ведут никуда и из которых невозможно выйти. Тем не менее в среднем от любой статьи можно построить путь до 92% других.
Один из самых длинных найденных путей состоит из более чем 160 статей. Этот путь ведет от статьи об атлетике на Арабских играх 1953 года к списку трасс под номером 999. Не знаю, зачем кому-то нужно это знание, но живите теперь с ним!
Кроме исследования путей автор экспериментировал и с выделением сообществ, объединяющих статьи по темам. Статьи обычно ссылаются на другие в рамках своего тематического сообщества, но иногда плавно перетекают и в смежные. Например, южнокорейский фильм «Паразиты», относящийся к сообществу южнокорейской культуры, в графе оказывается заметно ближе к американскому кинематографу.
Три самые популярные статьи, на которые чаще всего ссылаются, — это Соединенные Штаты, футбол и Вторая мировая война. Автор объясняет это тем, что люди чаще всего пишут и ссылаются на темы, наиболее близкие и понятные им. И что основная масса контента англоязычной Википедии создается пользователями из США.
В завершение несколько технических деталей:
– Граф сделан на python-igraph с помощью алгоритма Distributed Recursive Layout.
– Сообщества собраны с помощью алгоритма Leiden.
– Учитывались все статьи кроме редиректов и ссылки только в теле статьи.
https://www.youtube.com/watch?v=JheGL6uSF-4 | 1 493 |
| 16 | Собрала вчера вечером небольшую образовательную подборку ссылок на выходные:
⏱ Визуальная объяснялка, как работают promises в JavaScript.
🎨 Подробный интерактивный гайд по CSS queries.
📊 Сервис, позволяющий превратить Google Sheets в полноценный API для приложения.
🤖 Статья, как написать бот для инстаграма, автоматически выкладывающего сгенерированные картинки каждый день.
📰 Простые советы, как улучшить типографику на сайте. | 1 244 |
| 17 | Друзья, у меня сейчас будет лично-профессиональное объявление.
❗️Я открываю консультации по созданию визуализаций данных.
Я могу:
— помочь разобраться с данными и требованиями;
— подобрать правильные инструменты и библиотеки;
— дать советы по коду, дизайну или UX;
— собрать прототип или финальный вариант визуализации с выбранными инструментами.
Если вы хотите на такую консультацию, напишите мне в личные сообщения (@gnykka). Мы обсудим, с чем именно вам нужна помощь, и договоримся о дальнейшей работе и условиях. | 1 177 |
| 18 |  Интерактивная временная шкала известных людей, живших в разные эпохи с 3его тысячелетия до нашей эры.
https://janwillemtulp.github.io/parallel-lives
Главная идея – сфокусироваться не столько на датах рождения и смерти, сколько на возрасте в разные годы. Данные взяты отсюда. Сама визуализация сделана на D3.js и Svelte.
Если будете смотреть с телефона, то поверните его горизонтально — сайт не адаптирован под узкие размеры экранов: колонка справа обрезается. | 1 251 |
| 19 | Коллекция SVG иконок графиков
Я к вам сегодня с релизом небольшого проекта, над которым я неторопливо работала больше года.
Пару лет назад я рассказывала на HolyJS про визуализации, D3.js и React и готовила к этому докладу презентацию. Для неё мне понадобились небольшие иконки разных типов графиков. Ничего нужного мне я в открытом доступе не нашла и в итоге сделала эти иконки сама. Тогда же я подумала, что можно было бы их доработать и выпустить как единую коллекцию.
И вот я эту идею наконец-то реализовала и представляю вам Sparkle Icons!
✨ https://sparkles.slaylines.io ✨
Это коллекция SVG иконок разных графиков. Каждая иконка сделана в трёх вариантах: базовый чёрный, лёгкий чёрный и цветной. Все иконки размера 32x32 пикселя, но нормально смотрятся и уменьшенными или увеличенными. Скачать можно с сайта, как весь архив сразу, так и каждую иконку по-отдельности. Всё под MIT лицензией, то есть можно скачивать, менять и использовать, как захотите.
Буду рада комментариям и идеям! | 1 411 |
| 20 | Как читают древние свитки
Две тысячи лет назад произошло одно из самых известных в истории извержений Везувия. Среди прочих разрушений под слоем лавы и пепла оказалась одна вилла, по предположениям служившая библиотекой. Её обнаружили в 18ом веке.
Находившиеся там свитки частично сохранились, но спеклись, превратившись в спресованные куски золы. Развернуть их практически невозможно — они сразу рассыпаются. Но, используя современные технологии, их можно сканировать на мощном ускорителе частиц в очень высоком разрешении и попробовать прочитать.
Процесс такого виртуального раскручивания свитка состоит из трех ключевых этапов: сканирование для создания трехмерной модели, сегментация для визуализации и разглаживания слоев папируса, и, наконец, обнаружение чернил с помощью методов машинного обучения для чтения текста.
15 марта 2023 года исследователи выложили 3D снимки одного из найденных свитков в открытый доступ и объявили конкурс на их расшифровку с призовым фондом в более чем миллион долларов. Среди прочего были и промежуточные призы, например, за первое прочитанное слово (ΠΟΡΦΥΡΑϹ – фиолетовый), так что участники могли пользоваться результатами друг друга. В начале этого года появился и финальный победитель — это команда из трёх парней, которые познакомились на самом конкурсе.
Расшифрованный ими свиток — ранее неизвестное эпикурейское сочинение о природе наслаждения.
Потрясающе интересная история! На сайте конкурса подробно рассказывается и про научные методы, и про следующие этапы работы. А ещё там масса красивых картинок и 3D визуализаций. И сам текст свитка, если захотите его прочитать.
https://scrollprize.org/grandprize | 1 426 |
