Визуализируй это!

​​Где-то месяц назад мне на Upwork написал один потенциальный клиент, который искал разработчика для 3D визуализации. Реальным этот клиент так и не стал, но в процессе обсуждений я сделала небольшой прототип на ThreeJS с TweenMax анимациями. Идея прототипа — проверить, насколько эффективно получится нарисовать несколько тысяч интерактивных элементов в пространстве. Не знаю, насколько этот прототип оказался полезен в итоге, но не пропадать же ему — поделюсь с вами! https://codepen.io/gnykka/pen/NWVjbQP

Возвращаюсь с новой подборкой! 🌟 Статья 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 тег.

​​Недавно я наткнулась на увлекательное видео про визуализацию всех статей английской Википедии. Существует игра Wikipedia Race или Wiki Game, в которой нужно на скорость найти путь между двумя совершенно разными и как будто бы несвязанными статьями Википедии. Автор визуализации хотел понять, всегда ли можно найти решение для этой игры. Оказывается, что нет, и около 5% статей находятся в тупиках или же являются сиротами, не связанными со статьями на другие темы. Например, значительное количество статей о иранских деревнях образуют кластеры, которые не ведут никуда и из которых невозможно выйти. Тем не менее в среднем от любой статьи можно построить путь до 92% других. Один из самых длинных найденных путей состоит из более чем 160 статей. Этот путь ведет от статьи об атлетике на Арабских играх 1953 года к списку трасс под номером 999. Не знаю, зачем кому-то нужно это знание, но живите теперь с ним! Кроме исследования путей автор экспериментировал и с выделением сообществ, объединяющих статьи по темам. Статьи обычно ссылаются на другие в рамках своего тематического сообщества, но иногда плавно перетекают и в смежные. Например, южнокорейский фильм «Паразиты», относящийся к сообществу южнокорейской культуры, в графе оказывается заметно ближе к американскому кинематографу. Три самые популярные статьи, на которые чаще всего ссылаются, — это Соединенные Штаты, футбол и Вторая мировая война. Автор объясняет это тем, что люди чаще всего пишут и ссылаются на темы, наиболее близкие и понятные им. И что основная масса контента англоязычной Википедии создается пользователями из США. В завершение несколько технических деталей: – Граф сделан на python-igraph с помощью алгоритма Distributed Recursive Layout. – Сообщества собраны с помощью алгоритма Leiden. – Учитывались все статьи кроме редиректов и ссылки только в теле статьи. https://www.youtube.com/watch?v=JheGL6uSF-4

Собрала вчера вечером небольшую образовательную подборку ссылок на выходные: ⏱ Визуальная объяснялка, как работают promises в JavaScript. 🎨 Подробный интерактивный гайд по CSS queries. 📊 Сервис, позволяющий превратить Google Sheets в полноценный API для приложения. 🤖 Статья, как написать бот для инстаграма, автоматически выкладывающего сгенерированные картинки каждый день. 📰 Простые советы, как улучшить типографику на сайте.

Друзья, у меня сейчас будет лично-профессиональное объявление. ❗️Я открываю консультации по созданию визуализаций данных. Я могу: — помочь разобраться с данными и требованиями; — подобрать правильные инструменты и библиотеки; — дать советы по коду, дизайну или UX; — собрать прототип или финальный вариант визуализации с выбранными инструментами. Если вы хотите на такую консультацию, напишите мне в личные сообщения (@gnykka). Мы обсудим, с чем именно вам нужна помощь, и договоримся о дальнейшей работе и условиях.

Интерактивная временная шкала известных людей, живших в разные эпохи с 3его тысячелетия до нашей эры. https://janwillemtulp.github.io/parallel-lives Главная идея – сфокусироваться не столько на датах рождения и смерти, сколько на возрасте в разные годы. Данные взяты отсюда. Сама визуализация сделана на D3.js и Svelte. Если будете смотреть с телефона, то поверните его горизонтально — сайт не адаптирован под узкие размеры экранов: колонка справа обрезается.

​​Коллекция SVG иконок графиков Я к вам сегодня с релизом небольшого проекта, над которым я неторопливо работала больше года. Пару лет назад я рассказывала на HolyJS про визуализации, D3.js и React и готовила к этому докладу презентацию. Для неё мне понадобились небольшие иконки разных типов графиков. Ничего нужного мне я в открытом доступе не нашла и в итоге сделала эти иконки сама. Тогда же я подумала, что можно было бы их доработать и выпустить как единую коллекцию. И вот я эту идею наконец-то реализовала и представляю вам Sparkle Icons! ✨ https://sparkles.slaylines.io ✨ Это коллекция SVG иконок разных графиков. Каждая иконка сделана в трёх вариантах: базовый чёрный, лёгкий чёрный и цветной. Все иконки размера 32x32 пикселя, но нормально смотрятся и уменьшенными или увеличенными. Скачать можно с сайта, как весь архив сразу, так и каждую иконку по-отдельности. Всё под MIT лицензией, то есть можно скачивать, менять и использовать, как захотите. Буду рада комментариям и идеям!

​​Как читают древние свитки Две тысячи лет назад произошло одно из самых известных в истории извержений Везувия. Среди прочих разрушений под слоем лавы и пепла оказалась одна вилла, по предположениям служившая библиотекой. Её обнаружили в 18ом веке. Находившиеся там свитки частично сохранились, но спеклись, превратившись в спресованные куски золы. Развернуть их практически невозможно — они сразу рассыпаются. Но, используя современные технологии, их можно сканировать на мощном ускорителе частиц в очень высоком разрешении и попробовать прочитать. Процесс такого виртуального раскручивания свитка состоит из трех ключевых этапов: сканирование для создания трехмерной модели, сегментация для визуализации и разглаживания слоев папируса, и, наконец, обнаружение чернил с помощью методов машинного обучения для чтения текста. 15 марта 2023 года исследователи выложили 3D снимки одного из найденных свитков в открытый доступ и объявили конкурс на их расшифровку с призовым фондом в более чем миллион долларов. Среди прочего были и промежуточные призы, например, за первое прочитанное слово (ΠΟΡΦΥΡΑϹ – фиолетовый), так что участники могли пользоваться результатами друг друга. В начале этого года появился и финальный победитель — это команда из трёх парней, которые познакомились на самом конкурсе. Расшифрованный ими свиток — ранее неизвестное эпикурейское сочинение о природе наслаждения. Потрясающе интересная история! На сайте конкурса подробно рассказывается и про научные методы, и про следующие этапы работы. А ещё там масса красивых картинок и 3D визуализаций. И сам текст свитка, если захотите его прочитать. https://scrollprize.org/grandprize

Возвращаю нерегулярные выпуски интересных ссылок! В этот раз три очень разные статьи и две подборки: данных и книг. 🌀 Статья, как оптические иллюзии могут проявляться в визуализациях и обманывать зрителя. 🎨 Подробный гайд по созданию responsive SVG изображений. 🔍 Эссе про незаметные на первый взгляд детали интерактивного дизайна и путь к пониманию их значения. 🗂 Курируемая коллекция наборов данных, как реальных, так и сгенерированных тестовых. 📚 Подборка книг по дизайну для недизайнеров от команды платёжной системы Stripe.

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