Force Layout Diagramm - диаграмма усилий

Сел писать статью и поймал себя на одной очень грустной мысли о том, что почти все свежие идеи и технологии придуманы не нами. Часто даже корректный перевод подобрать сложно. Думаю что Force Layout Diagramm (далее по тексту FLD) - можно обозначить как граф, в котором задана система сил притяжения и отталкивания, действующих между вершинами и ребрами графа. При этом узлы такого графа находят взаимное положение, в котором система имеет локальный минимум энергии (т.е. силы "притяжения" узлов уравновешиваются силами "отталкивания" связей). FLD основан на методе численного интегрирования Верле (Verlet integration) разработанного для вычисления траекторий частиц в моделях молекулярной динамики. Специфика метода Верле - обсчет положения некоторой совокупности частиц, объединенных гибкими связями - нашло так же применение и в компьютерной графике для визуализации сетевых структур. В библиотеке D3.js используется фактор псевдо-гравитации, заставляющий граф располагаться в центре видимой области и используя фактор отталкивания между узлами располагать узлы на некотором фиксированном расстоянии между ними.

Утилита визуализации трафика TNV

Пакет TNV (The Network Visualizer or Time-based Network Visualizer) - предназначен для анализа сетевого трафика, изучения ‘нормальной’ активности в сети, анализа характеристик сетевых пакетов событий безопасности или поиска аварий на сети. TNV может открывать сохраненные библиотекой libpcap сетевые пакеты, собранные такими утилитами как tcpdump, windump, ethereal; переформатировать пакеты, записывать сетевые пакеты; экспортировать данные в формате libpcap или сохранять данные в базу данных MySQL для записи анализа временного тренда.

Диаграмма 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

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