Добрый вечер, коллеги!

Есть очень интересная задача.

Необходимо сделать визуализацию 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) Пятый график - число и массив из 6 массивов по 3 числа.

6) Шестой график - число и массив из 9 массивов по 2 числа.

Примеры на представленных макетах отображены на черном фоне, но в целом - фон должен быть прозрачен.

Результат будет приниматься в соотношении размера 1 к 1 с приведёнными макетами (для второго макета - 2-1full.png).

Код синего цвета - #807dee.

Код красного цвета - #d21542.

Серый цвет - это различные вариации прозрачности для rgba(255, 255, 255, 0.3).

Логика заполнения для второго графика приведена на макетах 2-1.png и 2-1full.png, для третьего - в случайном порядке в рамках секции. Четверый график - стобы растут от края к центру (цифры не отражают реальное положение столбцов).

Реализовать желательно с использованием D3.js - https://github.com/mbostock/d3/wiki/Gallery

Первый и четвертый график можно реализовать средствами Canvas.

Второй и третий - только на SVG, чтобы была возможность получить доступ к идентификатору, который представляет точка.

Задачи срочные — до воскресенья вечера. Хотелось бы услышать вашу цену. Допустимо выполнить не все из четырёх. Оговаривается заранее.

10 лет назад
DenisIzmaylov
Денис 
39 лет
10 лет в сервисе
Был
10 лет назад

Заявки фрилансеров

Нет заявок фрилансеров