Добрый вечер, коллеги!
Есть очень интересная задача.
Необходимо сделать визуализацию 6 графиков, согласно представленным макетам (во вложении).
Можно оформить в виде модулей или даже просто функций, которым на вход передаётся DOM-элемент, параметры (цвета элементов, размеры, пороговые значения, при которых секция становится красной) и данные:
1) Первый график (1-2.png) – два массива по 4 числа (от 0 до 100).
2) Второй график (2-1.png) – три массива (для каждого сектора) по 5 массивов (для каждой секции) с идентификатором.
3) Третий график (2-2.png) – четыре массива (для каждого сектора) по 2 массива (для каждой секции) с идентификатором.
4) Четвертый график (3-1.png) – число и массив из 15 чисел.
5) Пятый график (3-2.png) – число и массив из 6 массивов по 3 числа.
6) Шестой график (3-3.png) – число и массив из 9 массивов по 2 числа.
Примеры на представленных макетах отображены на черном фоне, но в целом – фон должен быть прозрачен.
Результат ожидается в соотношении размера 1 к 1 с приведёнными макетами (для второго макета – 2-1full.png).
Код синего цвета – #807dee.
Код красного цвета – #d21542.
Серый цвет – это различные вариации прозрачности для rgba (255, 255, 255, 0.3).
Логика заполнения для второго графика приведена на макетах 2-1.png и 2-1full.png, для третьего – в случайном порядке в рамках секции. Четверый график – стобы растут от края к центру (цифры не отражают реальное положение столбцов).
Реализовать желательно с использованием D3.js –
Первый и четвертый график можно реализовать средствами Canvas.
Второй и третий – только на SVG, чтобы была возможность получить доступ к идентификатору, который представляет точка.
Задачи срочные – до воскресенья вечера. Хотелось бы услышать вашу цену. Допустимо выполнить не все из четырёх. Оговаривается заранее.