​​Любопытная визуализация как выглядела Земля много миллионов лет назад:
https://dinosaurpictures.org/ancient-earth/#750

Можно покрутить и понаблюдать, как двигались и менялись континенты.
Как и все подобные штуки сделана на three.js.

Недавно в одной рассылке мне попалась статья How do we actually "pull stories out of data”?

Мы часто говорим, что анализ раскрывает данные, находит в них паттерны и позволяет превратить их в истории. Но как именно это происходит?

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

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

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

Автор статьи приводит пример, как именно он работает с данными, чтобы попробовать сформулировать алгоритм. Задача такая: в интернет магазине некоторые товары стали продаваться активнее и надо понять: почему это произошло и временное ли это явление.

1. Первым пунктом стоит проверить, а точно ли продажи увеличились, насколько и как именно. Это даст необходимое доменное знание и общее понимание проблемы, которые скорее всего помогут с ответом на «почему».

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

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

3. В какой-то момент приходит понимание, что предварительные исследования пора сворачивать, потому что идеи для них заканчиваются и начинает вырисовываться какая-то картинка. Итогом всего исследования становится общее непротиворечивое описание ситуации, которое отвечает всем критериям изначального вопроса и учитывает всё найденное до этого. Это развёрнутый ответ на вопрос «что именно произошло?».

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

Ссылка на статью: https://counting.substack.com/p/how-do-we-actually-pull-stories-out

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

🌪️ Интерактивная карта с крупными ветряными электростанциями Великобритании. Показывает их расположение и сколько энергии производит каждая из них.

⚙️ Скроллителлинг, рассказывающий, как работает квантовый компьютер.

🗺️ Исследование о гендерном неравенстве на примере имён улиц в Порто. В честь женщин названо в 9 раз меньше улиц, чем в честь мужчин, а самые крупные названные посвящены святым.

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

Давно хотела поделиться: года три назад для одного личного исследования я сделала демо, где сравнила canvas рисовалки PixiJS, Two.js и Paper.js. Я выложила его на HackerNews, поймала там довольно много внимания и обсуждений, но быстро как-то подзабила.

А вот другие не забили. В результате за это время github репозиторий обзавёлся 463 звёздочками, а кроме меня там что-то делали ещё 19 человек (даже пара авторов этих библиотек вносили правки).

И теперь это маленькое демо превратилось в сравнение аж 18 разных библиотек и способов рисования!
https://benchmarks.slaylines.io

Очень хочу добавить туда ещё и вычисление времени, которое нужно на первый рендеринг. И ещё пару недостающих библиотек, например, Phaser.

P.S.: аккуратно кликайте на ссылки в danger zone ⚠️, на слабых компьютерах это может подвесить браузер.

​​Мы с коллегами собрали папку каналов про визуализации данных. Внутри много красивых графиков, дата-арт, журналистика и полезная теория. Я уже давно на все подписана и вам советую!

Designing Numbers
Настенька и графики
Data-comics
Виз Ньюз
Reveal the Data
data.csv
Чартомойка
Рациональные числа
Дата-сторителлинг
novichkov.net

Всем привет!

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

Меня зовут Наташа и я разработчица. Я делаю визуализации данных и веб-проекты разной сложности. Начинала в лаборатории МГУ с совместных проектов с Microsoft Research, потом осваивала фронтенд в Лаборатории Данных, а последние лет 6 работаю на себя и развиваю своё бюро разработки slay_lines.

Этот канал — моё хоть и профессиональное, но всё же хобби. Поэтому веду я его не очень регулярно.

Здесь всё так или иначе крутится вокруг программирования. Я выкладываю ссылки на интересные мне визуализации или инструменты, иногда пишу туториалы по D3js, иногда — обзоры на прочитанные статьи или книги. Ещё показываю разные демо, которые могу сделать на досуге.

Welcome! 📊

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

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

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

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

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

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

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

Наткнулась недавно на небольшую статью с необычными визуализациями.

В 1952 году фотограф Гьен Мили сделал серию фотографий скрипача Яши Хейфеца. Идея была в попытке поймать и показать движения смычка при игре на скрипке. Для этого на смычок в районе руки музыканта был прикреплён источник света, Хейфец играл в темноте, а Мили снимал его с длинной выдержкой.

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

1. Карта выработки энергии и оценка её экологичности для всех стран мира.
https://app.electricitymaps.com/map

2. Недавно опубликовали очередной ежегодный отчёт State of CSS. Там про тренды, новые фичи, фреймворки и всё, что сейчас популярно в вёрстке.
https://2023.stateofcss.com

3. Открытая коллекция принципов и методов в дизайне. При чём как графическом, так и например, при проектировании дорог.
https://principles.design

4. Огромный список публичных API, которые можно свободно использовать в личных и не только проектах. От привычных всем финансовых и погодных до спортивных, музыкальных или автомобильных.
https://github.com/public-apis/public-apis

5. Статья, какие есть способы улучшить доступность графиков.
https://blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible

Я уже месяц в большом путешествии по Латинской Америке. И ещё почти месяц впереди. Поэтому регулярные посты как-то не получаются. Зато я уже придумала пару визуализаций, которые запилю, когда вернусь!

Пока я тут путешествовала, выложили шортлист премии Information is Beautiful!

