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

1.1. Основы

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

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

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

1.2 Простой граф horizon

Использование графика horizon начинается с подключения соответствующих библиотек

<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="http://square.github.com/cubism/cubism.v1.js"></script>
<script type="text/javascript" src="http://square.github.com/cubism/highlight.min.js"></script>

и файла стилей horizon.

@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
@import url(//square.github.com/cubism/style.css);

В теле html документа создаем область, внутри которой будет выводится график horizon.

<h2>Time Series Visualization</h2>
<div id="horizon"></div>

Начинаем добавлять код.

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

var context = cubism.context()
    .step(1e3)   //Расстояние между данными в миллисекундах (1e3 = 1 секунда) и для               // справки  1e4 -> 10 секунд, 6e4 -> 1 минута, 3e5 -> 5 минут, 36e5 -> 1 час, //  864e5 -> 1 день
    .size(700)   // Количество отображаемых точек данных
    .serverDelay(0) // 0 миллисекунд для сбора данных на стороне сервера
   .clientDelay(0);  // 0 миллисекунд ожидания со стороны клиента между запросами к //серверу

Естественно, что график horizon интересен как система он-лайн мониторинга, поэтому в базовые возможности пакета cubism.js заложена интеграция с серверами Graphite, Cube и Librato. Короткий обзор этих серверов и порядок получения с них real-time данных мы рассмотрим в следующих статьях. А пока, для учебного примера в качестве источника данных мы будем использовать набор случайных чисел. Для этого используем функцию API context.metric(request[, name]). Эта функция также может быть использована для определения новых источников данных, если мы не хотим использовать встроенные сервера типа Graphite или Cube.

При этом start - время (Дата) - начала временной последовательности, stop - другое время (Дата) - конец временной последовательности, interval - (число в миллисекундах) - шаг отображения графика, и callback - возвращаемое значение. И наконец параметр name - название возвращаемой переменной, содержащей текущую порцию данных. Кроме того параметр name может быть использован для отображения на оси абцисс названия отображаемой выборки данных.

Не мудрствуя лукаво используем метрику, приведенную в документации и тогда функция, для генерации набора данных будет выглядеть следующим образом:

function random_date(name) {
 
  return context.metric(function(start, stop, step, callback) {
  var values = [];

  // convert start & stop to milliseconds
  start = +start;
  stop = +stop;

  while (start < stop) {
    start += step;
    values.push(Math.random());
  }   callback(null, values);
} , name);                 }

Организуем получение данных

var horizon_data = random_data(“”);

И начнем визуализацию. Идеология визуализации определяется подходом, определенным в пакете D3.js. С помощью конструкции select выбирается элемент html (в нашем случае

<div id="horizon"></div>

) и внутри этого элемента производится вывод svg-графики.

d3.select("#horizon").call(function (div) {   
   
    div.selectAll(".horizon")
        .data([eurusd])   // выбор источника данных
        .enter()               // получение данных
        .append("div")    // 
        .attr("class", "horizon")   // выберем график вида “горизонт”
        .call(context.horizon()
        .height(100)   // высота вывода графика в пикселях
       });

Посмотреть и попробовать код примера можно ниже.