2025: Комп'ютерні системи і мережі. 5. Завдання та засоби візуалізації мереж.

• 2025: Комп'ютерні системи і мережі. 5. Завдання та засоби візуалізації мереж.
• Завдання візуалізації мереж
• Засоби візуалізації. Бібліотека D3.js
  • Галерея діаграм
  • Важливі типи діаграм для візуалізації мереж
    • Діаграми графів, керовані силами
    • Хордові діаграми графів з ієрархічним об'єднанням ребер
    • Діаграми з виділенням областей перетворенням "риб'яче око"
    • Діаграми шарів потоків
    • Динамічна адаптивна візуалізація матриць
• Бібліотека Vis.js
  • Важливі типи діаграм Vis.js
    • Діаграми візуалізації мереж
    • Приклад діаграми з кольорами груп
    • Приклад діаграми з зображеннями
  • Приклад простої візуалізації графа з'єднань множини клієнтів із сервером
  • РГЗ
    • Приклад використання API Vis.js для масштабування розмірів вузлів та товщини ребер:
• Ресурси

Завдання візуалізації мереж

Візуалізація мережевої інфраструктури (у іншому формулюванні - візуалізація графів мережі чи аналіз посилань) - це практика створення візуальних зображень пов'язаних даних. Візуалізацію мережевої інфраструктури використовують для виявлення взаємозв'язків між розрізненими джерелами та споживачами даних у мережі. Засоби візуалізації допомагають покращити аналіз першопричин проблем та складнощів, а також підвищити продуктивність та ефективність роботи ІТ-груп. У багатьох випадках ці засоби відносяться до відображення топології та геометрії мереж. З їхньою допомогою визначаються фізичне розташування та поточний стан мережі. Візуалізація мережної інфраструктури може бути виконана на різних рівнях як для окремих пристроїв у локальних мережах, так і для центрів обробки даних по глобальних регіонах.

Мережева візуалізація іноді може бути використана як широкий термін і, крім посилання на мережне відображення, відноситься до багатьох методів кореляції даних. У комп'ютерних мережах під візуалізацією розуміється процес об'єднання даних у візуальні діаграми та графіки для визначення закономірностей, тенденцій та кореляцій між даними мережі. Ці види прихованих зв'язків можуть залишитися непоміченими у текстових та табличних форматах представлення інформації.

Програми та бібліотеки візуалізації мережевих даних – це важливі набори корисних інструментів, які забезпечують аналітичний огляд аспектів мережевої інфраструктури. Використання розробниками таких рішень підвищує ефективність, допомагає у виявленні та усуненні реальних загроз, а також дає можливість групам розробників, адміністраторів та користувачів систем легко управляти складними мережевими компонентами.

У порівнянні з електронними таблицями, списками інвентаризації та текстовими звітами мережева візуалізація – від графіків та діаграм до топологічних карт – як правило, простіша у використанні та розумінні для адміністраторів та тих, хто не входить до групи ІТ. Крім того, візуалізація мережі дозволяє ІТ-фахівцям отримувати більш надійні знання про свої мережі за допомогою оперативного та швидкого аналізу інфраструктури та поточної продуктивності. Якщо вузол не працює, інформація доступна візуально, на карті, або виділена на графіку. Також ІТ-відділи можуть збирати та аналізувати важливу інформацію, переглядаючи структури вузлових зв'язків у візуальній обстановці, оскільки це може спростити аналіз мережі та покращити планування ємності мереж.

Засоби візуалізації. Бібліотека D3.js

Галерея діаграм

Важливі типи діаграм для візуалізації мереж

Діаграми графів, керовані силами

• Якщо графи не мають позначок на вершинах і ребрах, як дізнатися, однакові ці графи чи різні?
• Якщо графи не мають позначок на вершинах і ребрах, як дізнатися, чи є один граф підграфом іншого?

При малюванні діаграм графів, керованих силами, призначають сили між набором ребер і набором вузлів малюнка графа. Як правило, пружинні сили тяжіння, засновані на законі Гука, використовуються для притягування пар кінцевих точок ребер графа одна до одної, тоді як одночасно сили відштовхування, такі як сили подібні до сил електрично заряджених частинок на основі закону Кулона, використовуються для розділення всіх пар вузлів.

У рівноважних станах для цієї системи сил ребра мають тенденцію бути однакової довжини (через "силу пружин"), а вузли, які не з’єднані ребром, мають тенденцію розтягуватися далі один від одного (через "електричне відштовхування"). Сили притягання країв і відштовхування вершин можуть бути визначені за допомогою функцій, які не ґрунтуються на фізичній поведінці пружин і частинок; наприклад, деякі системи, спрямовані силою, використовують пружини, сила тяжіння яких є логарифмічною, а не лінійною.

Рис. Мережа зв'язків персонажів у Les Misérables розташована за допомогою діаграмми, керованоі силами, збудованоі в бібліотеці D3. Колір представляє довільні кластери в даних.

• Хто автор цього роману?
• Як звучить його назва українською?
• Де і за яких часів відбувається дія?

