MooWheel надає веб-майстрам зручний інструмент для візуалізації даних за допомогою JavaScript і об’єкта <canvas> (детальніше про об’єкт я писав на цьому блозі в статті MooCanvas або малюємо через JavaScript). На практиці MooWheel може бути використаний для відображення зв’язків між різними об’єктами (людьми, спільнотами, речами, тощо). Розповсюджується під MIT ліцензією. Результат виглядатиме якось так:

Для роботи скрипта необхідні:

1. CanvasText — робота з текстом.
2. ExCanvas (підтримка canvas в Internet Explorer’і).
3. Фреймворк MooTools 1.2
4. … і зрозуміло сама бібліотека MooWheel.

Все це входить в збірку, яку ви можете викачати з сайту MooWheel.

Даний граф не лише генерується в статичну картинку, але при наведенні на кожен елемент підсвічуються його зв’язки з іншими елементами колеса. Дивіться демонстраційний приклад.

Для створення графа необхідно передати тільки 2 аргументи. Перший — це масив даних, а другий — полотно (елемент canvas):

new MooWheel(dataArray, canvasElement);

MooWheel клас також може генерувати граф на основі даних, представлених у форматі JSON:

new MooWheel.Remote(false, canvasElement, {
      url: 'http://your.json/url.php'
   }
});

Примітка: В даному прикладі перший аргумент не має значення. Нижче наведений приклад, коли  цей параметр є дуже важливим.

var wheelData =  [{
                    "connections": ["otheritem"],
                    "text": "Item Name",
                    "imageUrl": "http://some.image/url.jpg",
                    "id": "itemid"
                  }, ...];

   new MooWheel.Remote(wheelData, canvasElement);

Для кожного об’єкту, що має прописаний “imageUrl”, буде завантажено зображення, а тоді додане в колесо-граф.

Що стосується налаштування, то є ряд варіантів, які дозволяють вам змінити спосіб генерування і відображення графа:

url: '',

center: {
   x: 100,
   y: 100
},

lines: {
   color: 'random',
   lineWidth: 2
},

radialMultiplier: 3.47,

hover: true,

hoverLines: {
   color: 'rgba(255,255,255,255)',
   lineWidth: 3
},

onItemClick: function() {}

url: Як зазначалося раніше, ця опція дозволить вам створити колесо, побудоване на основі даних отриманих через AJAX. Ця опція доступна тільки при використанні з MooWheel.Remote.

center: Ця опція дозволяє задати центр графа. За замовчуванням:

{x: (width / 2), y: (height / 2)}

lines: Тут ви можете задати колір ліній (rgba(r, g, b, alpha)) або колір може бути випадковим (’random’). lineWidth — ширина лінії.

radialMultiplier: радіальний множник (за замовчуванням — 3.47). Взагалі, чим більше пунктів є на колесі, тим більше це число повинне бути.

hover: Включає/виключає здатність при наведенні на пункт колеса показувати його зв’язки з рештою точок графа.

hoverLines: Та ж опція, що й lines, але у випадку, якщо користувач перебуває над пунктом колеса (примітка: ‘random’ не буде працювати тут).

onItemClick: При потребі кожен пункт на колесі-графі може бути посиланням (лінком), тобто при натисканні  ви зможете запускати функцію — function(item, event), де item — пункт колеса, який визначено в масиві даних, а також event — подія кліку по полотні (canvas).

Використання

Використання MooWheel дуже просте. По-перше, слід включити необхідні JavaScript-файли в заголовку вашої веб-сторінки:

<script type="text/javascript" src="js/mootools-1.2-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript" src="js/canvastext.js"></script>
<script type="text/javascript" src="js/moowheel.js"></script>

Далі створюємо масив елементів для зв’язків:

var data = [{
             id: 'ihorv',
             text: 'Ihor Vispyanskiy',
             connections: ['bohdand', 'olehm']
            },

            {
             id: 'pavlog',
             text: 'Pavlo Griniv',
             connections: ['ivank', 'ihorv', 'bohdand']
            },

            {
             id: 'ivank',
             text: 'Ivan Kosiv',
             connections: ['olehm']
            },

            {
             id: 'romans',
             text: 'Roman Swistun',
             connections: ['ivank', 'ihorv', 'olehm', 'bohdand']
            },

            {
             id: 'yuriyt',
             text: 'Yuriy Taran',
             connections: ['ihorv', 'olehm', 'bohdand']
            },

            {
             id: 'olehm',
             text: 'Oleh Mishin',
             connections: ['ivank', 'ihorv']
            },

            {
             id: 'bohdand',
             text: 'Bohdan Detsik',
             connections: ['ihorv', 'olehm']
}];

Потім вписуємо на сторінці контейнер, в якому буде розміщуватися ваше колесо:

<div id="canvas-container"></div>

var wheel = new MooWheel(data, $('canvas-container'));

Джерело

http://www.unwieldy.net/projects/moowheel/ — Офіційний сайт проекту (англійською мовою).