​​Очень интересная и залипательная визуализация музыкальных жанров:
https://everynoise.com/engenremap.html

Сделана в виде scatter plot, где на координатной плоскости сверху — более электронная музыка, внизу — более акустическая и чистая, слева — более атмосферная и глубокая, а справа — более резкая. Например, техно находится справа сверху, метал — слева по центру, а опера — слева внизу. Можно провалиться вглубь жанра и посмотреть, как расположены его представители. Везде можно послушать примеры звучания.

Observable Plot

Прошёл уже месяц с релиза первой версии библиотеки Observable Plot. Если кто-то пропустил анонс, то это библиотека от создателей D3 и Observable и сделана она на базе D3.

Последние 2 недели я достаточно активно использую эту библиотеку в одном стартапе, где я помогаю делать систему визуализаций. Изначально мы использовали там D3 и сделали свой набор классов, чтобы удобно и быстро строить графики, конфигурировать оси и обновлять данные. А когда увидели Plot, решили попробовать использовать его.

Библиотека пока немного сырая, хотя явных багов нет. Удобнее всего с её помощью делать простые графики типа линейного или столбчатого, когда данные — это обычная табличка. В этом случае можно быстро сделать красивый график, где даже не придётся ничего дополнительно настраивать.

Проблемы начинаются, когда надо сделать нестандартный график, например, тримап или санкей. Они требуют предобработки данных и сначала нужно вручную создавать объекты d3.hierarchy, d3.treemap или d3.sankey. Для тримапа это не большая проблема, потому что потом можно просто добавить прямоугольники и подписи, а вот санкей оказывается не так прост. Например, в Plot можно рисовать линии, соединяющие точки, но их ширина не может быть динамической переменной.

Сделала небольшой пример с несколькими графиками: https://codepen.io/gnykka/pen/ZEeoKwe

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

А в целом, мне библиотека понравилась! Ещё приятно, что в репозитории много обсуждений и предложений. Возможно, из этого выйдет что-то по-настоящему стоящее.

P.S.: придумала, как сделать санкей! Вместо линий связей можно рисовать области (area plot). Тогда и линии оказываются ровные, и стыки красивые. Но всё равно каждую из линий нужно рисовать отдельно.

🎙Новый выпуск подкаста

В конце прошлой недели вышел уже четвёртый выпуск нашего подкаста «Не сегодня» про девушек из IT индустрии. Наша гостья — Василиса, она выросла в Беларуси, а сейчас живёт в Сингапуре, занимается наукой и делает свой стартап Soda.

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

Таймкоды и ссылки можно найти здесь: https://gnykka.io/not-today

Слушайте и подписывайтесь! Яндекс, Apple, Google, Anchor и другие платформы.

​​Вчера со мной поделились интересной ссылкой:
https://code-explained.com/

Это новый проект, сделанный в рамках Школы Бюро Горбунова, с интерактивными визуализациями алгоритмов и структур данных. Пока что там есть подробные объяснялки хеш-таблиц с теорией и пошаговым разбором кода. Скоро должны появиться сортировки и другие алгоритмы. Очень люблю такие проекты! Было бы круто, если бы их было больше и они бы активно развивались.

💬 Авторы просят дать им какую-то обратную связь и критику (можно в комментариях).

​​Визуализация всех спутников, летающих в реальном времени вокруг Земли:
https://platform.leolabs.space/visualizations/leo

Вот это поназапускали, конечно! У меня вопрос возник: когда шаттлы и ракеты запускают, они никакие спутники не сбивают случайно?

Аккуратно, штука сделана на three.js и webGL и ощутимо тормозит. А вот ссылка на данные, кстати.

​​Как размечают зоны для самокатов

Всем привет! Пора заканчивать мой временный перерыв и отдых от канала. Тем более, что набралось несколько новостей, которыми я бы хотела поделиться. И начну я с рассказа про один из проектов, над которым работаю последние месяцы.

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

Обычно эти данные в виде geojson или kml файлов приходят компаниям от самих городов. Там могут быть зоны с ограничением скорости, зоны, куда нельзя заезжать, зоны, где нельзя парковаться или где наоборот можно и нужно. Все эти зоны обрабатываются, загружаются во внутреннюю базу данных и становятся доступны на самих самокатах. То есть в зоне с ограничением скорости в 10км/ч самокат не сможет поехать быстрее, а в зоне, где запрещено движение, просто откажется ехать дальше.

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

Сначала немного про технические детали. Чтобы работать с геоданными, в проекте используется H3 — иерархическая система геопространственной индексации, придуманная Uber. По этой системе поверхность Земли покрывается шестиугольниками (гексагонами) разного разрешения вплоть до одного квадратного метра. Почему гексы? Во-первых, сферу всегда можно ими покрыть полностью и без дырок. Во-вторых, расстояние от одного гекса до всех его соседей всегда одинаковое (что не будет правдой для треугольного или квадратного разбиений). И наконец, для такой системы алгоритмы индексации и поиска будут работать быстрее и эффективнее.

