JavaScript InfoVis Toolkit - Tutorial

This tutorial covers the basics about creating a RGraph visualization. If you want to know more about this visualization I’d recommend you to visit the documentation for the input JSON data, the Canvas Widget, and the RGraph, where you can find detailed information about its configuration options and controller methods.

Hi, this is going to be a quick tutorial on how to set the RGraph up and running.

We are going to work with this tree JSON structure:

var json = {
    "id": "node02",
    "name": "0.2",
    "data": {},
    "children": [{
        "id": "node13",
        "name": "1.3",
        "data": {},
        "children": [{
            "id": "node24",
            "name": "2.4",
            "data": {},
            "children": []
        }, {
            "id": "node25",
            "name": "2.5",
            "data": {},
            "children": []
        }, {
            "id": "node26",
            "name": "2.6",
            "data": {},
            "children": []
        }, {
            "id": "node27",
            "name": "2.7",
            "data": {},
            "children": []
        }, {
            "id": "node28",
            "name": "2.8",
            "data": {},
            "children": []
        }, {
            "id": "node29",
            "name": "2.9",
            "data": {},
            "children": []
        }, {
            "id": "node210",
            "name": "2.10",
            "data": {},
            "children": []
        }, {
            "id": "node211",
            "name": "2.11",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node112",
        "name": "1.12",
        "data": {},
        "children": [{
            "id": "node213",
            "name": "2.13",
            "data": {},
            "children": []
        }, {
            "id": "node214",
            "name": "2.14",
            "data": {},
            "children": []
        }, {
            "id": "node215",
            "name": "2.15",
            "data": {},
            "children": []
        }, {
            "id": "node216",
            "name": "2.16",
            "data": {},
            "children": []
        }, {
            "id": "node217",
            "name": "2.17",
            "data": {},
            "children": []
        }, {
            "id": "node218",
            "name": "2.18",
            "data": {},
            "children": []
        }, {
            "id": "node219",
            "name": "2.19",
            "data": {},
            "children": []
        }, {
            "id": "node220",
            "name": "2.20",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node121",
        "name": "1.21",
        "data": {},
        "children": [{
            "id": "node222",
            "name": "2.22",
            "data": {},
            "children": []
        }, {
            "id": "node223",
            "name": "2.23",
            "data": {},
            "children": []
        }, {
            "id": "node224",
            "name": "2.24",
            "data": {},
            "children": []
        }, {
            "id": "node225",
            "name": "2.25",
            "data": {},
            "children": []
        }, {
            "id": "node226",
            "name": "2.26",
            "data": {},
            "children": []
        }, {
            "id": "node227",
            "name": "2.27",
            "data": {},
            "children": []
        }, {
            "id": "node228",
            "name": "2.28",
            "data": {},
            "children": []
        }, {
            "id": "node229",
            "name": "2.29",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node130",
        "name": "1.30",
        "data": {},
        "children": [{
            "id": "node231",
            "name": "2.31",
            "data": {},
            "children": []
        }, {
            "id": "node232",
            "name": "2.32",
            "data": {},
            "children": []
        }, {
            "id": "node233",
            "name": "2.33",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node134",
        "name": "1.34",
        "data": {},
        "children": [{
            "id": "node235",
            "name": "2.35",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node136",
        "name": "1.36",
        "data": {},
        "children": [{
            "id": "node237",
            "name": "2.37",
            "data": {},
            "children": []
        }, {
            "id": "node238",
            "name": "2.38",
            "data": {},
            "children": []
        }, {
            "id": "node239",
            "name": "2.39",
            "data": {},
            "children": []
        }, {
            "id": "node240",
            "name": "2.40",
            "data": {},
            "children": []
        }]
    }, {
        "id": "node141",
        "name": "1.41",
        "data": {},
        "children": [{
            "id": "node242",
            "name": "2.42",
            "data": {},
            "children": []
        }, {
            "id": "node243",
            "name": "2.43",
            "data": {},
            "children": []
        }, {
            "id": "node244",
            "name": "2.44",
            "data": {},
            "children": []
        }, {
            "id": "node245",
            "name": "2.45",
            "data": {},
            "children": []
        }]
    }]
};

We’ll create three files: an example.html file, an example.css file and an example.js file.

I’ll put these files in the root library folder (i.e “Jit”), so I can access all libraries.

Put this HTML in your example.html page:

<html>
  <head>

    <link type="text/css" rel="stylesheet" href="example.css" />

<!--[if IE]>

<script type="text/javascript" src="Extras/excanvas.js"></script>
<![endif]-->

    <script type="text/javascript" src="jit.js" ></script>
    <script type="text/javascript" src="example.js" ></script>
  </head>

  <body onload="init();">
    <div id="infovis"></div>
  </body>
</html>

Now, put this code in your example.css file:

html,body {
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;padding:0;
    background-color:#333;
    text-align:center;
}
/* style for the visualization container */
#infovis {
    width:900px;
    height:500px;
    background-color:#222;
}
/* style for node labels */
.node {
    color: white;
    background-color:transparent;
    cursor:pointer;
    font-weight:bold;
    opacity:0.9;
    border:1px solid red;
}

.node:hover {
    cursor:pointer;
    color: #222;
    background-color:white;
    font-weight:bold;
    opacity:1;
}

Finally, create an example.js file and put this code in it:

function init() {
  var json= //data defined previously

  //Create a new canvas instance.
  var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
    //width and height for canvas. Default's to 200.
    'width': 900,
    'height':500
 });

  var rgraph= new RGraph(canvas,  {
    //interpolation type, can be linear or polar
    interpolation: 'linear',
    //parent-children distance
    levelDistance: 100,
    //Set node/edge styles
    Node: {
      color: '#ccddee'
    },
    Edge: {
      color: '#772277'
    },
    //Add a controller to make the tree move on click.
    onCreateLabel: function(domElement, node) {
      domElement.onclick = function() {
        rgraph.onClick(node.id);
      };
    }
   });

    //load tree from tree data.
    rgraph.loadJSON(json);
    //compute positions and plot
    rgraph.refresh();
}

You should see a RGraph up and running. Click on the labels and the tree should move.

Some notes:

If you want to know more about how the Canvas class is implemented and what other canvas customizations can be done please check this documentation entry.
To know more about what canvas styles can be configured please check the mozilla canvas tutorial.

Customizing the RGraph

Let’s add some labels!

First, strip off the border: 1px solid red; line from the .node class in your CSS file.

It should look like this:

.node {
    color: white;
    background-color:transparent;
    cursor:pointer;
    font-weight:bold;
    opacity:0.9;
}

Now we are going to add a javascript controller in order to put the name of the nodes into the labels. Since we only need to do this once, we’ll use the onCreateLabel method.

So the JavaScript file should look like this now:

function init() {
  var json= //data defined previously

  //Create a new canvas instance.
  var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
    //width and height for canvas. Default's to 200.
    'width': 900,
    'height':500
 });

  var rgraph= new RGraph(canvas,  {
    //interpolation type, can be linear or polar
    interpolation: 'linear',
    //parent-children distance
    levelDistance: 100,
    //Set node/edge styles
    Node: {
      color: '#ccddee'
    },
    Edge: {
      color: '#772277'
    },
    //Add a controller to make the tree move on click.
    onCreateLabel: function(domElement, node) {
      domElement.innerHTML = node.name;
      domElement.onclick = function() {
         rgraph.onClick(node.id);
      };
    }
   });

    //load tree from tree data.
    rgraph.loadJSON(json);
    //compute positions and plot
    rgraph.refresh();
}

You should see some labels now.

The thing is that… well, they are not centered. So we’ll just add an onPlaceLabel method to the controller in order to do that, since the onPlaceLabel method is called after labels have been placed.

So the js code should now look like:

function init() {
  var json= //data defined previously

  //Create a new canvas instance.
  var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
    //width and height for canvas. Default's to 200.
    'width': 900,
    'height':500
 });

  var rgraph= new RGraph(canvas,  {
    //interpolation type, can be linear or polar
    interpolation: 'linear',
    //parent-children distance
    levelDistance: 100,
    //Set node/edge styles
    Node: {
      color: '#ccddee'
    },
    Edge: {
      color: '#772277'
    },

  //Take off previous width and height styles and
  //add half of the *actual* label width to the left position.
  // That will center your label (do the math man).
    onPlaceLabel: function(domElement, node) {
      domElement.innerHTML = node.name;
      var left = parseInt(domElement.style.left);
      domElement.style.width = '';
      domElement.style.height = '';
      var w = domElement.offsetWidth;
      domElement.style.left = (left - w /2) + 'px';
    },

    //Add a controller to make the tree move on click.
    onCreateLabel: function(domElement, node) {
      domElement.innerHTML = node.name;
      domElement.onclick = function() {
         rgraph.onClick(node.id);
      };
    }
   });

    //load tree from tree data.
    rgraph.loadJSON(json);
    //compute positions and plot
    rgraph.refresh();
}

You should see some centered labels now!

Labels already have the onclick event handler to move the graph. You set that onCreateLabel.

There are a lot more configuration options and controller methods to explore. Check out the examples code packaged with the library and the API documentation for the RGraph.

Hope it was helpful.

Quick Tutorial - RGraph

Some notes:

Customizing the RGraph