Прочитала недавно статью Мелани Фейнберг «Миф о объективных данных».
Не знаю, бывает ли у вас такое, но я иногда могу долго сидеть над набором данных и задумываться, насколько они «правильные». В моём понимании, визуализация должна описывать реальность, внося в неё как можно меньше субъективных догадок. Но ведь ошибки могут начаться уже на этапе сбора данных и продолжаться вплоть до моих собственных заблуждений при их интерпретации.
Считается, что субъективная интерпретация данных мешает нам воспринимать реальность как она есть, и это кажется серьёзной проблемой.
Но объективность — относительно новый концепт, появившийся в 19 веке вместе с развитием фотографии. До этого научные иллюстрации чаще изображали не сам предмет, а представление о нём, наподобие карикатурных зверей из Страдающего Средневековья. Фотография позволила более точно фиксировать реальность, но принесла и свои искажения, связанные с техническими особенностями.
И хотя идея о том, что мы можем запечатлеть истину, устарела, мы всё ещё склонны воспринимать объективность как абсолют и стремиться к ней. Это влияет на наше отношение к данным и их сбору — мы можем упустить из виду, что за любой работой с данными стоит человеческая интерпретация.
Например, даже при такой банальной задаче как категоризация носков мы можем ограничиться только «объективными» количественными параметрами, получая точную, но неполную и часто бесполезную картину, или углубиться в субъективные вопросы о сочетаемости и удобстве.
Таким образом, стремление к полной объективности в работе с данными оказывается заблуждением. Любой набор данных неизбежно содержит следы человеческой интерпретации и как следствие субъективности. Это не делает данные неверными или бесполезными. Напротив, осознанный подход к их анализу позволяет смотреть на них более широко и креативно.
Не знаю, бывает ли у вас такое, но я иногда могу долго сидеть над набором данных и задумываться, насколько они «правильные». В моём понимании, визуализация должна описывать реальность, внося в неё как можно меньше субъективных догадок. Но ведь ошибки могут начаться уже на этапе сбора данных и продолжаться вплоть до моих собственных заблуждений при их интерпретации.
Считается, что субъективная интерпретация данных мешает нам воспринимать реальность как она есть, и это кажется серьёзной проблемой.
Но объективность — относительно новый концепт, появившийся в 19 веке вместе с развитием фотографии. До этого научные иллюстрации чаще изображали не сам предмет, а представление о нём, наподобие карикатурных зверей из Страдающего Средневековья. Фотография позволила более точно фиксировать реальность, но принесла и свои искажения, связанные с техническими особенностями.
И хотя идея о том, что мы можем запечатлеть истину, устарела, мы всё ещё склонны воспринимать объективность как абсолют и стремиться к ней. Это влияет на наше отношение к данным и их сбору — мы можем упустить из виду, что за любой работой с данными стоит человеческая интерпретация.
Например, даже при такой банальной задаче как категоризация носков мы можем ограничиться только «объективными» количественными параметрами, получая точную, но неполную и часто бесполезную картину, или углубиться в субъективные вопросы о сочетаемости и удобстве.
Таким образом, стремление к полной объективности в работе с данными оказывается заблуждением. Любой набор данных неизбежно содержит следы человеческой интерпретации и как следствие субъективности. Это не делает данные неверными или бесполезными. Напротив, осознанный подход к их анализу позволяет смотреть на них более широко и креативно.
The MIT Press Reader
The Myth of Objective Data
When we view objectivity and subjectivity as opposites rather than complements, we distort the empirical realities of data collection.
👍11💯4🔥2
Пока я занята написанием следующих туториалов по D3.js, хочу поделиться уже существующими. Вдруг кто-то пропустил или не видел.
📈 Как сделать LineChart и ScatterChart и в чём разница между методами data и datum
📊 Как сделать BarChart с несколькими сериями данных
🗺 Карты в визуализациях
🥧 Как сделать простой PieChart
🔀 Как сделать Sankey график
📈 Как сделать LineChart и ScatterChart и в чём разница между методами data и datum
📊 Как сделать BarChart с несколькими сериями данных
🗺 Карты в визуализациях
🥧 Как сделать простой PieChart
🔀 Как сделать Sankey график
🔥17👍4
В эфире нерегулярная подборка статей и ресурсов, на которые я наткнулась за последнее время!
🌫 Погружение в шейдеры на ThreeJS. Статья сочетает основы теории и практики и сопровождает всё интерактивными примерами.
🌍 Генерируемые планеты на ThereJS. Можно настраивать параметры атмосферы, поверхности и освещения. Исходный код доступен на Github.
🕰 TimelineJS — JS-библиотека для создания интерактивных временных шкал, с возможностью использования в no-code формате через Google Таблицы и форму на сайте.
🎨 Scene.js — библиотека для создания красивых анимаций на JS и CSS.
🗓 Календарный хитмап на React, вдохновлённый визуализацией коммитов на Github.
🌫 Погружение в шейдеры на ThreeJS. Статья сочетает основы теории и практики и сопровождает всё интерактивными примерами.
🌍 Генерируемые планеты на ThereJS. Можно настраивать параметры атмосферы, поверхности и освещения. Исходный код доступен на Github.
🕰 TimelineJS — JS-библиотека для создания интерактивных временных шкал, с возможностью использования в no-code формате через Google Таблицы и форму на сайте.
🎨 Scene.js — библиотека для создания красивых анимаций на JS и CSS.
🗓 Календарный хитмап на React, вдохновлённый визуализацией коммитов на Github.
🔥10👍1
Первый пост в году должен быть содержательным и значимым, подумала я и дописала-таки за выходные туториал по созданию Тримапа с помощью D3.js!
В нём я рассказываю:
✦ Как создать и настроить график.
✦ Как победить вылезающие за пределы элементов подписи.
✦ Какой алгоритм для построения тримапа использует D3.
https://teletype.in/@gnykka/d3-treemap
Комментарии, лайки и репосты приветствуются, конечно же!
В нём я рассказываю:
✦ Как создать и настроить график.
✦ Как победить вылезающие за пределы элементов подписи.
✦ Какой алгоритм для построения тримапа использует D3.
https://teletype.in/@gnykka/d3-treemap
Комментарии, лайки и репосты приветствуются, конечно же!
Teletype
Как сделать Treemap график на D3.js
Тримап — один из самых мощных и популярных инструментов для визуализации иерархических данных. В этой статье я расскажу, как сделать его с помощью D3.
🔥18👍1🥱1
Наткнулась сегодня на Периодическую таблицу визуализаций.
Множество способов визуализации данных, разбитые по разным параметрам с примерами.
Выглядит любопытно!
Множество способов визуализации данных, разбитые по разным параметрам с примерами.
Выглядит любопытно!
🔥9❤6👍3🤔1
Задумывались ли вы когда-нибудь, откуда берутся новые идеи?
Недавно я прочитала статью "How New Ideas Arise" архитектора и поэта Паоло Беларди. В этой статье он исследует источники возникновения идей и инноваций, приводя примеры из науки и искусства.
Сама тема не нова, ещё Гегель рассматривал её в своей работе «Наука логики». Там он писал о важности интуиции и неосознанного воображения в порождении идей и об отказе от контроля рационального разума.
Позже, в 1926 году, английский психолог Грэм Уоллас в своей книге «Искусство мыслить» выделил четыре базовые этапа творческого процесса.
1. Подготовка. Это стадия расширения кругозора, накапливания знаний и формулирования проблемы.
2. Инкубация. На этом этапе мысль свободно блуждает в голове, постепенно приобретая очертания.
3. Озарение. Кульминация всего процесса, мысль оформилась и превратилась в конкретную идею.
4. Верификация. Любая такая идея должна в конце пройти проверку на адекватность.
Но Уоллас в своей модели недооценил роль культурного контекста и методов прозрения, которые часто являются ключом к возникновению инноваций.
Можно проследить множество совершенно различных примеров озарений. Например, балетная поза «на цыпочках» была вдохновлена механической системой, поднимавшей балерину для полёта над сценой. А идея о двойной спирали ДНК пришла авторам в голову, когда они увидели спиральную лестницу в кинотеатра.
Идеи могут рождаться везде — в поездах, как у Ролана Барта, или в горячей ванне, как у Вирджинии Вульф. Могут возникать по невнимательности, как у Антуана де Сент-Экзюпери, который писал о «плодотворной ошибке», или из привычки, как у Иммануила Канта, которому был очень важен строгий порядок для написания своих философских трудов. А могут и из случайности, как произошло с открытием пенициллина или спутника Плутона.
Главный вывод статьи заключается в том, что идеи - это вирусные элементы, «блуждающие в воздухе», как когда-то сказал Энди Уорхол. Поэтому процесс возникновения новых идей — это невероятная смесь намерений, случайности и внимания.
Недавно я прочитала статью "How New Ideas Arise" архитектора и поэта Паоло Беларди. В этой статье он исследует источники возникновения идей и инноваций, приводя примеры из науки и искусства.
Сама тема не нова, ещё Гегель рассматривал её в своей работе «Наука логики». Там он писал о важности интуиции и неосознанного воображения в порождении идей и об отказе от контроля рационального разума.
Позже, в 1926 году, английский психолог Грэм Уоллас в своей книге «Искусство мыслить» выделил четыре базовые этапа творческого процесса.
1. Подготовка. Это стадия расширения кругозора, накапливания знаний и формулирования проблемы.
2. Инкубация. На этом этапе мысль свободно блуждает в голове, постепенно приобретая очертания.
3. Озарение. Кульминация всего процесса, мысль оформилась и превратилась в конкретную идею.
4. Верификация. Любая такая идея должна в конце пройти проверку на адекватность.
Но Уоллас в своей модели недооценил роль культурного контекста и методов прозрения, которые часто являются ключом к возникновению инноваций.
Можно проследить множество совершенно различных примеров озарений. Например, балетная поза «на цыпочках» была вдохновлена механической системой, поднимавшей балерину для полёта над сценой. А идея о двойной спирали ДНК пришла авторам в голову, когда они увидели спиральную лестницу в кинотеатра.
Идеи могут рождаться везде — в поездах, как у Ролана Барта, или в горячей ванне, как у Вирджинии Вульф. Могут возникать по невнимательности, как у Антуана де Сент-Экзюпери, который писал о «плодотворной ошибке», или из привычки, как у Иммануила Канта, которому был очень важен строгий порядок для написания своих философских трудов. А могут и из случайности, как произошло с открытием пенициллина или спутника Плутона.
Главный вывод статьи заключается в том, что идеи - это вирусные элементы, «блуждающие в воздухе», как когда-то сказал Энди Уорхол. Поэтому процесс возникновения новых идей — это невероятная смесь намерений, случайности и внимания.
The MIT Press Reader
How New Ideas Arise
Architect and poet Paolo Belardi traces the many conditions and situations that have inspired extraordinary ideas across the arts and sciences.
👍13👏3
Нашла на днях интересную визуализацию распределений: какие значения будут получаться, если использовать разное выражение для рандомизации.
Сначала для каждой точки случайным образом выбирается угол от 0 до 360. Потом с помощью функции определяется позиция точки на линии угла.
Сначала для каждой точки случайным образом выбирается угол от 0 до 360. Потом с помощью функции определяется позиция точки на линии угла.
👍12🥰4
Возвращаю нерегулярные выпуски интересных ссылок! В этот раз три очень разные статьи и две подборки: данных и книг.
🌀 Статья, как оптические иллюзии могут проявляться в визуализациях и обманывать зрителя.
🎨 Подробный гайд по созданию responsive SVG изображений.
🔍 Эссе про незаметные на первый взгляд детали интерактивного дизайна и путь к пониманию их значения.
🗂 Курируемая коллекция наборов данных, как реальных, так и сгенерированных тестовых.
📚 Подборка книг по дизайну для недизайнеров от команды платёжной системы Stripe.
🌀 Статья, как оптические иллюзии могут проявляться в визуализациях и обманывать зрителя.
🎨 Подробный гайд по созданию responsive SVG изображений.
🔍 Эссе про незаметные на первый взгляд детали интерактивного дизайна и путь к пониманию их значения.
🗂 Курируемая коллекция наборов данных, как реальных, так и сгенерированных тестовых.
📚 Подборка книг по дизайну для недизайнеров от команды платёжной системы Stripe.
👍8🔥7
Как читают древние свитки
Две тысячи лет назад произошло одно из самых известных в истории извержений Везувия. Среди прочих разрушений под слоем лавы и пепла оказалась одна вилла, по предположениям служившая библиотекой. Её обнаружили в 18ом веке.
Находившиеся там свитки частично сохранились, но спеклись, превратившись в спресованные куски золы. Развернуть их практически невозможно — они сразу рассыпаются. Но, используя современные технологии, их можно сканировать на мощном ускорителе частиц в очень высоком разрешении и попробовать прочитать.
Процесс такого виртуального раскручивания свитка состоит из трех ключевых этапов: сканирование для создания трехмерной модели, сегментация для визуализации и разглаживания слоев папируса, и, наконец, обнаружение чернил с помощью методов машинного обучения для чтения текста.
15 марта 2023 года исследователи выложили 3D снимки одного из найденных свитков в открытый доступ и объявили конкурс на их расшифровку с призовым фондом в более чем миллион долларов. Среди прочего были и промежуточные призы, например, за первое прочитанное слово (ΠΟΡΦΥΡΑϹ – фиолетовый), так что участники могли пользоваться результатами друг друга. В начале этого года появился и финальный победитель — это команда из трёх парней, которые познакомились на самом конкурсе.
Расшифрованный ими свиток — ранее неизвестное эпикурейское сочинение о природе наслаждения.
Потрясающе интересная история! На сайте конкурса подробно рассказывается и про научные методы, и про следующие этапы работы. А ещё там масса красивых картинок и 3D визуализаций. И сам текст свитка, если захотите его прочитать.
https://scrollprize.org/grandprize
Две тысячи лет назад произошло одно из самых известных в истории извержений Везувия. Среди прочих разрушений под слоем лавы и пепла оказалась одна вилла, по предположениям служившая библиотекой. Её обнаружили в 18ом веке.
Находившиеся там свитки частично сохранились, но спеклись, превратившись в спресованные куски золы. Развернуть их практически невозможно — они сразу рассыпаются. Но, используя современные технологии, их можно сканировать на мощном ускорителе частиц в очень высоком разрешении и попробовать прочитать.
Процесс такого виртуального раскручивания свитка состоит из трех ключевых этапов: сканирование для создания трехмерной модели, сегментация для визуализации и разглаживания слоев папируса, и, наконец, обнаружение чернил с помощью методов машинного обучения для чтения текста.
15 марта 2023 года исследователи выложили 3D снимки одного из найденных свитков в открытый доступ и объявили конкурс на их расшифровку с призовым фондом в более чем миллион долларов. Среди прочего были и промежуточные призы, например, за первое прочитанное слово (ΠΟΡΦΥΡΑϹ – фиолетовый), так что участники могли пользоваться результатами друг друга. В начале этого года появился и финальный победитель — это команда из трёх парней, которые познакомились на самом конкурсе.
Расшифрованный ими свиток — ранее неизвестное эпикурейское сочинение о природе наслаждения.
Потрясающе интересная история! На сайте конкурса подробно рассказывается и про научные методы, и про следующие этапы работы. А ещё там масса красивых картинок и 3D визуализаций. И сам текст свитка, если захотите его прочитать.
https://scrollprize.org/grandprize
❤15👍6
Коллекция SVG иконок графиков
Я к вам сегодня с релизом небольшого проекта, над которым я неторопливо работала больше года.
Пару лет назад я рассказывала на HolyJS про визуализации, D3.js и React и готовила к этому докладу презентацию. Для неё мне понадобились небольшие иконки разных типов графиков. Ничего нужного мне я в открытом доступе не нашла и в итоге сделала эти иконки сама. Тогда же я подумала, что можно было бы их доработать и выпустить как единую коллекцию.
И вот я эту идею наконец-то реализовала и представляю вам Sparkle Icons!
✨ https://sparkles.slaylines.io ✨
Это коллекция SVG иконок разных графиков. Каждая иконка сделана в трёх вариантах: базовый чёрный, лёгкий чёрный и цветной. Все иконки размера 32x32 пикселя, но нормально смотрятся и уменьшенными или увеличенными. Скачать можно с сайта, как весь архив сразу, так и каждую иконку по-отдельности. Всё под MIT лицензией, то есть можно скачивать, менять и использовать, как захотите.
Буду рада комментариям и идеям!
Я к вам сегодня с релизом небольшого проекта, над которым я неторопливо работала больше года.
Пару лет назад я рассказывала на HolyJS про визуализации, D3.js и React и готовила к этому докладу презентацию. Для неё мне понадобились небольшие иконки разных типов графиков. Ничего нужного мне я в открытом доступе не нашла и в итоге сделала эти иконки сама. Тогда же я подумала, что можно было бы их доработать и выпустить как единую коллекцию.
И вот я эту идею наконец-то реализовала и представляю вам Sparkle Icons!
✨ https://sparkles.slaylines.io ✨
Это коллекция SVG иконок разных графиков. Каждая иконка сделана в трёх вариантах: базовый чёрный, лёгкий чёрный и цветной. Все иконки размера 32x32 пикселя, но нормально смотрятся и уменьшенными или увеличенными. Скачать можно с сайта, как весь архив сразу, так и каждую иконку по-отдельности. Всё под MIT лицензией, то есть можно скачивать, менять и использовать, как захотите.
Буду рада комментариям и идеям!
🔥56❤12👍4
Интерактивная временная шкала известных людей, живших в разные эпохи с 3его тысячелетия до нашей эры.
https://janwillemtulp.github.io/parallel-lives
Главная идея – сфокусироваться не столько на датах рождения и смерти, сколько на возрасте в разные годы. Данные взяты отсюда. Сама визуализация сделана на D3.js и Svelte.
Если будете смотреть с телефона, то поверните его горизонтально — сайт не адаптирован под узкие размеры экранов: колонка справа обрезается.
https://janwillemtulp.github.io/parallel-lives
Главная идея – сфокусироваться не столько на датах рождения и смерти, сколько на возрасте в разные годы. Данные взяты отсюда. Сама визуализация сделана на D3.js и Svelte.
Если будете смотреть с телефона, то поверните его горизонтально — сайт не адаптирован под узкие размеры экранов: колонка справа обрезается.
❤14🔥4
Друзья, у меня сейчас будет лично-профессиональное объявление.
❗️Я открываю консультации по созданию визуализаций данных.
Я могу:
— помочь разобраться с данными и требованиями;
— подобрать правильные инструменты и библиотеки;
— дать советы по коду, дизайну или UX;
— собрать прототип или финальный вариант визуализации с выбранными инструментами.
Если вы хотите на такую консультацию, напишите мне в личные сообщения (@gnykka). Мы обсудим, с чем именно вам нужна помощь, и договоримся о дальнейшей работе и условиях.
❗️Я открываю консультации по созданию визуализаций данных.
Я могу:
— помочь разобраться с данными и требованиями;
— подобрать правильные инструменты и библиотеки;
— дать советы по коду, дизайну или UX;
— собрать прототип или финальный вариант визуализации с выбранными инструментами.
Если вы хотите на такую консультацию, напишите мне в личные сообщения (@gnykka). Мы обсудим, с чем именно вам нужна помощь, и договоримся о дальнейшей работе и условиях.
👍13🔥8❤6
Собрала вчера вечером небольшую образовательную подборку ссылок на выходные:
⏱ Визуальная объяснялка, как работают promises в JavaScript.
🎨 Подробный интерактивный гайд по CSS queries.
📊 Сервис, позволяющий превратить Google Sheets в полноценный API для приложения.
🤖 Статья, как написать бот для инстаграма, автоматически выкладывающий сгенерированные картинки каждый день.
📰 Простые советы, как улучшить типографику на сайте.
⏱ Визуальная объяснялка, как работают promises в JavaScript.
🎨 Подробный интерактивный гайд по CSS queries.
📊 Сервис, позволяющий превратить Google Sheets в полноценный API для приложения.
🤖 Статья, как написать бот для инстаграма, автоматически выкладывающий сгенерированные картинки каждый день.
📰 Простые советы, как улучшить типографику на сайте.
👍14❤3🔥3
Недавно я наткнулась на увлекательное видео про визуализацию всех статей английской Википедии.
Существует игра Wikipedia Race или Wiki Game, в которой нужно на скорость найти путь между двумя совершенно разными и как будто бы несвязанными статьями Википедии. Автор визуализации хотел понять, всегда ли можно найти решение для этой игры.
Оказывается, что нет, и около 5% статей находятся в тупиках или же являются сиротами, не связанными со статьями на другие темы. Например, значительное количество статей о иранских деревнях образуют кластеры, которые не ведут никуда и из которых невозможно выйти. Тем не менее в среднем от любой статьи можно построить путь до 92% других.
Один из самых длинных найденных путей состоит из более чем 160 статей. Этот путь ведет от статьи об атлетике на Арабских играх 1953 года к списку трасс под номером 999. Не знаю, зачем кому-то нужно это знание, но живите теперь с ним!
Кроме исследования путей автор экспериментировал и с выделением сообществ, объединяющих статьи по темам. Статьи обычно ссылаются на другие в рамках своего тематического сообщества, но иногда плавно перетекают и в смежные. Например, южнокорейский фильм «Паразиты», относящийся к сообществу южнокорейской культуры, в графе оказывается заметно ближе к американскому кинематографу.
Три самые популярные статьи, на которые чаще всего ссылаются, — это Соединенные Штаты, футбол и Вторая мировая война. Автор объясняет это тем, что люди чаще всего пишут и ссылаются на темы, наиболее близкие и понятные им. И что основная масса контента англоязычной Википедии создается пользователями из США.
В завершение несколько технических деталей:
– Граф сделан на python-igraph с помощью алгоритма Distributed Recursive Layout.
– Сообщества собраны с помощью алгоритма Leiden.
– Учитывались все статьи кроме редиректов и ссылки только в теле статьи.
https://www.youtube.com/watch?v=JheGL6uSF-4
Существует игра Wikipedia Race или Wiki Game, в которой нужно на скорость найти путь между двумя совершенно разными и как будто бы несвязанными статьями Википедии. Автор визуализации хотел понять, всегда ли можно найти решение для этой игры.
Оказывается, что нет, и около 5% статей находятся в тупиках или же являются сиротами, не связанными со статьями на другие темы. Например, значительное количество статей о иранских деревнях образуют кластеры, которые не ведут никуда и из которых невозможно выйти. Тем не менее в среднем от любой статьи можно построить путь до 92% других.
Один из самых длинных найденных путей состоит из более чем 160 статей. Этот путь ведет от статьи об атлетике на Арабских играх 1953 года к списку трасс под номером 999. Не знаю, зачем кому-то нужно это знание, но живите теперь с ним!
Кроме исследования путей автор экспериментировал и с выделением сообществ, объединяющих статьи по темам. Статьи обычно ссылаются на другие в рамках своего тематического сообщества, но иногда плавно перетекают и в смежные. Например, южнокорейский фильм «Паразиты», относящийся к сообществу южнокорейской культуры, в графе оказывается заметно ближе к американскому кинематографу.
Три самые популярные статьи, на которые чаще всего ссылаются, — это Соединенные Штаты, футбол и Вторая мировая война. Автор объясняет это тем, что люди чаще всего пишут и ссылаются на темы, наиболее близкие и понятные им. И что основная масса контента англоязычной Википедии создается пользователями из США.
В завершение несколько технических деталей:
– Граф сделан на python-igraph с помощью алгоритма Distributed Recursive Layout.
– Сообщества собраны с помощью алгоритма Leiden.
– Учитывались все статьи кроме редиректов и ссылки только в теле статьи.
https://www.youtube.com/watch?v=JheGL6uSF-4
🔥20👍6❤1
Возвращаюсь с новой подборкой!
🌟 Статья 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. Это, например, поддержка селектора
🌟 Статья 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 тег.👍11
Где-то месяц назад мне на Upwork написал один потенциальный клиент, который искал разработчика для 3D визуализации.
Реальным этот клиент так и не стал, но в процессе обсуждений я сделала небольшой прототип на ThreeJS с TweenMax анимациями. Идея прототипа — проверить, насколько эффективно получится нарисовать несколько тысяч интерактивных элементов в пространстве.
Не знаю, насколько этот прототип оказался полезен в итоге, но не пропадать же ему — поделюсь с вами!
https://codepen.io/gnykka/pen/NWVjbQP
Реальным этот клиент так и не стал, но в процессе обсуждений я сделала небольшой прототип на ThreeJS с TweenMax анимациями. Идея прототипа — проверить, насколько эффективно получится нарисовать несколько тысяч интерактивных элементов в пространстве.
Не знаю, насколько этот прототип оказался полезен в итоге, но не пропадать же ему — поделюсь с вами!
https://codepen.io/gnykka/pen/NWVjbQP
🔥25👍1
Нерегулярная подборка ссылок на этой неделе получилась про интересные и необычные примеры.
📝 Amy Goodchild написала очень большую и подробную статью, как с помощью p5.js она оцифровала свой почерк, чтобы использовать его в генеративных проектах.
🔊 Статья учёных Мичиганского университета рассказывает, как можно создать визуальные спектрограммы, выглядящие как обычные изображения, но при этом воспроизводимые как звук.
🎶 Ещё одна статья про музыку, на этот раз — как красиво и с минимумом усилий заверстать ноты с помощью HTML и CSS.
🎮 Статья про визуализацию механик игры Tekken описывает, как можно разбить игровые механики на компоненты и создать карточки для их сравнения.
📝 Amy Goodchild написала очень большую и подробную статью, как с помощью p5.js она оцифровала свой почерк, чтобы использовать его в генеративных проектах.
🔊 Статья учёных Мичиганского университета рассказывает, как можно создать визуальные спектрограммы, выглядящие как обычные изображения, но при этом воспроизводимые как звук.
🎶 Ещё одна статья про музыку, на этот раз — как красиво и с минимумом усилий заверстать ноты с помощью HTML и CSS.
🎮 Статья про визуализацию механик игры Tekken описывает, как можно разбить игровые механики на компоненты и создать карточки для их сравнения.
❤6🔥5🥰2
React Sparklines
Написала вчера подробную статью, как создать компонент для рисования спарклайнов на Typescript и React без использования каких-либо зависимостей, только с помощью SVG. И как с помощью ResizeObserver сделать их автоматически подстраиваемыми под размер родителя.
Читать тут 👉 https://dev.to/gnykka/how-to-create-a-sparkline-component-in-react-4e1
Написала вчера подробную статью, как создать компонент для рисования спарклайнов на Typescript и React без использования каких-либо зависимостей, только с помощью SVG. И как с помощью ResizeObserver сделать их автоматически подстраиваемыми под размер родителя.
Читать тут 👉 https://dev.to/gnykka/how-to-create-a-sparkline-component-in-react-4e1
👍8❤5🔥4
Нашла недавно прекрасную статью про паттерны дизайна таблиц.
Небольшая выдержка от меня:
1. Текстовые данные выравнивайте по левому краю, числовые – по правому.
2. Избегайте центрирования текста – оно усложняет восприятие.
3. Используйте моноширинные шрифты для чисел – так их легче сравнивать.
4. Избегайте повторений заголовков в ячейках.
5. Не злоупотребляйте рамками и цветами фона. Стремитесь убрать визуальный шум.
6. Если в двух столбцах находятся связанные данные, объедините их.
7. Используйте визуальные индикаторы, например, лейблы для статусов.
8. Для больших данных закрепляйте строку заголовков или первый столбец.
9. Пагинация, сортировка и изменение размеров столбцов дадут пользователям больше контроля.
10. Часть активных действий с ячейками можно показывать при наведении на строку.
Всё проиллюстрировано примерами, которые хорошо показывают, как даже маленькие изменения способны повысить читабельность любых таблиц.
Небольшая выдержка от меня:
1. Текстовые данные выравнивайте по левому краю, числовые – по правому.
2. Избегайте центрирования текста – оно усложняет восприятие.
3. Используйте моноширинные шрифты для чисел – так их легче сравнивать.
4. Избегайте повторений заголовков в ячейках.
5. Не злоупотребляйте рамками и цветами фона. Стремитесь убрать визуальный шум.
6. Если в двух столбцах находятся связанные данные, объедините их.
7. Используйте визуальные индикаторы, например, лейблы для статусов.
8. Для больших данных закрепляйте строку заголовков или первый столбец.
9. Пагинация, сортировка и изменение размеров столбцов дадут пользователям больше контроля.
10. Часть активных действий с ячейками можно показывать при наведении на строку.
Всё проиллюстрировано примерами, которые хорошо показывают, как даже маленькие изменения способны повысить читабельность любых таблиц.
👍19🔥12❤7
Рассылки, которые я читаю
Я давно хотела составить личную подборку с основными рассылками, на которые подписана. У меня их много: часть про визуализации, часть про программирование, а часть — про ведение проектов.
В этом списке я собрала свой топ-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 сообщества с интервью и советами по созданию, монетизации и управлению цифровыми продуктами.
Буду рада рекомендациям, поэтому добавляйте свои любимые рассылки в комментариях!
Я давно хотела составить личную подборку с основными рассылками, на которые подписана. У меня их много: часть про визуализации, часть про программирование, а часть — про ведение проектов.
В этом списке я собрала свой топ-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 сообщества с интервью и советами по созданию, монетизации и управлению цифровыми продуктами.
Буду рада рекомендациям, поэтому добавляйте свои любимые рассылки в комментариях!
❤18👍5🔥1