Оригинальная библиотека H3 написана на С, но для веба сделана версия на JS. Обещают ещё Python и Go, но пока не портировали.

Не буду расписывать, что и как умеет h3-js, но приведу ссылку на серию туториалов на Observable:
https://observablehq.com/collection/@nrabinowitz/h3-tutorial

Про сам проект я не могу рассказывать много подробностей. Нам нужно было уметь загружать полигоны для будущих зон, заполнять их гексами на выбранном уровне разрешения, указывать дополнительные параметры (например, название или максимальную скорость) и загружать это всё на сервер. В готовом виде зоны выглядят как на картинке ниже — это тестовые данные, которые я утром нарисовала для Москвы.

​​58 способов визуализировать «Алису в стране чудес»

Нашла интересный пост-исследование с описанием 58 разных способов визуализировать книгу «Алиса в стране чудес». 41 из них автор нашёл в сети, оставшиеся 17 придумал сам.

Авторские визуализации можно найти в этом pdf. Там же, на последней страницу — ссылки и источники всех других найденных визуализаций.
Больше деталей описано статье.

Как сделать pie chart

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

https://teletype.in/@gnykka/pies

Отдельно ссылка на пример: https://codepen.io/gnykka/pen/porMaXo

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

Консольная библиотека на питоне, которая генерирует красивую noscript таймлинию из json файла:
https://github.com/jasonreisman/Timeline

Ещё одна питоновская библиотека, позволяющая рисовать графики прямо в консоли:
https://github.com/nschloe/termplotlib

Большой репозиторий с реализациями различных алгоритмов и структур данных на JS:
https://github.com/trekhleb/javanoscript-algorithms

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

https://github.com/finos/perspective — библиотека для визуализаций, заточенная под большие и обновляющиеся во времени данные
https://github.com/reaviz/reagraph — библиотека для визуализации графов с помощью React и WebGL
https://github.com/yisibl/renoscript-js — шустрая рисовалка SVG без зависимостей и с Rust под капотом

А эти 2 библиотеки не про визуализации, но тоже потенциально полезные:
https://naver.github.io/egjs-infinitegrid — модуль для создания разных сеток элементов (например, masonry)
http://spacetime.how — небольшая библиотека для работы с таймзонами

✨🌌 Сегодня у меня большой анонс. В течение последних двух лет мы с командой работали над GPU-алгоритмом укладки графа и инструментом визуализации на его основе.

Представляю вам Cosmograph — самый быстрый Force Layout для графов в вэбе! С его помощью можно визуализировать графы с сотнями тысячами узлов и ребер (что в разы больше, чем при использовании классических силовых алгоритмов).

Cosmograph доступен для всех желающих по адресу cosmograph.app. Можете загружать туда CSV со списком ребер и наслаждаться визуализацией графа в реальном времени. Все работает прямо в браузере!

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

#tools #networks #cosmograph @dataviznews

​​Если вы рассчитывали только на серьёзный и умный контент, то вы пришли не в тот канал.
Сегодня я потратила утро на генератор ковра! Просто потому что могу.

https://codepen.io/gnykka/full/BarzYNo (можно кликать по экрану для его перерисовывания)

Стало интересно (никак не связанный с ковром вопрос): расскажите, участвуете ли вы в каких-то челенджах? Больше мне любопытно про профессиональные (например, кодинг, визуализации, генеративка, ...), но и про другие расскажите, если такие есть!

Мой самый долгий челендж был Advent of Code в прошлом декабре, но на все задания меня тогда не хватило — пропустила 2 из 25. Я обычно нахожу челенджи, уже когда они заканчиваются, хотя вот на днях наткнулась на месячные челенджи от Storytelling with Data, думаю попробовать.

Bangbangeducation до 25-ого сентября открыли бесплатный доступ к своей библиотеке курсов по дизайну, рисованию и искусству.

https://bangbangeducation.ru/subnoscription

Когда-то давно (тоже бесплатно, кстати) я слушала у них курс про использование сеток в дизайне и, хотя дизайном я занимаюсь мало и редко, как программистке мне этот курс показался полезным.

Сейчас смотрю на нелинейную историю дизайна — это большой сборник ресурсов (видео, книг, эссе) по истории дизайна и различных его направлений.

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

Я там рассказывала про разные подходы и приёмы в дизайне визуализаций и показывала, как сделать что-то несложное с помощью D3js и React. За основу брала данные с прошлогодней конференции. Вот, что у меня в итоге получилось — это ссылка на песочницу, там в проекте можно посмотреть и сами оригинальные данные.

По этой ссылке можно посмотреть весь список выступлений, там много интересного.

За последнее время у меня собралось достаточно много ссылок на интересные инструменты и статьи про визуализации. Буду постепенно их разбирать и заодно ими тут делиться.

