MooWheel: a javascript connections visualization library

The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

MooWheel only requires 2 arguments to create a basic wheel graph. The data array and the canvas element:

new MooWheel(dataArray, canvasElement);

The canvas element can be passed as either an element reference or an id string. The data array must be a standard javascript array following the format outlined in the usage section. The MooWheel class can also generate a graph based on an AJAX request. Simply supply the AJAX call information in the MooWheel options and it will get the JSON data (which should be in the same format as the data array) and generate a graph:

new MooWheel(false, canvasElement, {
   json: {
      url: 'http://your.json.url/request.php',
      method: 'get',
      send: {
         'some_variable': 'some_data'
      }
   }
});

Note: In order for the JSON call to be made, be sure to set the data argument (first argument) to false. Speaking of options, there are a number of options available that allow you to change the way the graph is generated and displayed:

json: {
   url: '',
   method: 'get',
   send: {}
},

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

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

radialMultiplier: 3.47,

hover: true,

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

json: As previously explained, this set of options will allow you to generate a wheel graph based on an AJAX call. The send object allows you to specify a set of variables to be sent via method to url. center: This option object lets you specify where you want the graph centered on the canvas element. By default, it will be centered at {x: (width / 2), y: (height / 2)} but this can be changed to any value you like. lines: Here, you can change the way the lines are displayed. The color of the lines can either be all the same (set color to an 'rgba(r, g, b, alpha)' value) or random (set color to 'random'). Line width is self-explainatory. radialMultiplier: How spaced apart the graph will be. If not included, a default of 3.47 will be used. Generally, the more items you have on the graph, the higher this number should be. hover: Enable/disable the ability to hover over individual points and see the item's connections. hoverLines: The same purpose as the lines option, but for when a user hovers over an item. Note: 'random' will not work here.

Using MooWheel is very simple and extremely easy. First, include the necessary files in the header of your page:

<script type="text/javascript" src="js/mootools.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>

Next, you create an array of items for the connections. The first entry of each sub-array is the starting object (the object at the point):

var data = [['Joe B', 'Ryan K', 'Charlie C'],
            ['Ryan K', 'Charlie C'],
            ['Charlie C', 'Ryan K', 'Joe B'],
            ['Robert Z', 'Joe B', 'Charlie C']];

Then you add a canvas tag to the body of your document:

<canvas width="400" height="400" id="canvasObj"></canvas>

And finally, go back to your script and initialize your MooWheel object:

var wheel = new MooWheel(data, $('canvasObj'));