Возвращаюсь с несколькими потенциально полезными ссылками в копилочку.

1. https://riccardoscalco.it/textures — JavaScript библиотека для создания SVG паттернов. Если хотели следующую карту залить не цветом, а узорами в полоску или клетку, то это как раз оно!

2. http://sergeychikin.ru/365 — огромный набор иконок и пиктограмм. Автор добавляет по одной каждый день, пользоваться можно бесплатно, если вы не юр. лицо или не зарабатываете, их используя.

3. http://histography.io — красивая и интересная визуализация статей Википедии с момента Большого взрыва до наших дней. Кстати, сделана на PIXI.js с использованием WebGL.

#ссылки

Временная ось на D3js

Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.

Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.

В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL

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

Здесь всего 2 зависимости: D3js (для модификаций svg элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).

#практика #d3

​​Как создавать лабиринты

На днях я наконец-то дочитала книгу Mazes for Programmers и теперь знаю аж 12 разных алгоритмов для генерации лабиринтов, несколько методов для их решения и даже умею адаптировать эти методы под разные формы и поверхности.

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

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

Если вам будет интересно, код можно найти у меня на github. Все примеры написаны на Ruby, но в будущем я хочу переписать их на JS и снабдить визуализациями.

#алгоритмы #лабиринты

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

Так, некоторое время назад у меня возникла идея создать цикл небольших статей-туториалов по 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.: отдельное спасибо Миле за нашу крутую аватарку!