Telegram Web
​​Где-то месяц назад мне на Upwork написал один потенциальный клиент, который искал разработчика для 3D визуализации.

Реальным этот клиент так и не стал, но в процессе обсуждений я сделала небольшой прототип на ThreeJS с TweenMax анимациями. Идея прототипа — проверить, насколько эффективно получится нарисовать несколько тысяч интерактивных элементов в пространстве.

Не знаю, насколько этот прототип оказался полезен в итоге, но не пропадать же ему — поделюсь с вами!

https://codepen.io/gnykka/pen/NWVjbQP
Нерегулярная подборка ссылок на этой неделе получилась про интересные и необычные примеры.

📝 Amy Goodchild написала очень большую и подробную статью, как с помощью p5.js она оцифровала свой почерк, чтобы использовать его в генеративных проектах.

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

🎶 Ещё одна статья про музыку, на этот раз — как красиво и с минимумом усилий заверстать ноты с помощью HTML и CSS.

🎮 Статья про визуализацию механик игры Tekken описывает, как можно разбить игровые механики на компоненты и создать карточки для их сравнения.
​​React Sparklines

Написала вчера подробную статью, как создать компонент для рисования спарклайнов на Typescript и React без использования каких-либо зависимостей, только с помощью SVG. И как с помощью ResizeObserver сделать их автоматически подстраиваемыми под размер родителя.

Читать тут 👉 https://dev.to/gnykka/how-to-create-a-sparkline-component-in-react-4e1
Нашла недавно прекрасную статью про паттерны дизайна таблиц.

Небольшая выдержка от меня:
1. Текстовые данные выравнивайте по левому краю, числовые – по правому.

2. Избегайте центрирования текста – оно усложняет восприятие.

3. Используйте моноширинные шрифты для чисел – так их легче сравнивать.

4. Избегайте повторений заголовков в ячейках.

5. Не злоупотребляйте рамками и цветами фона. Стремитесь убрать визуальный шум.

6. Если в двух столбцах находятся связанные данные, объедините их.

7. Используйте визуальные индикаторы, например, лейблы для статусов.

8. Для больших данных закрепляйте строку заголовков или первый столбец.

9. Пагинация, сортировка и изменение размеров столбцов дадут пользователям больше контроля.

10. Часть активных действий с ячейками можно показывать при наведении на строку.

Всё проиллюстрировано примерами, которые хорошо показывают, как даже маленькие изменения способны повысить читабельность любых таблиц.
Рассылки, которые я читаю

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

В этом списке я собрала свой топ-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 сообщества с интервью и советами по созданию, монетизации и управлению цифровыми продуктами.

Буду рада рекомендациям, поэтому добавляйте свои любимые рассылки в комментариях!
This media is not supported in your browser
VIEW IN TELEGRAM
Визуализация погоды с помощью рисованных пейзажей

Мне очень понравилась идея! Картинки показывают дом в лесу, по оси X отображено время, по оси Y — различные погодные условия, а деревья кодируют направление и силу ветра. Написано на Python, оптимизировано для рисования на небольших E-Ink дисплеях.
​​Как расставить лейблы на графике

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

🔗 https://codepen.io/gnykka/pen/ExqJrKY

Я сделала обычный линейный график на D3, поместив поверх всего контейнеры для ховер-элементов (лейблов и точек на линиях) и прямоугольник, который ловит события мыши. Для лейблов я использую foreignObject – он наконец-то более-менее поддерживается в разных браузерах, включая Safari (главное – не забыть явно указать его размеры и добавлять элементы с префиксом xhtml).

После отрисовки лейблов я вызываю специальную функцию для их размещения. Если кратко, то я прохожу по всем лейблам и сдвигаю их, если они накладываются на предыдущие. Если в результате сдвигов они выходят за пределы графика, то корректирую их положение обратно.

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

🎞 Title Drops — увлекательное исследование явления title drop. Это момент, когда персонажи фильма произносят название самого фильма. Оказалось, что такие сцены встречаются гораздо чаще, чем кажется, и не только в биографических картинах.

🏆 Эффектно и лаконично анимированные результаты спортивных соревнований.

📰 Исследовательская статья о визуализациях Второй мировой войны с особым акцентом на карты из газет того времени.

📚 Карта книг, чаще всего упоминаемых на HackerNews. Все книги разделены по тематикам и дополнены краткими описаниями. В основном делятся связанным с бизнесом и программированием, но есть и наука с художественной литературой.

🏙 Любопытный хитмап преступлений в разных городах США. Данные взяты из открытых баз и обновляются в среднем раз в месяц.

