By
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.
