SVG анимации

Последние 2 недели я активно делала проект для Парка Интуиции. О нём я пока молчу до публичной публикации, но расскажу про некоторые особенности разработки. Я делала для него много noscript анимаций в том числе зависящих от скролла. Решила собрать несколько небольших примеров и поделиться ими.

1. https://codepen.io/gnykka/pen/KKVVXMv
Самый простой способ сделать анимацию — нативный, в самом noscript. Наряду со стандартными и привычными всем элементами типа path, circle и т.д. в noscript есть элемент animation. Можно сделать автоматическую анимацию какого-то свойства (например, прозрачности) или запускать анимацию из кода. Можно взять элемент animateMotion и сделать анимацию движения по траектории.

2. https://codepen.io/gnykka/pen/QWyyqJQ
Второй простой и стандартный способ — анимация в css с помощью keyframes. Тут уже noscript ничем не отличается от любого другого html элемента. Удобство в том, что можно делать сложные анимации относительно просто без написания кода. Здесь, кстати, может помочь отличная шпаргалка про easing functions.

3. https://codepen.io/gnykka/pen/ZEbqraW
Ну и сложный способ для ценителей — через код можно сделать практически всё, что угодно. Например, морфинг объектов. Или можно привязывать изменение свойств элементов к положению скролла. Или объединить и делать морфинг по скроллу (как раз наш случай). В примере выше я тестировала плагин Greensock, но потом выяснила, что он доступен только по подписке. Ещё я попробовала KUTE.js, но там морфинг какой-то ограниченный и не очень красивый. Так и не нашла удобного инструмента, посоветуйте мне, если знаете такой!

А то, что у нас получилось, покажу на следующей неделе.

#практика #noscript #анимации

Проект «Искажения»

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

bias.slaylines.io

Началась история с моего желания сделать что-то со скроллителлингом. У ребят из нашей команды в свою очередь было желание рассказать про разные обманки мозга. На этом мы объединились и сузили тему до реализуемой за месяц. Вова Тупикин и Никита Ларионов нашли материал и придумали весь текст. Даша Колесникова нарисовала иллюстрации, связанные визуально и по смыслу с разными абзацами текста. А я всё это собрала в единую штуковину.

Steamgraph

Давненько не брала я в руки шашек! То есть не кодила красивых и бессмысленных графиков на d3. Вчера мне внезапно захотелось сделать steamgraph. Получился такой динамический пример:

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

#практика #d3

​​Моё главное развлечение последней недели — генерация лабиринтов. Уже полгода у меня на ноуте лежит книга Mazes for Programmers, но добралась я до неё только сейчас.

Книга оказалась интересной, в ней объясняются алгоритмы построения и решения лабиринтов. Объясняются просто, в картинках и описаниях без лишних математических формул. Пока я освоила первую главу из четырёх. Там рассматриваются основные 6 алгоритмов для генерации идеальных (perfect) лабиринтов. Это в которых нет недоступных клеток, то есть из любой выбранной клетки можно попасть в любую другую.

Самые простые алгоритмы это Binary Tree и Sidewinder. Они создаются абсолютно случайно (фактически подбросом монетки в каждой клетке), поэтому имеют очень предсказуемую структуру. Противоположны им Aldous-Broder и Wilson's. С их помощью лабиринты получаются сложными и без угадываемой структуры, но создаются очень долго из-за большого числа случайных блужданий. Два последних алгоритма, Hunt and Kill и Recursive Backtracker, ограничивают блуждания, поэтому работают быстрее и эффективнее. А ещё у них меньше всего тупиков.

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

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

​​Hunt and Kill алгоритм

Продолжаю изучать алгоритмы генерации лабиринтов. И чтобы уж точно закрепить новые знания, я решила сделать визуализацию работы hunt and kill алгоритма:

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

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

Пара ссылок в копилочку

Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.

А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.

#ссылки

Генератор супрематизма

В последнем Парке Интуиции во время обсуждений возможных проектов прозвучала идея сделать генератор картин Кандинского. Мне, как большому любителю абстрактного и современного искусства, эта идея сразу приглянулась.

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

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

Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.

А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.

#практика #generativeart

Картографические проекции

Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e

А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.

#карты #ссылки

Про доступность приложений

Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
https://twitter.com/Kristy_Viers/status/1287189581926981634

А на днях Сбербанк опубликовал подробный гайд по доступности интерфейсов:
http://specialbank.ru/guide/

Это важная тема, которой часто пренебрегают. Я регулярно наталкиваюсь на формы, которые не работают с клавиатуры, кнопки, которые завёрстаны обычными span элементами или ссылки, которые не ссылки, а просто текст, клик на который обрабатывается в коде. А ещё стоит помнить про цвета: до 8% людей в мире имеют разные нарушения восприятия цвета.

Ещё полезные ссылки по теме:
• W3C стандарты и гайдлайны
• Lighthouse — встроенный инструмент Chrome для аудита страницы (проверяет скорость загрузки, доступность, сео и т.д.)

#ссылки

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

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 (для модификаций noscript элементов и преобразования дат в координаты экрана) и 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 #статья