В этом году туда попали несколько работ знакомых:
1. Визуализация рынка акций США Market Map от Никиты Рокотяна в категории Business Analytics.
2. Визуализация Divided World с разными экономическими показателями в разных странах от Ромы Бунина в категории Humanitarian.
3. Постер по рок-опере Jesus Christ Superstar от Нади Андриановой в категории Arts, Entertainment & Culture.

И ещё одна необычная работа из России:
Инсталяция про загрязнение воздуха в категории Unusual.

И отдельно ещё пара работ, которые мне очень понравились.
1. When I Was Your Age — сравнение привычек американцев разных поколений.
2. Библиотека цветов традиционной китайской живописи.

До конца этой недели ещё можно проголосовать, чтобы помочь работам получить приз зрительстких симпатий! Для этого нужно зарегистрироваться на сайте и на странице каждой работы нажать кнопку “Vote”. Можно проголосовать только 1 раз в каждой категории.

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

Наткнулась на официальный 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 лет, превратив свою смерть в перформанс.

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

Как не сойти с ума, работая в путешествиях

Иногда буду здесь писать не только про визуализации и программирование, но и про удалённую работу и всякое с ней связанное. Как-то так вышло, что я работаю удалённо почти с самого начала своей карьеры. А ещё я люблю путешествовать. И часто совмещаю работу и путешествия.

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

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

✔️ Интернет — главный критерий выбора жилья
Почти всегда я ищу квартиры и отели на Airbnb и Booking и внимательно читаю отзывы. Главный мой фокус в отзывах — информация об интернете. Если по всем критериям место супер, но в отзывах пишут, что интернет плохой, то я ищу другой вариант. Потому что самые большие стрессы мне приносила именно плохая связь на важных созвонах.

✔️ Планируйте неделю заранее
В воскресенье, ещё до начала рабочей недели я сажусь и расписываю все свои задачи и созвоны. В итоге у меня перед глазами всегда есть расписание дел и я всегда знаю, какие дни у меня занятые, а какие свободные. Я так делаю и в обычной жизни дома, но в поездках это становится особенно важным.

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

✔️ Рутина очень важна
В любом новом городе важно сразу выстроить повседневную рутину: найти ближайшие магазины и рестораны, разобраться с транспортом, запомнить карту и прочее. А бытовые привычки вроде утреннего кофе на балконе или вечерней прогулки по набережной неплохо снижают стресс от очередного переезда.

Эти пять пунктов — это главное, что помогает мне контролировать время и сохранять продуктивность и рассудок в любых поездках. Проверено на личном опыте!

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

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

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

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

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

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

Я задала себе вопрос: «С чего начать и чем вдохновляться в обучении визуализациям?». И из ответа появился список из десятка пунктов (часть из которых вы наверняка знаете). В него, конечно, не вошло множество интересных книг и крутых специалистов, но чтобы охватить всё, потребовалось бы намного больше места.

Книги
1. Edward Tufte и его книги по информационному дизайну. "The Visual Display of Quantitative Information" — настоящая классика, которую можно назвать библией для графиков. Официального перевода не существует (автор не разрешает), но в сети можно найти неофициальные, а сама книга написана достаточно простым английским языком.

2. Don Norman, "The Design of Everyday Things". Эта книга — основа понимания дизайна и UX, заставляет задуматься о дизайне самых обыденных вещей. В России издана издательством МИФ.

Люди
1. Shirley Wu. Меня очень вдохновляют её аккуратный дизайн и художественные абстракции в визуализациях. У неё много доступных лекций и воркшопов по программированию, их можно найти на YouTube.

2. Nadieh Bremer создаёт удивительные визуализации на самые разнообразные темы.

3. Valentina D'Efilippo больше фокусируется на дизайне и смыслах. Её выступления и рассказы о создании визуализаций, включая Effective Data Visualisation, также доступны на YouTube.

Сайты
1. Information is Beautiful — обширная коллекция инфографик на самые разные темы, от статистики пород собак до доходов правительства Великобритании.

2. Pudding — интерактивные визуальные эссе.

3. Flowing Data — множество визуализаций и страниц с туториалами по их созданию.

4. Блог Datawrapper — статьи с примерами визуализаций и советами, например, по выбору цветовой палитры или подготовке данных.

5. D3.js — не удержалась и всё-таки включила пункт про код. Но и не только, на сайте можно найти множество примеров от простых до сложных с подробным разбором их создания.

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

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

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

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

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

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

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

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

📈 Как сделать LineChart и ScatterChart и в чём разница между методами data и datum

📊 Как сделать BarChart с несколькими сериями данных

🗺 Карты в визуализациях

🥧 Как сделать простой PieChart

🔀 Как сделать Sankey график

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

🌫 Погружение в шейдеры на ThreeJS. Статья сочетает основы теории и практики и сопровождает всё интерактивными примерами.

🌍 Генерируемые планеты на ThereJS. Можно настраивать параметры атмосферы, поверхности и освещения. Исходный код доступен на Github.

🕰 TimelineJS — JS-библиотека для создания интерактивных временных шкал, с возможностью использования в no-code формате через Google Таблицы и форму на сайте.

🎨 Scene.js — библиотека для создания красивых анимаций на JS и CSS.

🗓 Календарный хитмап на React, вдохновлённый визуализацией коммитов на Github.

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

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

https://teletype.in/@gnykka/d3-treemap

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

Наткнулась сегодня на Периодическую таблицу визуализаций.

Множество способов визуализации данных, разбитые по разным параметрам с примерами.

Выглядит любопытно!

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

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

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

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

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

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

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

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

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

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

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