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

Так, некоторое время назад у меня возникла идея создать цикл небольших статей-туториалов по D3.js. Пока я вижу это как нечто похожее на «как сделать такой-то график» или «как работает такая-то функция». То есть не просто пример кода, а подробное пошаговое объяcнение. Возможно, в будущем из этого могут вырасти почтовая рассылка или даже курс.

Но пока что я хочу понять, куда мне имеет смысл в этом деле двигаться. Поэтому я прикрутила к каналу комментарии, и под этим постом вы можете написать, было бы вам интересно читать технические детали про D3, что именно и насколько глубоко. Или вдруг вы хотите у меня что-нибудь спросить?

Сегодняшняя партия ссылок про красоту и пользу:

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

2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.

3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.

#ссылки

​​Туториал как делать простые D3 графики

Я думала, с чего начать, и решила в первой статье разобрать создание line и scatter графиков. А ещё немного углубиться в код D3 и понять, зачем нужны те или иные функции.

Я часто натыкаюсь на разные гайды, как что-то сделать с помощью D3, и меня смущает, что там почти нет объяснений. Большинство статей содержат алгоритм, что, куда и откуда надо скопировать, чтобы благодаря какой-то неведомой магии в результате получилась картинка. Иногда этого достаточно, но часто непонимание, зачем что-то делается в коде, может приводить к странным ошибкам.

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

https://teletype.in/@gnykka/d3-line-scatter

#d3 #статья

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

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 когда-нибудь дойдём. Ещё заметила, что в лонглисте премии много статей с классными и красивыми графиками, но, к сожалению, они выложены или как картинки, или как видео. Поэтому покопаться в коде и посмотреть, как именно они сделаны, не получится.

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