Ссылки в этот раз не столько полезные, сколько залипательные.

1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.

2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)

3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.

#ссылки

​​Хотела успеть написать второй туториал до Нового Года, но не успела. Будет уже в следующем году. Планирую разобрать бар чарты.

А пока принесу вам немного новогоднего настроения! На выходных Миша (@ohblog) написал небольшой скрипт с WebGL, который позволяет добавить снежинки на любой сайт. Это мы вспоминали девяностые и двухтысячные, когда подобные снежинки появлялись почти везде.

Демо можно увидеть тут: https://codepen.io/mkalygin/pen/ZEpveZp
Код тут: https://github.com/mkalygin/snowflakes

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

​​Очень красивый проект: тепловые фотографии природы Исландии, снятые на инфракрасную камеру.

https://petapixel.com/2019/07/13/shooting-high-res-thermal-photos-of-iceland-to-show-nature-at-work/?q=5

#ссылки

​​Туториал как сделать bar chart

Продолжаю писать про создание визуализаций. Третьим графиком становится bar chart. По-русски он называется столбчатой диаграммой, и почему-то мне кажется это название очень забавным.

https://teletype.in/@gnykka/d3-grouped-bars

Как всегда, буду рада комментариям =)

#d3 #статья

State of JS

На днях появилась ежегодная статистика State of JS. Она собрана по ответам на анкеты программистами в разных странах. Это общее представление о состоянии и трендах веб разработки.

На что я обратила внимание:

1. В JS укрепляются новые модные фичи (хотя часть типа webGL или webAssembly пока мало кто пробовал), в целом он становится всё удобнее сразу из коробки. Но и тайпскрипта стало ещё больше, он уверенно на первом месте из расширений, что показывает, что запрос на типизацию в JS по-прежнему актуален.

2. Svelte обогнал React. Это круто, что появилась стабильная и уверенная альтернатива. Я сама последнее время мало использую фреймворки, но Svelte с удовольствием попробую в одном из будущих подходящий под него проектов.

3. В плане слоёв данных Redux наконец свалился вниз, а верхние строчки окончательно захватили GraphQL и Apollo. GraphQL это язык запросов к серверу и API, а Apollo — одна из его имплементаций. Они позволяет настроить сервер и клиент так, чтобы клиент мог быстро и удобно запрашивать только нужные ему в данный момент данные. Я использовала эту связку при разработке одного мобильного приложения полтора года назад — очень удобно менеджить состояние и взаимодействия с сервером. Redux я не люблю, потому что это немного портал в ад и простая концепция сделанная сложно.

https://2020.stateofjs.com/ru-RU

#ссылки

​​Старые карты

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

Летом 2019 года в Лос-Анджелесе я была на выставке Book of Beasts, посвящённой средневековым бестиариям. Помимо изображений и описаний мифических животных, мне запомнилась одна карта. В её центре было Средиземное море и центральная Европа, по краям — Россия, Северная Африка и терра инкогнита. И вот эта неизвестность вокруг была заполнена драконами, змеями, монгольскими всадниками, чуть ли не белыми ходоками.

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

А возвращаясь к картам, вчера наткнулась я на огромную онлайн коллекцию:
https://www.davidrumsey.com

Это карта Москвы и России 1665 года ↓

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

1. Генератор средневековых городов. Он сделан в рамках одного из челенджей в сообществе reddit. Код написан на языке Haxe и выложен на github.

2. Большое creative coding портфолио оформленное как один большой observable блокнот. Там настолько много всего, что браузер почти сразу начинает заметно подтормаживать.

Недавно вспоминала, как в D3 делать тримапы и сделала небольшой пример, вдохновлённый картинами Мондриана:
https://codepen.io/gnykka/pen/mdOyepW

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

#ссылки

​​У 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). Тогда и линии оказываются ровные, и стыки красивые. Но всё равно каждую из линий нужно рисовать отдельно.