Интерактивная круговая диаграмма для студии дизайна

Анимировал и интегрировал в 1С-Битрикс круговую диаграмму стоимости ремонта.

Запрос клиента

Ко мне пришел новый клиент с нестандартной задачей: сделать интерактивный анимированный график для сайта.

Процесс

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

Я выяснил, что сайт находится на CMS 1С-Битрикс, получил необходимые доступы и приступил к реализации. 

Собрал график в svg формате, добавил все необходимые данные и надписи, настроил анимацию, показал клиенту. 

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

Я исправил это и показал клиенту снова. 

Результат

Наведите мышкой на диаграмму.

Дополнительные возможности

Таким образом можно анимировать и оживлять любые графики, диаграммы, чертежи, таблицы. Элементы графика могут быть кликабельны, открывать подсказки и пояснения, цифры могут появляться / исчезать / крутиться и т.п., части графика могут «выезжать» / «приезжать» / «падать». Анимацию можно интегрировать в любые CMS через html-код или iframe. Например, в 1C-Битрикс (Bitrix), Вордпресс (WordPress), Тильда (Tilda), Джумла (Joomla), ModX и др.