Вакансия
2ГИС ищет менеджера продукта для 2GIS Pro —своей новой geoBI-системы управления и аналитики геоданных. Если стало интересно, пишите Ирине.
​​Год назад я писала про статью «Миф об объективных данных». В ней описывалась идея, что объективность данных — это относительно новый концепт, который зачастую ограничивает нас в познании и анализе. Любые данные всегда субъективны, потому что с ними на каждом этапе работает человек, внося всё больше потенциальных искажений. Мы не должны бояться этой субъективности, но обязаны её признавать и уметь с ней работать.

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

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

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

Если мы не можем избавиться от субъективности, то хотя бы должны не скрывать её. Из этого вытекают три основных правила:

1. Показывать невидимое. Откуда взялись данные? Насколько они могут быть неточными? Кто заинтересован в этих данных или на кого они могут повлиять?

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

3. Задумываться о смыслах. Наша задача — бороться за частность данных и оберегать их от намеренных или ненамеренных искажений.
This media is not supported in your browser
VIEW IN TELEGRAM
Как оживить объекты в D3 с помощью анимаций?

Недавно я пыталась разобраться, как именно работают анимации под капотом D3, и в итоге написала небольшой (и, надеюсь, интересный) туториал.

Чтобы не делать банальные линии и столбики, в этот раз я решила анимировать орбитальную систему. Показываю базовые приёмы и объясняю, что такое tween функция и как с её помощью можно расставить планеты по орбитам.

Читать статью 👉 https://dev.to/gnykka/bringing-svg-elements-to-life-with-d3s-tween-function-42me

Смотреть код 👉 https://codepen.io/gnykka/pen/EaYzyJz
📚 Five Lessons of Golf

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

Чтобы активнее развиваться, я купила себе книгу "Five Lessons: The Modern Fundamentals of Golf". Её автор — Бен Хоган, один из величайших гольфистов в истории, который, чтобы компенсировать свой невысокий рост, разработал свою методику удара и игры.

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

Очень захотелось с вами поделиться!
Цвет в визуализациях

Нашла и прочитала недавно прекрасную статью Practical Rules for Using Color in Charts от Стивена Фью про (как понятно из названия) правила использования цвета в графиках.

Собрала для вас краткий конспект.

Статья написана для людей, которые, хотя и не сильно погружены в теорию цвета, вынуждены постоянно с ней сталкиваться на практике.

Главное, что надо помнить про цвет — мы воспринимаем его не абсолютно, а относительно. На этой особенности построены оптические иллюзии, когда элементы одного цвета помещают на разный фон, чтобы они тоже казались разными.

🔸Правило 1
Чтобы элементы одного цвета воспринимались одинаково, они должны быть расположены на одном фоне. Да, и никаких градиентов для украшения!

🔸Правило 2
Чтобы элементы были явно заметны, они должны контрастировать с фоном.

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

🔸Правило 3
Цвет должен быть использован для отображения информации, а не для развлечения.

🔸Правило 4
Разные цвета должны отображать различия в данных. Если данные одного типа, его цвет тоже должен быть один.

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

🔸Правило 5
Используйте мягкие и натуральный цвета для большей части информации, а яркие и тёмные — для выделение особенностей.

Автор тут делился лайфхаком, что у него есть несколько предзаготовленных палитр, которые он использует в графиках. Часть из них мягкие и спокойные для случаев, когда данных много. Часть — яркие для заметности.

Ещё все наверняка помнят крутой инструмент для создания палитр от Синтии Брюер. В нём есть 3 типа палитр: категориальная, последовательная и дивергентная.

🔸Правило 6
Для диапазонов последовательных значений лучше использовать один оттенок цвета, меняя его интенсивность. Для разных типов данных подойдёт палитра разных различающихся оттенков похожей интенсивности. Соединение этих двух типов — 2 цвета, переходящие один в другой — могут кодировать диапазоны, у которых есть логическое изменение в середине.

В любой визуализации только часть объектов кодирую непосредственно данные. Это, например, линии, столбики, точки. И есть ещё дополнительные объекты, которые помогают понимать эти данные. Например, лейблы, оси, легенда.

🔸Правило 7
Дополнительные объекты должны быть заменты настолько, чтобы выполнять свою функцию, но не больше. Они не должны перетягивать на себя внимание. Очень перекликается с правилом Тафти об отношении количества чернил к данным.

И пара финальных правил.

🔸Правило 8
Избегайте комбинацию зелёного и красного цветов, чтобы визуализацию смогли распознать люди с особенностями восприятия цвета.

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

🌀 Небольшое исследование о том, почему простые числа в полярных координатах формируют спирали или линии.

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

📊 Подробный гайд с примерами кода на R, показывающий, как можно использовать гистограмму в роли легенды для графика.

🎨 Статья с советами, как эффективнее всего создавать монохромные графики, если нет возможности или желания использовать яркие цвета.

🍖 Забавное исследование о том, работает ли принцип «чем ближе к вокзалу, тем хуже кебабы». Спойлер: никакой корреляции автор так и не нашёл.
2025/06/14 15:14:59
Back to Top
HTML Embed Code: