isualization is all about taking data and turning it into useful information. The technique is glaringly useful and widely used. Consider the following situation: you want to display the profiles of the population of a country, divided by age.

This type of presentation requires more thinking to get a grip on the data than it should. This is the kind of processing that the computer should be doing for you. For instance, the computer could make this easier on the end user by changing the raw figures into percentages.

The percentages tell a better story. But understanding could be enhanced even further if it the data were drawn as a pie-chart, as in Figure 1.

	Figure 1: This pie chart represents the data even more accessibly.

From the size of the slices on the pie, end users can more easily interpret the data and turn it into useful information.

But what happens when you’ve got a lot of data to visualize? Bar charts and scatter charts, while useful, are limited in the number of data points that they can render.

Making the Case for Advanced Visualization
What would happen if you wanted to view data from every country in the world, broken down in the same way? Would you have a page showing hundreds of pie charts? How would these pie charts relate to each other?

These are the problems that the treemap visualization has been designed to solve. The treemap allows you to render a complex, hierarchical dataset in a relational view. It is capable of plotting many data points and keeping it visually consistent. An example of a treemap in commercial use is SmartMoney.com’s Market Map, which takes the instruments that are in the S&P 500 index of stocks and creates a treemap.

On this treemap, the market is divided into sectors. Each sector has a number of stocks. The area of the sector is divided up into a number of rectangles with the size of the rectangle being directly proportional to the market cap of the company (the market cap is the number of shares available times the price of a share). The color of the rectangle shows the current change in price. Hovering over a rectangle shows more detail on the company in question.

As you can see, a vast amount of information is presented to the user:

• Company placement by sector
• Market cap of every company in the index
• Current status of the stock (up/down) every company
• Overall view of the market today
• Overall view of every sector today

This is an incredibly useful tool. On any given day, you can easily see which sectors and companies are doing well, and which are doing badly.

In this article, you’ll use a similar visualization technique to build an application that renders whatever data you like.

The .NET Treemap Control
The Microsoft research site has an ongoing project called Netscan, which takes all the news stories in USENET and measures the groups in which they reside for size and frequency. A treemap visualization renders this information. They have made the control that they use available for download. You may download it from here.

To install the Treemap control, simply unzip the downloaded file. The file contains two DLL files?treemapcontrol.dll which contains the control and treemapgenerator.dll, a support library for the control. There’s a also a help file.

Please note that this control is licensed by Microsoft for non-commercial research, academic, or learning purposes only.

First, build a simple C# application using the treemap control. Later, you will build an application that maps data from a SQL Server database.

Build Your First Treemap Application
Start Microsoft Visual Studio.NET and start a new Windows Application called Treemap. For the purposes of this article you’ll be using C#, but you could easily change to your language of choice, say VB.NET or J#.

Select the General tab on the toolbox, right click and select Add/Remove Items. On the Customize Toolbox dialog that results, click “Browse…” and browse to the Treemapcontrol.dll file on your file system.

The TreemapControl is added to your toolbox, and references to TreemapControl and TreemapGenerator are added to the References section on your Solution Explorer.

Now, draw an instance of the control on the default form (Form1.cs) and call it tmc1. Add a button to the form.

To building the nodes for a treemap control, cut and paste the code below onto the code behind your form:

Void BuildTreemap(TreemapControl tmcMap){Nodes oNodes, oChildNodes, oGrandChildNodes;	Node oNode, oChildNode, oGrandChildNode;	oNodes = tmcMap.Nodes;            	// Add a top-level node to the collection. 	oNode = oNodes.Add("Europe", 25F, 100F);            	// Add child nodes to this node.	oChildNodes = oNode.Nodes;	oChildNode = oChildNodes.Add("England", 50F, 2.5F);	oChildNode = oChildNodes.Add("Ireland", 50F, -34.5F);            	// Add another top-level node. 	oNode = oNodes.Add("Americas", 50F, -40.1F);            	// Add child nodes to the this new node.	oChildNodes = oNode.Nodes;	oChildNode = oChildNodes.Add("Canada", 20F, 200F);      oChildNode = oChildNodes.Add("USA", 100F, 0F);				// Add a child node to one of the children	oGrandChildNodes = oChildNode.Nodes;	oGrandChildNode = oGrandChildNodes.Add("California", 60F, 0F);	oGrandChildNode = oGrandChildNodes.Add("Texas", 30F, 0F);	// Draw it	tmcMap.Draw();}

Make sure you are referencing the treemap by adding the following line at the top of your code listing.

using Microsoft.Research.CommunityTechnologies.Treemap;

Finally, call the treemap by placing the following line of code into the click event handler for the button.

	BuildTreemap(tmc1);

The entire application is available in the download. When you run this application, you should see the output shown in Figure 2.

	Figure 2: Here's the sample Treemap application.

Building a treemap is very straightforward, and very similar to building a treeview, in that everything is a node, and every node has a number of children. In the above example, 'Americas' is a top level node, containing two child nodes 'Canada' and 'USA.' The 'USA' node itself contains two children 'California' and 'Texas.' The parameters to the Node.Add method are, respectively, the text describing the node, the size of the node, and the color of the node. The size of the node is purely arbritrary, and the control calculates the render size for the node based on this size and the total of all sizes at that level in the node tree. In the above example, 'California' is given a value of 60F and 'Texas' a value of 30F. Looking at the output, you can see that 'California' occupies two thirds of the real estate allocated by the control to the 'USA' node.

Since this way of building a tree is very code intensive, I used it only for demonstration purposes. The treemap control, however, has a neat function, which is the ability to load the nodes definitions from an XML file. Next, you'll use this capability as you build a treemap control to consume a Web service that exposes the contents of a database as a treemap control.

Variations on the Theme
The Microsoft Treemap control requires your XML to be formatted in a particular way in order to successfully parse and render the data. An example of this XML is seen in the following code:

The control also has a property NodesXML which, when set with a string containing valid XML, sets up the internal data structures for the treemap. Build your treemap in this way by using the following code:

XmlDocument xmlDoc = new XmlDocument();	xmlDoc.Load("c:\treemap.xml");	tmcMap.NodesXml = xmlDoc.InnerXml;	tmcMap.Draw();

You can also build a treemap from the output of a Web service. It's very simple to do in Visual Studio.NET. Simply have your Web method return XML in the above format as type XMLDocument. This XML can then be passed to the NodesXML property like in the XML example above.

Visualization Equals Data Simplification
This method is an incredibly useful way of looking at data. It allows for a much better overview of complex data than you get with traditional visualizations. The Microsoft Research treemap control provides an easy way to implement this technology. Use the basics you have gleaned here to explore the next level and add value to your data applications.