Browse DevX
Sign up for e-mail newsletters from DevX


Make Your .NET Data More Useful with Treemap Visualization

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

Age Group

Number of People









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.

Age Group

Percentage of Population









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.

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