Нужно написать решение на CSS+JS которое по входящим данным будет строить круговую диаграмму (см. вложенное изображение).
Например, скрипту передаются такие данные:

Количество зон: 10

Зона 1:
тип: цельная,
заполнение: 90%,
цвет заполнения: #111111

Зона 2:
тип: цельная,
заполнение: 84%,
цвет заполнения: #F4СC11

и т.д.

Зоны могут быть составными (внутри зоны есть подзоны). В этом случае передаваемый параметр "тип" будет иметь значение "составная", а также появится параметр "подзона" с перечислением параметров подзон.

Пример параметров для составной зоны:
Зона 4:
тип: составная,
заполнение: 84%,
цвет заполнения: #F4СC11,
подзона 1: 34% #345678,
подзона 2: 30% #565818,
подзона 3: 36% #3F5678

На основе полученных данных скрипт строит круговую диаграмму.

Важно, чтобы каждая зона обладала интерактивностью, при наведении на зону она будет реагировать (например становится полупрозрачной, или вокруг неё появляется тень), а если зона составная то она должна быть кликабельной. Клик по такой зоне открывает эту зону в более детальном виде - см. вложенное изображение 2)

Еще нужно, чтобы было нормальное масштабирование, т.е. весь этот график строится внутри контейнера определенного размера, который может меняться.
Также нужно реализовать вывод подписей к секторам (вместо цифр 1-10 на картинке будут текстовые подписи), по возможности в виде какого-нубудь тега html, чтобы можно было у него стили менять.

Важно, чтобы скрипт хорошо работал во всех современных браузерах, особенно важна работоспособность в мобильной версии.

В идеале для реализации системы использовать только связку CSS+JS (можно чистый, можно фреймворк).

Решение должно быть легковесным.

Подробнее про задачу рассказал в этом видео: https://share.cleanshot.com/5TjSpQL5