Диаграмма Horizon. Часть 4-я.Выводим график с разными высотами "слоев".

1.5. Выводим график с разными высотами “слоев”

И наконец (как обещано в начале статьи) выведем график, с зеркальным наложением отрицательных значений, изменяя высоту с одного “слоя” до четырех.

Диаграмма Horizon. Часть 3-я. Выводим группу параметров

1.4. Выводим группу параметров

Для имитации группы параметров сделаем вызов функции random() с различным значением [name].

var  first = random("first"),
       second = random("second"),
        third = random(“third”);

Диаграмма Horizon. Часть 2-я. Добавляем элементы.

1.3. Добавляем элементы

Первое что мы сделаем - это изменим вид графика, сделав его более наглядным и приятным для глаза. Не буду оригинальничать и для моделирования потока данных использую функцию, приведенную в документации к пакету cubism.js.

Диаграмма Horizon. Как устроен паровоз. Часть 1-я.

1.1. Основы

Для работы с графиком horizon Mike Bostock разработал Cubism.js - библиотеку для отображения временного ряда в режиме реального времени. Новые данные добавляются с помощью запроса последних значений, через заданный интервал времени. Графики генерируются постепенно, сдвигая изображение на один пиксель влево.

Библиотека cubism.js является надстройкой над мощным графическим пакетом d3.js. Подробный разбор этих пакетов в совокупности слишком объемен, поэтому в рамках нашего блога мы остановимся на ключевых моментах использования библиотеки cubism.js, отсылая за более подробной информацией по d3.js к соответствующей документации.

Давайте посмотрим как все работает (от простого к сложному) и в финальной (4-ой) статье выведем график, с зеркальным наложением отрицательных значений вот такого вида, изменяя высоту с одного “слоя” до четырех.

Диаграмма Horizon. Основы.

Основной недостаток классических диаграмм с равномерной шкалой ординат - сложность корректного отображения рядов динамики с резкими скачками уровней.

Рисунок 1

Для визуальной компенсации “разброса” параметров требуется уменьшение масштаба диаграммы, и показатели в ней динамики более “спокойного” объекта теряют свою наглядность.