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

​​Коллекция SVG иконок графиков

Я к вам сегодня с релизом небольшого проекта, над которым я неторопливо работала больше года.

Пару лет назад я рассказывала на HolyJS про визуализации, D3.js и React и готовила к этому докладу презентацию. Для неё мне понадобились небольшие иконки разных типов графиков. Ничего нужного мне я в открытом доступе не нашла и в итоге сделала эти иконки сама. Тогда же я подумала, что можно было бы их доработать и выпустить как единую коллекцию.

И вот я эту идею наконец-то реализовала и представляю вам Sparkle Icons!

✨ https://sparkles.slaylines.io ✨

Это коллекция SVG иконок разных графиков. Каждая иконка сделана в трёх вариантах: базовый чёрный, лёгкий чёрный и цветной. Все иконки размера 32x32 пикселя, но нормально смотрятся и уменьшенными или увеличенными. Скачать можно с сайта, как весь архив сразу, так и каждую иконку по-отдельности. Всё под MIT лицензией, то есть можно скачивать, менять и использовать, как захотите.

Буду рада комментариям и идеям!

​​Как читают древние свитки

Две тысячи лет назад произошло одно из самых известных в истории извержений Везувия. Среди прочих разрушений под слоем лавы и пепла оказалась одна вилла, по предположениям служившая библиотекой. Её обнаружили в 18ом веке.

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

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

15 марта 2023 года исследователи выложили 3D снимки одного из найденных свитков в открытый доступ и объявили конкурс на их расшифровку с призовым фондом в более чем миллион долларов. Среди прочего были и промежуточные призы, например, за первое прочитанное слово (ΠΟΡΦΥΡΑϹ – фиолетовый), так что участники могли пользоваться результатами друг друга. В начале этого года появился и финальный победитель — это команда из трёх парней, которые познакомились на самом конкурсе.

Расшифрованный ими свиток — ранее неизвестное эпикурейское сочинение о природе наслаждения.

Потрясающе интересная история! На сайте конкурса подробно рассказывается и про научные методы, и про следующие этапы работы. А ещё там масса красивых картинок и 3D визуализаций. И сам текст свитка, если захотите его прочитать.

https://scrollprize.org/grandprize

Задумывались ли вы когда-нибудь, откуда берутся новые идеи?

Недавно я прочитала статью "How New Ideas Arise" архитектора и поэта Паоло Беларди. В этой статье он исследует источники возникновения идей и инноваций, приводя примеры из науки и искусства.

Сама тема не нова, ещё Гегель рассматривал её в своей работе «Наука логики». Там он писал о важности интуиции и неосознанного воображения в порождении идей и об отказе от контроля рационального разума.

Позже, в 1926 году, английский психолог Грэм Уоллас в своей книге «Искусство мыслить» выделил четыре базовые этапа творческого процесса.

1. Подготовка. Это стадия расширения кругозора, накапливания знаний и формулирования проблемы.
2. Инкубация. На этом этапе мысль свободно блуждает в голове, постепенно приобретая очертания.
3. Озарение. Кульминация всего процесса, мысль оформилась и превратилась в конкретную идею.
4. Верификация. Любая такая идея должна в конце пройти проверку на адекватность.

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

Можно проследить множество совершенно различных примеров озарений. Например, балетная поза «на цыпочках» была вдохновлена механической системой, поднимавшей балерину для полёта над сценой. А идея о двойной спирали ДНК пришла авторам в голову, когда они увидели спиральную лестницу в кинотеатра.

Идеи могут рождаться везде — в поездах, как у Ролана Барта, или в горячей ванне, как у Вирджинии Вульф. Могут возникать по невнимательности, как у Антуана де Сент-Экзюпери, который писал о «плодотворной ошибке», или из привычки, как у Иммануила Канта, которому был очень важен строгий порядок для написания своих философских трудов. А могут и из случайности, как произошло с открытием пенициллина или спутника Плутона.

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

Первый пост в году должен быть содержательным и значимым, подумала я и дописала-таки за выходные туториал по созданию Тримапа с помощью D3.js!

В нём я рассказываю:
✦ Как создать и настроить график.
✦ Как победить вылезающие за пределы элементов подписи.
✦ Какой алгоритм для построения тримапа использует D3.

@gnykka/d3-treemap' rel='nofollow'>https://teletype.in/@gnykka/d3-treemap

Комментарии, лайки и репосты приветствуются, конечно же!

Прочитала недавно статью Мелани Фейнберг «Миф о объективных данных».

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

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

Но объективность — относительно новый концепт, появившийся в 19 веке вместе с развитием фотографии. До этого научные иллюстрации чаще изображали не сам предмет, а представление о нём, наподобие карикатурных зверей из Страдающего Средневековья. Фотография позволила более точно фиксировать реальность, но принесла и свои искажения, связанные с техническими особенностями.

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

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

