View the project on Google Code 06.29.2008 version 0.2 now available! get it. What's new? Looking for version 0.1 instead?

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.

This script requires three libraries to support it. CanvasText (for text support with canvas elements), ExCanvas (for IE canvas support), and MooTools 1.2; all three are included in the package.
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 a JSON request. There is a special sub-class used to make this call, named MooWheel.Remote, which uses the same parameters as the parent MooWheel class. 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.Remote(false, canvasElement, {
      url: 'http://your.json/url.php'
   }
});
Note: In this context, the first argument (the data parameter), doesn't matter. Below is an example where the parameter is very important. MooWheel.Remote can also be used to preload images for each item:
var wheelData =  [{
                    "connections": ["otheritem"],
                    "text": "Item Name",
                    "imageUrl": "http://some.image/url.jpg",
                    "id": "itemid"
                  }, ...];
             
   new MooWheel.Remote(wheelData, canvasElement);
Each item that has an "imageUrl" will have that image preloaded, and then added to the wheel when it is drawn In terms of options, there are a number of options available that allow you to change the way the graph is generated and displayed:
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: As previously explained, this option will allow you to generate a wheel graph based on an AJAX call. This option is only available when used with MooWheel.Remote. 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. onItemClick: Allow each item on the wheel to be a "link"; when the use clicks an item, you can execute a function. It's parameters are function(item, event) where item is the item object as defined in the data array, and event is the canvas click event.
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-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>
Next, you create an array of items for the connections:
var data = [{
             id: 'joeb',
             text: 'Joe B',
             connections: ['ryank', 'charliec']
            },
            
            {
             id: 'ryank',
             text: 'Ryan K',
             connections: ['charliec']
            },

            {
             id: 'charliec',
             text: 'Charlie C',
             connections: ['ryank', 'joeb']
            },
            
            {
             id: 'robertz',
             text: 'Robert Z',
             connections: ['joeb', 'charliec']
            }];
Then you add a container for the canvas tag to the body of your document:
<div id="canvas-container"></div>
And finally, go back to your script and initialize your MooWheel object:
var wheel = new MooWheel(data, $('canvas-container'));
View a larger, AJAX-powered demo or... Hot and cold wheels which rank the connections based on their value/weight or... an image and text wheel, using Twitter data as an example