Рис. Розташування незвязного графа, за допомогою сил позиціонування замість сили центрування. Сили позиціонування, на відміну від сили центрування, запобігають виходу відокремлених підграфів за вікно перегляду.

Хордові діаграми графів з ієрархічним об'єднанням ребер

• Яка максимальна кількість ребер може бути у графі з числом вершин, що дорівнює Вашому рокові народження?
• Яка максимальна кількість ребер може бути у дводольному клієнт-серверному графі з числом серверів, рівним сумі Вашого місяця та дня народження, та числом клієнтів, рівним Вашому рокові народження?

Рис. Ієрархічне об’єднання ребер

Діаграми з виділенням областей перетворенням "риб'яче око"

Може бути важко спостерігати за мікро- та макрооб’єктами одночасно на складних графіках. Якщо збільшити для деталізації, графік буде занадто великим, щоб переглянути його повністю. Якщо зменшити масштаб, щоб побачити загальну структуру, дрібні деталі будуть втрачені. Методи «Фокус + контекст» дозволяють інтерактивно досліджувати область інтересу (фокус) більш детально, зберігаючи загальну структуру (контекст).

Рис. Діаграма з перетворенням "риб'яче око"

На графіку з перетворенням «риб’яче око» збільшує локальну область навколо миші, залишаючи більший графік незмінним для контексту. Локалізований круговий характер викривлення можна чітко побачити, застосувавши його до рівномірної сітки:

Діаграми шарів потоків

Рис. Діаграма шарів потоків для пов'язаних часових категорій (функцій)

Графік шарів потоків зазвичай складається з кількох компонентів. Горизонтальна вісь зазвичай представляє час. Вертикальна вісь представляє величину виміряного значення. Це можуть бути числові значення, відсотки або будь-які інші кількісні показники.
Подібно до стовпчастої діаграми з накопиченням, графік шарів потоків складається з кольорових шарів, накладених один на одного, і кожен шар представляє категорію. На графіках потоків шари даних плавні та хвилеподібні.

Динамічна адаптивна візуалізація матриць

• Якщо граф заданий матрицею суміжності, як дізнатися максимальну відстань між вершинами цього графа?
• Якщо граф заданий матрицею суміжності, як дізнатися про відстань, між усіма вершинами цього графа?
• Якщо матрицю суміжності графа звести у квадрат, який граф ми отримаємо?

Рис. Матриця суміжності мережі персонажів у Les Misérables. Тут вершини представляють персонажів у книзі, тоді як ребра представляють спільне розміщення в розділі.

Мережа може бути представлена матрицею суміжності, де кожна комірка

$[i][j]$ представляє ребро від вершини

$i$ до вершини

$j$.

Природна візуалізація двовимірного представлення графіка мережі є матриця! Однак ефективність матричної діаграми значною мірою залежить від порядку рядків і стовпців: якщо пов’язані вузли розташовані близько один до одного, легше ідентифікувати кластери та мости.

Цей тип діаграми можна розширити за допомогою ручної зміни порядку рядків і стовпців, а також розширення або згортання кластерів, щоб забезпечити більш глибоке дослідження.

Бібліотека Vis.js

Важливі типи діаграм Vis.js

Діаграми візуалізації мереж

Приклад базисної діаграми

Підключення клієнтської бібліотеки

<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

Скрипт створення даних для графа мережі

// create an array with nodes
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

// create an array with edges
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// create a network
var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);

Приклад діаграми з кольорами груп

Приклад діаграми з зображеннями

Політика та обмеження клієнт-серверних інтернет-технологій визначають
базисну топологію розподілених інтернет-додатків:
топологія "дводольний граф", де одна частка - серверні вузли, друга - клієнтські вузли

В інтернет-додатках окремим і найпоширенішим випадком цієї топології є топологія "зірка".

Приклад простої візуалізації графа з'єднань множини клієнтів із сервером

РГЗ

Створити мульти-клієнт - серверний додаток з візуалізацією поточної топології мережевого додатку та стану з'єднань, що використовує хостинги github (codespace), glitch.com, replit.com
з реалізацією функціоналу за допомогою API Socket.IO

Додаток має забезпечувати

1. передачу повідомлень від вашого клієнта будь-якому іншому (unicasting)
2. передачу повідомлень від вашого клієнта всім іншим (broadcasting)
   Повідомлення мають бути двох типів

• текстові повідомлення
• зображення

Під час передачі даних додаток повинен контролювати та візуалізувати поточні затримки поширення (propagation delay))

${\delta }_i$ від клієнтів та реалізувати синхронізацію годинників усіх клієнтів та серверів з візуалізацію параметрів синхронізації

${\theta }_i$ та дрейфу годинників кожного клієнта відносно до вибраного сервера.

Приклад використання API Vis.js для масштабування розмірів вузлів та товщини ребер:

3. Клієнти з різними ip повинні мати різний колір вузлів, клієнти з однаковим ip повинні мати однаковий колір вузлів
4. Використовувати діаграму шарів потоків для демонстрації зміни в часі пропускних здібностей множини каналів.

Ресурси

1. libp2p Publish-Subscribe
2. Галерея діаграм D3.js
3. Бібліотека Vis.js
4. Бібліотека p5.js