Таким образом, стремление к полной объективности в работе с данными оказывается заблуждением. Любой набор данных неизбежно содержит следы человеческой интерпретации и как следствие субъективности. Это не делает данные неверными или бесполезными. Напротив, осознанный подход к их анализу позволяет смотреть на них более широко и креативно.

​​Смотрите, какую интересную штуку нашла!

Это шрифты, которые выглядят как линейный график или столбчатая диаграмма.

Каждый символ закодирован определённым числом:
- Цифры 0..9 — это значения 0..90 с шагом 10.
- Буквы a..zA..Z — значения 0..100 с шагом 2.
- Юникод символы (U+0100..U+017F) — значения 0…127 с шагом 1.

Можно скачать с Google Fonts:
1. Linefont
2. Wavefont

Идеально для простеньких спарклайнов.

​​Визуализация собрания Нью-Йоркского музея современного искусства

Наткнулась на официальный dataset нью-йоркского Museum of Modearn Art. Это почти 200 тысяч произведений искусства из коллекций музея и 15 тысяч их авторов. Изначально я просто хотела выложить его в одной из следующих подборок, а потом подумала и решила сначала с ним поиграться.

Данные огромны и анализировать их можно с разных сторон, но я решила сфокусироваться только на художниках 20 и 21 веков. Для каждого автора у меня были имя, пол, годы жизни и национальность. К этому набору я добавила ещё и количество написанных картин. Для этого я взяла список всех произведений, отфильтровала, оставив только картины, и сгрупировала по авторам. У меня получился массив из 8.5 тысяч художников.

Я решила посмотреть распределение художников по годам жизни: кто сколько писал, кто сколько прожил, в какие периоды было больше женщин и т.д. Поэтому мой график — это scatter plot с годом рождения по оси X и длиной жизни по оси Y. Размер — это количество работ (с логарифмической шкалой), а цвет — пол.

Для удобства сравнения и анализа я исключила авторов:
‣ у кого не оказалось работ — нечего было бы визуализировать;
‣ кто до сих пор жив — они смазывали картину, оказываясь строго на диагонали;
‣ кто родился после 1970ого или прожил меньше 30 лет — их было мало и они слишком выбивались.

В итоге у меня остались 765 художников. Из них у 448 было больше одной работы, а у 203 — больше четырёх. Именно их я и включила в график, добавив фильтры и легенду для детального исследования.

Поиграться с визуализацией и поисследовать самостоятельно можно здесь:
🔗 https://gnykka.io/moma-artists

Топ 5 авторов по количеству работ:
— Ellsworth Kelly — 1037 работ. Американец, прожил 92 года, представитель минимализма, хард-эйджа и цветовых полей.
— Frédéric Bruly Bouabré — 481 работа. Ивуариец, прожил 90 лет, в 25 лет ему явилось какое-то видение и с этого момента он стал своего рода проповедником и философом и выражал свои идеи в картинах.
— George Maciunas — 205 работ. Тоже американец, русско-литовского происхождения, умер от рака в 46 лет, был одним из основателей художественного течения флуксус.
— Jean Dubuffet — 189 работ. Француз, прожил 83 года, был основоположником направления ар-брют — «грубого» или «сырого» искусства.
— Ree Morton — 83 работы. Американка, единственная женщина в первой десятке, погибла в автокатастрофе в 40 лет, представительница пост-минимализма и феминистского искусства.

Ещё наткнулась:
— Alberto Greco — 37 работ. Аргентинец, совершил самоубийство в 35 лет, превратив свою смерть в перформанс.

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

​​Раз в несколько месяцев я люблю участвовать в челенджах от Codepen. Особенно в тех, где можно что-то порисовать на канвасе. На прошлой неделе я дождалась очередную интересную мне тему: частицы и их физика!

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

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

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

3. При каждом движении мыши для каждой частицы считается квадрат расстояние от неё до положения курсора. Если это значение меньше заданного параметра forceDist, то частица должна будет сдвинуться. Вопрос, куда и насколько?

4. Для вычисления направления можно использовать функцию Math.atan2, которая считает угол между точкой и положительной частью оси Х. А расстояние можно узнать, взяв синус и косинус этого угла и умножив на коэффициент force (он зависит от расстояния между частицей и курсором).

5. Чтобы частицы возвращались в исходное положение, когда на них не оказывает влияние курсор, введён ещё один коэффициент — dragValue. Если он меньше 1, то он постепенно сводит изначально посчитанное расстояние к 0. В итоге частица оказывается на своём старом месте.