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

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

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

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

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

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

#практика #d3