Tutorial: Using the Bubble Tree for Display of Random Data

Recently I finished the work on the interactive Bubble Tree for the OpenSpending project. This tutorial demonstrates how to use the visualization for display of your own data. Here’s the link to the resulting visualization.

Setting up the page

You need to checkout the Github repository or download the source files to go through this tutorial yourself. At first we’re going to create the container HTML page.

<html>
<head>
	<meta charset="UTF-8"/>
	<title>Minimal BubbleTree Demo</title>
	<script type="text/javascript" src="bubbletree/lib/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="bubbletree/lib/jquery.history.js"></script>
	<script type="text/javascript" src="bubbletree/lib/raphael.js"></script>
	<script type="text/javascript" src="bubbletree/lib/vis4.js"></script>
	<script type="text/javascript" src="bubbletree/lib/Tween.js"></script>
	<script type="text/javascript" src="bubbletree/build/bubbletree.js"></script>
	<link rel="stylesheet" type="text/css" href="bubbletree/build/bubbletree.css" />	
	<script type="text/javascript">
 
		$(function() {
			new BubbleTree({
				data: data,
				container: '.bubbletree'
			});
		});
</script></head>
<body>
	<div class="bubbletree-wrapper">
		<div class="bubbletree"></div>
	</div>
</body>
</html>

 

Now the BubbleTree would load and try to display what’s inside the data, which we will build in the next step.

Building the random data

The next thing we do is to prepare a random data set. The BubbleTree uses a very simple nested tree structure. The nodes must follow the following format:

var data = {
	label: "I am a node",
	amount: 123456789
}

We could now run the visualization and would get the following result:

We can insert child nodes by putting them into the children Array:

var data = {
	label: "I am a node",
	amount: 1000000,
	children: [{
		label: "I am the 1st child",
		amount: 400000
	}, {
		label: "I am the 2nd child",
		amount: 600000
	}]
}

Instead of inserting all the children by hand, we will use a function to generate a random set of children for a given node.

function generateChildren(node) {
	var numChildren = 8;
	node.children = [];
	var amount = node.amount;
	for (var i=0; i<numchildren ; i++) {
		var child = { 
			label: 'Child #'+(i+1), 
			amount: i+1 < numChildren ? 
				amount*Math.random()*.6 : amount
		};
		amount -= child.amount;
		node.children.push(child);
	}
}
 
var data = {
	label: "I am a node",
	amount: 1000000,
};
 
generateChildren(data);

Et voila, the result looks like this:

Adding some color to the nodes

This is the perfect time to setup some styling for the nodes. I will use my little helper library vis4color to generate nice random HSL colors.

child.color = vis4color.fromHSL(i/numChildren*360, .7, .5).x;
}

Generating children of children of children

The last thing to do is to call our generateChildren recursively for each child node we generate. To know when to stop the recursion, we will also pass a new parameter level to the function.

For a little extra fun, I added an Array randomNames which contains a set of randomly chosen forenames. I will use this array to add random labels to the nodes.

var randomNames = ['Burgis', 'Pascal', 'Lysann', 'Theo', ...];
 
function generateChildren(node, level) {
	if (!level) level = 1;
	var numChildren = 8;
	node.children = [];
	var amount = node.amount;
	for (var i=0; i<numchildren ; i++) {
		var child = { 
			label: randomNames[Number(String(level-1)+String(i))], 
			amount: i+1 < numChildren ? 
				amount*Math.random()*.6 : amount
		};
		if (level == 1) {
			// random color for level 1 children
			child.color = vis4color.fromHSL(i/numChildren*360, .7, .5).x;
		}
		if (level == 2) {
			// children of level 2 will get a similar color of their parent
			child.color = vis4color.fromHex(node.color)
				.lightness('*'+(.5+Math.random()*.5)).x;
		}
		amount -= child.amount;
		node.children.push(child);
		if (level < 4) generateChildren(child, level+1);
	}
}

 

Here is our final output. Click on the image to get to the interactive demo. You will find all the source files inside the demos/random/ folder in the Github repository.