Москва

Россия

Добрый вечер, коллеги!
Есть очень интересная задача. 
Необходимо сделать визуализацию 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, чтобы была возможность получить доступ к идентификатору, который представляет точка.

Задачи срочные — до воскресенья вечера. Хотелось бы услышать вашу цену. Допустимо выполнить не все из четырёх. Оговаривается заранее.

Добрый вечер, коллеги!
Есть очень интересная задача. 
Необходимо сделать визуализацию 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 - <a href="https://github.com/mbostock/d3/wiki/Gallery" rel="nofollow noopener noreferrer" target="_blank">https://github.com/mbostock/d3/wiki/Gallery</a>
Первый и четвертый график можно реализовать средствами Canvas.
Второй и третий - только на SVG, чтобы была возможность получить доступ к идентификатору, который представляет точка.

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

Денис DenisIzmaylov

Сделать визуализацию (JavaScript + D3.js + SVG)