Steamgraph

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

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

#практика #d3

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

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

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

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

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

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

#практика #d3

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

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

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

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

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

#d3 #статья

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

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

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

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

#d3 #статья

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

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

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

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

​​Как сделать Sankey на D3.js

Всем привет! Я давно не писала, но за время моего отсутствия у меня накопилось много материала, которым хотелось бы опять начать делиться. И среди прочего я хочу вернуть свою старую идею писать туториалы по разным графикам на D3.

В этот раз встречайте sankey!
https://teletype.in/@gnykka/d3-sankey

В следующий раз будет либо treemap, либо force, пока не решила.

#d3 #статья