1. Charts.css — фреймворк для рисования графиков с помощью css. Поддерживает только простые графики типа линий, столбиков и областей. Зато ни строчки кода!

2. Color & Contrast — большой интерактивный гайд про теорию и восприятие цвета. Объясняет научные детали и какое отношение это всё имеет к дизайну интерфейсов.

3. Библиотека для рисования календарика как в профиле github. Если вы очень хотите что-то считать каждый день.

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

​​На прошлой неделе я засветилась на канале Left Join в новом эпизоде подкаста “Data Heroes”.

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

Эпизод разбит на 2 части:
🔸Часть 1: Роман Бунин, Татьяна Мисютина, Наталия Степанова, Александр Богачев.
🔸Часть 2: Андрей Дорожный, Анастасия Кузнецова, Никита Рокотян.

Отдельно большой список крутых ресурсов и ссылок, которые советуют спикеры.

Как я нарисовала программу на языке Piet

Когда-то давно я абсолютно случайно наткнулась на эзотерические языки программирования. Чаще всего эти языки придумываются ради шутки или экспериментов и по-настоящему на них никто не программирует. Тем не менее для этих языков создают и среды разработки, и интерпретаторы с компиляторами — после появления они начинают жить своей жизнью.

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

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

https://teletype.in/@gnykka/piet

Подумываю и другие эзотерические языки в будущем попробовать. Например, сонеты в духе Шекспира начать писать…

​​Обзор цветовых форматов

Не так давно в одной из рассылок, которые я читаю, мне попалась большая статья-обзор на разные цветовые форматы в CSS. Кроме привычных RGB, HEX и HSL там описываются и новые, например, Display P3 и LCH.

RGB (red, green, blue) — самый привычный и наименее абстрактный формат. Экраны устройств состоят из миллионов светодиодов красного, зелёного и синего цвета и, задавая цвет в формате RGB, можно управлять этими диодами напрямую. Принцип основан на физике: смешивая три канала в правильном соотношении, мы можем получить новый цвет.

HEX — это тот же RGB, но значения каждого канала представлены не в десятичной, а в шестнадцатиричной системе счисления.

HSL (hue, saturation, lightness) — это уже более высокий уровень абстракции. Цвет в этом формате состоит из каналов оттенка, насыщенности и светлоты и поэтому он ближе к тому, как человек думает о цвете. Например, какой у цвета оттенок или насколько цвет яркий или тусклый.

Из новых форматов есть Display P3. Это всё тот же RGB, но с более широким диапазоном оттенков. Например, самый яркий красный в P3 пространстве будет ярче, чем в пространстве RGB. К сожалению, с поддержкой пока не очень: CSS функция color, которая реализует эти цвета, существует только в Safari. Но картинки, сохранённые в Photoshop в режиме P3, будут выглядеть заметно ярче в любом браузере.

LCH — это самый новый формат. Он ставит в приоритет человеческое восприятие, чтобы два цвета с одинаковой светлотой визуально казались одинаковой яркости. LCH — аббревиатура от Lightness, Chroma, Hue, где Chroma — аналог Saturation в HSL. При этом у значений Chroma здесь нет верхней границы, она зависит от технических возможностей экрана. Тут опять плохо с поддержкой, есть в Safari, думают про Chrome, но до популяризации формата ещё очень далеко.

Из отдельно любопытного: в октябре прошлого года Злые Марсиане опубликовали идею своего формата вместе с инструментами, которые позволяют его использовать. Это формат OKLCH, он похож на LCH, но не во всём. В этой статье можно прочитать про него подробнее.

Соглашусь с автором обзора, что пока новые форматы не получили большого распространения, лучше всего использовать HSL. HSL цвета интуитивны, их легче подбирать, менять и считывать. Хотя, если подумать, я сама чаще пишу цвета в HEX формате — привычка.

Ссылка на статью: https://www.joshwcomeau.com/css/color-formats

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

📊 22 лучшие визуализации 2022 года от Visualcapitalist.

📊 Тренды в научных визуализациях в 2022 году. Там любопытно: цветовые схемы, таблицы-графики, спарклайны, разрывные оси, …

📝 История создания визуализации снежного покрова в США. Концепция, скетчи и много кода на R.

🗺 Проект с минималистическими визуализациями геоданных. Автор показывает мосты, перекрёстки, станции метро и прочее одновременно информативно и максимально абстрактно.

🎱 В копилочку моего любимого — туториалы по моделированию физических явлений. Среди прочего: движение ткани, течение жидкости, столкновение шаров. Код написан на JavaScript.

​​Как сделать Sankey на D3.js

Всем привет! Я давно не писала, но за время моего отсутствия у меня накопилось много материала, которым хотелось бы опять начать делиться. И среди прочего я хочу вернуть свою старую идею писать туториалы по разным графикам на D3.

В этот раз встречайте sankey!
https://teletype.in/@gnykka/d3-sankey

В следующий раз будет либо treemap, либо force, пока не решила.

#d3 #статья

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

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