Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Make Your .NET Data More Useful with Treemap Visualization : Page 2

Using visualizations such as pie charts and bar graphs to present data is nothing new. But what happens when you've got more data points than a pie chart can render? Enter the treemap! Use the .NET Treemap Control to create your own Treemap Application and render any data you like.




Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js

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.


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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date