News

How to visualise data with the MooWheel plugin

Unleash the MooWheel plugin to transform data connections into easy to absorb visual information

6

Emulate the animations seen in the Dataveyes site and start generating simple data visualisations with the JavaScript-based MooWheel library

Draw data connections

If you’ve been inspired to delve into the world of data visualisations with a simpler solution, MooWheel by unwieldy.net’s Joshua Gross is a neat option. This library effectively draws a wheel of data nodes, plotting defined relationships or ‘connections’ between the various data items. To begin using the library, simply visit labs.unwieldy.net/moowheel and click the link to save the latest zip archive.

Attach the library

Unpack the files and copy the five core JavaScript files found inside: ‘canvastext.js’, ‘excanvas.js’, ‘moowheel.js’ and the two mootools named files. You’ll want these placed into the root of your HTML page and attach them within the <head> or just before the closing </body> tag. Immediately after we’ll place another <script> brace for the code we’ll write later to initialise the core function for handling the drawing on load:

001    <script type=”text/javascript” src    =”mootools-1.2-core-nc.js”></script>
002    <script type=”text/javascript” src    =”mootools-1.2-more.js”></script>
003    <script type=”text/javascript” src    =”excanvas.js”></script>
004    <script type=”text/javascript” src    =”canvastext.js”></script>
005    <script type=”text/javascript” src    =”moowheel.js”></script>
006    <script>//code to go in here    </script>

Just a few elements

In the <body> of our page we actually would only need one solitary element, a canvas <div> with a unique ID name. We add this, but also an <h1> tag we’re using to pass a simple string output to illustrate MooWheel’s event handler. Giving this an ID and some dummy text, we’ll then add basic CSS styling to colour and position our elements – black backgrounds work best with MooWheel’s default colours!

001    <style>
002    body {
003     
004    background-color:#000;
005    text-align:center;
006    }
007    #myCanvas {
008    margin: 0, auto;
009    }
010    #label {
011    color:#FFF;
012    background:#333333;
013    font-size:72px;
014    }
015    </style>
016    </head>
017    <body>
018    <div id=”myCanvas”></div>
019    <h1 id=”label”>Click a node...</h1>

Define the data

In our <script> tag from Step 2 we added a ‘window.onload()’ handler and a function containing our data and the drawing call. MooWheel allows you to load data from a PHP source but here we’ll populate a local variable we pass into the library function. Each node requires an ID, the text used for the node’s label in the wheel and the connections. These should be bi-directional and you simply list the desired item IDs as we have done so in the following code:

001    <script>
002    window.onload = function() {
003    var myData = [{
004        id: ‘poll’, text: ‘Jackson Pollock’,
005        connections: [‘lee’, ‘abs’]},
006    {
007        
008        id: ‘jas’, text: ‘Jasper Johns’,
009        connections: [‘pop’, ‘neo’, ‘abs’]
010    },
011    …
012    {
013        
014        id: ‘neo’, text: ‘Neo-Dada’,
015        connections: [‘rob’, ‘jas’, ‘abs’]
016    },
017    ];

Spin the wheel

We conclude our <script> and ‘window.onload’ function by creating a new instance of the MooWheel object. This gets passed to the data array, the <div> element ID as well as a brace of library options. Here you are able to alter exactly how the element is rendered or behaves – but crucially we have added the ‘onItemClick’ handler to output the selected node text to our <h1> using innerHTML:

001    var myWheel = new MooWheel(myData,$(‘myCanvas’), {onItemClick: function(item, event){
002    document.getElementById(“label”).innerHTML=item.text;
003    }});
004    };
005    </script>

We have connections!

Save the page and preview in your favoured browser. You should see the data wheel drawn with the nodes and links as defined. As you hover, the link lines should highlight, while clicking changes the <h1> label to the corresponding node text. From here you can experiment on styling and triggering further interactions, with full documentation available at
labs.unwieldy.net/moowheel.

×