Ну тут очевидно нужно либо диапазон времени брать шире, либо делать уже сам div в котором отображается график.
Иначе, представьте что вы установили, например сжатую шкалу какой то опцией, а ширина diva осталась такой же. Чем остаток будет заполнен?
Я думаю что его сначала на github куда то надо положить, а тут дать ссылку с просьбой оценить. Если код не большой, то появятся люди, которые с удовольствием вам помогут!
Не специалист во фронтенде, но общий алгоритм решения выглядит так:
1. Получаете <угол поворота> картинки
2. <номер секции> = Math.floor( <угол поворота> / (360/<количество секций>) )
3. ?????
4. PROFIT!
ООП лучше юзать всегда. Конечно если нужно сложить пару чисел, то городить диаграмму классов смысла нет, но если что то более-менее серьёзное то лучше всё таки ООП. Всё то же самое можно сделать и без ООП, но вот ООП-подход позволяет писать понятный, сопровождаемый и надёжный код.