​​У Google Arts & Culture вышла коллаборация с центром Жоржа Помпиду, посвящённая творчеству Василия Кандинского:

https://artsandculture.google.com/project/kandinsky

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

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

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

Я почти месяц писала эту статью и вот она готова! Это мой следующий туториал по работе с D3 (и в этот раз не только). Тема карт вообще очень большая и разнообразная, но я пока сконцентрировалась на базовом обзоре теории и простых примерах работы с географией в D3 и Leaflet.

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

#d3 #карты #статья

Я запустила подкаст! 🎙

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

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

Наша первая гостья — Зарема Халилова, фронтенд разработчица, основательница сообщества SPB Frontend и создательница конференции HolyJS. Мы поговорили про стартапы, конференции, важность позитивного фидбека и финансовой независимости.

Послушать можно на Яндекс.Музыке, Apple Podcasts, Google Podcasts, Anchor.fm

Таймкоды: https://gnykka.io/not-today

#подкаст

P.S.: отдельное спасибо Миле за нашу крутую аватарку!

​​Git для организации работы

Бытует такое мнение, что git — это что-то такое программистское, сложное и обязательно про код. На самом деле я знаю программистов, кто не очень в нём ориентируется и не так уж часто им пользуется. То есть можно сделать вывод, что это не взаимосвязанные умения. Я, кстати, не могу назвать себя прямо экспертом, но два раза в жизни я делала cherry pick!

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

Дополнительное преимущество — быстрый деплой небольших статических сайтов с помощью github pages. Это все сайты, которые имеют адрес вида <user>.github.io. Правда так можно сделать только с открытым кодом. Если проект секретный, или вы хотите показать закрытое демо заказчику, то можно использовать Vercel.

Полезные ссылки:
1. Небольшой cheat sheet с основными командами (ru)
2. Handbook про основы работы (en)
3. Большая и подробная документация (ru)

Я привыкла работать с git через консоль с помощью текстовых команд (у меня даже difftool не настроен), но есть и большое количество приложений, которые позволяют работать через удобрый визуальный интерфейс. Это, например, Github Desktop.

И ещё ссылка, которая будет интересна тем, у кого есть аккаунт на Github. Недавно я наткнулась на небольшое демо, позволяющее построить трёхмерный граф коммитов в виде скайлайна:

https://skyline.github.com/

Собрал в одной заметке классные визуализации, которые нашёл этой зимой. А в конце статьи — «подборки подборок» лучших работ за 2020-ый год.

#подборка

Мне всегда было интересно моделирование течения воды или газа. Настолько, что я даже диплом писала по гидродинамике. Если пытаться пересказать его тему простым языком, то он был про возникновение турбулентности при потоке газа в тоннеле с колонной. Иногда меня посещает идея переписать его на JS с красивыми динамическими визуализациями, но на это никогда нет времени.

Зато иногда у меня появляется время на небольшие эксперименты. На прошлой неделе я вспоминала как рисовать на D3 ridgeline plot (он же joyplot). Обычно этот график используется для визуализации распределения, но если поиграться с настройками и параметрами, то из такого графика можно получить красивое демо с бегающими волнами:

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

Про Moscow Dataviz Awards

Не так давно прошла Moscow Dataviz Awards, ежегодная премия в области визуализации данных, инфографики и дата-арта. В лонглист премии вошли 85 работ, и мне стало интересно разобрать их с точки зрения программирования.

В мой личный хит-парад вошли:
1. Карта возраста домов
2. Серия красивых дата-открыток
3. Серия карт доковидного мира
4. Малое семейное древо. Мезенская роспись
5. Пандемия Covid-19

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

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

1. Карта ДТП. Мне всегда нравятся аккуратные визуализации на карте. Единственное, что тут не очень — это сильные тормоза, если пытаться показать данные за целый год. 9 тысяч нарисованных точек заставляют карту очень сильно зависать, но на самом деле от этого сложно куда-то деться, эффективно рисовать много всего на карте очень сложно. А вот хитмап, показывающий кластеры на меньшем уровне зума, и выглядит супер, и работает прекрасно.

2. Смертность в России и Пандемия Covid-19. Здесь мне очень понравился дизайн графиков. Судя по исходному коду, сделаны эти проекты похоже: на React и D3. Про D3 — это моё предположение, потому что явно библиотека не загружается, но часть кода сильно её напоминает (например, те же оси).

3. Как причинить максимум добра. Это хороший пример небольшого скроллителинга. Я вообще люблю скроллителинг, поэтому пройти мимо не могла. Сначала хотела отдельно похвалить графики, а потом поняла, что это заготовленные картинки. И это на самом деле очень классный лайфхак! Картинки (если их не очень много, конечно) будут достаточно быстро загружаться и хорошо подстаиваться под любой размер экрана. Не могу точно сказать, как сделан сам скролл, как будто бы никакая сторонняя библиотека для этого не загружается. Но это может ничего не значить, потому что JS кода в проекте очень много и он запутанный.

4. Распространение Covid-19 на карте. Мне не очень понравился этот проект визуально, но плиточная карта мира точно выглядит необычно. Сделана она с помощью Mapbox, кстати.

5. Фальсификации на голосовании по поправкам в Конституцию. Ещё один скроллителинг. Тут уже можно точно сказать, как это сделано: с помощью Scrollama и D3.

Заметила много работ от Яндекса, Риа Новости, Тасс или Тинькофф. Классно, что дата-журналистика в нашей стране продолжает развиваться! Так и до отделов визуализаций как в New York Times когда-нибудь дойдём. Ещё заметила, что в лонглисте премии много статей с классными и красивыми графиками, но, к сожалению, они выложены или как картинки, или как видео. Поэтому покопаться в коде и посмотреть, как именно они сделаны, не получится.

Отдельно хочу написать про Трибьют Тафти в Табло. Я вообще фанатка Тафти и его принципов, поэтому визуально мне эта работа очень понравилась! Но почему оно такое медленное-то?

​​Очень красивые визуалиации рек по всему миру:
https://hi.stamen.com/rivers-de92f8b462ac

Гифка с Волгой, самой длинной рекой в Европе:

Сегодня открылся новый Парк Интуиции

https://intuition.team/park

Это то место, где делались MDWRLD, лонгрид про когнитивные искажения и несколько других моих проектов. Вкратце: это такая песочница, пара десятков человек собираются в одном чатике, объединяются в команды, придумывают интересные проекты и делают их в течение месяца. А в конце хвастаются ими.

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

​​Очень интересная и залипательная визуализация музыкальных жанров:
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

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

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

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

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