Интерактивная временная шкала известных людей, живших в разные эпохи с 3его тысячелетия до нашей эры.

https://janwillemtulp.github.io/parallel-lives

Главная идея – сфокусироваться не столько на датах рождения и смерти, сколько на возрасте в разные годы. Данные взяты отсюда. Сама визуализация сделана на D3.js и Svelte.

Если будете смотреть с телефона, то поверните его горизонтально — сайт не адаптирован под узкие размеры экранов: колонка справа обрезается.

Друзья, у меня сейчас будет лично-профессиональное объявление.

❗️Я открываю консультации по созданию визуализаций данных.

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

Если вы хотите на такую консультацию, напишите мне в личные сообщения (@gnykka). Мы обсудим, с чем именно вам нужна помощь, и договоримся о дальнейшей работе и условиях.

Собрала вчера вечером небольшую образовательную подборку ссылок на выходные:

⏱ Визуальная объяснялка, как работают promises в JavaScript.

🎨 Подробный интерактивный гайд по CSS queries.

📊 Сервис, позволяющий превратить Google Sheets в полноценный API для приложения.

🤖 Статья, как написать бот для инстаграма, автоматически выкладывающий сгенерированные картинки каждый день.

📰 Простые советы, как улучшить типографику на сайте.

​​Недавно я наткнулась на увлекательное видео про визуализацию всех статей английской Википедии.

Существует игра Wikipedia Race или Wiki Game, в которой нужно на скорость найти путь между двумя совершенно разными и как будто бы несвязанными статьями Википедии. Автор визуализации хотел понять, всегда ли можно найти решение для этой игры.

Оказывается, что нет, и около 5% статей находятся в тупиках или же являются сиротами, не связанными со статьями на другие темы. Например, значительное количество статей о иранских деревнях образуют кластеры, которые не ведут никуда и из которых невозможно выйти. Тем не менее в среднем от любой статьи можно построить путь до 92% других.

Один из самых длинных найденных путей состоит из более чем 160 статей. Этот путь ведет от статьи об атлетике на Арабских играх 1953 года к списку трасс под номером 999. Не знаю, зачем кому-то нужно это знание, но живите теперь с ним!

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

Три самые популярные статьи, на которые чаще всего ссылаются, — это Соединенные Штаты, футбол и Вторая мировая война. Автор объясняет это тем, что люди чаще всего пишут и ссылаются на темы, наиболее близкие и понятные им. И что основная масса контента англоязычной Википедии создается пользователями из США.

В завершение несколько технических деталей:
– Граф сделан на python-igraph с помощью алгоритма Distributed Recursive Layout.
– Сообщества собраны с помощью алгоритма Leiden.
– Учитывались все статьи кроме редиректов и ссылки только в теле статьи.

https://www.youtube.com/watch?v=JheGL6uSF-4

Возвращаюсь с новой подборкой!

🌟 Статья 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 тег.

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

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

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

https://codepen.io/gnykka/pen/NWVjbQP

Нерегулярная подборка ссылок на этой неделе получилась про интересные и необычные примеры.

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

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

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

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

​​React Sparklines

Написала вчера подробную статью, как создать компонент для рисования спарклайнов на Typenoscript и 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. Javanoscript Weekly. Это уже про программирование, с уклоном во фронтенд. Статьи, как что-то сделать, новости релизов и прочее. Я ещё подписана на похожие рассылки по React и Ruby, но по сути все они схожи.

8. Fullstack Bulletin. Ещё одна техническая рассылка, но уже для фулл-стек разработчиков.

9. Leadership in Tech. Подборка статей про ведение проектов, менторинг, управление и многое другое — много полезного нетехнического контента.

10. The Bootstrapped Founder. Это рассылка для build in public сообщества с интервью и советами по созданию, монетизации и управлению цифровыми продуктами.

Буду рада рекомендациям, поэтому добавляйте свои любимые рассылки в комментариях!

Визуализация погоды с помощью рисованных пейзажей

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

​​Как расставить лейблы на графике

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

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

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

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

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

Давно не было подборок с интересными визуализациями!

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

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

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

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

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

Вакансия
2ГИС ищет менеджера продукта для 2GIS Pro —своей новой geoBI-системы управления и аналитики геоданных. Если стало интересно, пишите Ирине.

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

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

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

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

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

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

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

3. Задумываться о смыслах. Наша задача — бороться за частность данных и оберегать их от намеренных или ненамеренных искажений.

Как оживить объекты в D3 с помощью анимаций?

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

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

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

Смотреть код 👉 https://codepen.io/gnykka/pen/EaYzyJz