Построение диаграмм онлайн

Реализуйте сервис, позволяющий строить диаграммы онлайн. Данные вводятся таблицей. Для вёрстки столбчатую и круговую диаграммы можно собрать на CSS (высота столбцов, conic-gradient для круга); в скрипте пересчитывайте высоты, доли и цвета. Логика — на клиенте без перезагрузки. Скачать верстку для проекта.

Основные возможности проекта

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

Ввод данных

Пользователь должен иметь возможность вводить данные для диаграммы в виде таблицы с двумя колонками:

Название категории.
Числовое значение.

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

Столбчатая диаграмма

Столбчатая диаграмма должна отображать данные в виде вертикальных столбцов. Особенности реализации:

Каждый столбец соответствует одной категории.
Высота столбца пропорциональна значению.
Под каждым столбцом подпись с названием категории.
Над столбцом отображается числовое значение.
Ось Y с масштабом.

Круговая диаграмма

Круговая диаграмма должна отображать данные в виде секторов круга. Особенности реализации:

Каждый сектор соответствует одной категории.
Угол сектора пропорционален значению.
Рядом с сектором отображается подпись с названием категории и процентом.
Сектора должны быть разноцветными.

Настройка цветов

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

Отображение

Диаграмма должна отображаться на странице. Тип (столбчатая / круговая) переключается без повторного ввода данных. Кнопка скачивания PNG — в задании на JS (canvas / svg).

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

Горизонтальная столбчатая диаграмма.
Сортировка данных по убыванию/возрастанию.