Data Visualization – Analyzing Bivariate Data with Treemap Charts
A Treemap chart is an alternative way of visualising data. This chart type characterizes a tree-like structure, where the tree branches are represented by nested rectangles. There are many advantages of using a Treemap. The most important advantage is the ability to assist in performing bivariate data analysis – the analysis of the correlation between two set of variables. A Treemap does this by proportionately sizing each rectangle according to one variable’s value and simultaneously reflecting the other variable’s value through the rectangle color.
When you present information in charts and graphs, it is easier to understand and interpret the data. Subsequently, this makes the business reporting process easier and more meaningful to your audience.
Treemap chart use cases
Let's consider that a regulating agency needs to perform analysis on worldwide gas emission. Primarily, there would be two parameters in this example – the amount of gas emitted by a country and percentage change in gas emitted in a specified year.
A Treemap would be an ideal chart to visualize this data. The below image would represent the CO2 emission by a region or country: 
Here, each rectangle in a Treemap represents two values for a given year:
- Area representing the amount of CO2 emitted by a country
- Color illustrating the percentage change in CO2 emission from any standard year
To show a clear distinction between countries emission values, countries with increased in percentage changes are painted in red. This reflects deteriorating atmospheric conditions. Countries with a decrease in percentage change are painted in green. This reflects improving conditions. The color intensities indicate an increase or decrease in emission values.
In this blog, we’ll demonstrate how you can present hierarchical data visually, within TreeMap charts. This can be accomplished using the TreeMap’s NodeRendering event.
We’ll be dividing the complete implementation in the following parts:
- Sizing nodes with varying values
- Coloring nodes with discrete colors
- Coloring nodes with gradient colors
1. Sizing nodes with variable value
With a Treemap, to represent nodes in form of rectangles and to relatively size them, all that needs to be done is set few properties like Binding and BindingName.
To show how effortlessly you can use Treemap to visualize complex data, we will be displaying data for ‘Greenhouse gas emission’ from the WorldBank. The countries taken for consideration are those whose data is available for each year since 1990, with 1990 being the reference year for comparisons.
To reflect this data in Treemap chart, we need to have a blueprint of the data that we can bind our chart to. We will create following few classes for this:
public class Country
{
public string CountryName { get; set; }
public string CountryCode { get; set; }
public double ChangeInValue { get; set; }
public double ActualValue { get; set; }
}
public class Region
{
public string RegionName { get; set; }
public
ObservableCollection<Country> CountryList { get;
set;
}
Once we have created the blueprint of our data, we can now start binding TreeMap as shown below.
<c1:C1TreeMap x:Name="chartTreeMap" MaxDepth="2"
Binding="EmissionValue" BindingName="Name,Name" ChildItemsPath="CountryList"
ToolTipContent="C02 Emissions: {EmissionValue:n2} kT % Change from 1990:
{ChangeInValue:n3}% " >
The following image shows data loaded in the chart after completion of this step:
Here, we have a Treemap that has been grouped by region, where each country node reflects its CO2 emission amount. It marks the completion of the first part required for the bivariate analysis. In the next sections, we'll cover the remaining parts which involves coloring the country nodes with different colors to depict their performance over the years.
2. Coloring nodes with discrete colors:
We'll be using colors green and red to represent whether the CO2 emissions of a country have increased or decreased since 1990. For this example, we'll use the TreeMap's NodeRendering event.
This event allows us to color the nodes using the RenderingEngine's SetFill method exposed by the RenderNodeEventArgs class as shown below:
private void chartTreeMap_NodeRendering(object sender,
C1.WPF.Chart.RenderNodeEventArgs e)
{
if (!e.IsTitle)
{
var country = e.Item as Country;
var value = country.ChangeInValue;
var brsh = new SolidColorBrush();
if (value > 0)
{
brsh.Color = Colors.Red;
}
else if (value < 0)
{
brsh.Color = Colors.Green;
}
else
{
brsh.Color = Colors.YellowGreen;
}
e.Engine.SetFill(brsh);
}
else
e.Engine.SetFill(Brushes.LightSteelBlue);
}
Notice how we have used the IsTitle property in the code above to color the title nodes with a distinct color LightSteelBlue.
The countries are now painted in red and green depending on whether their Greenhouse gas emission has increased or decreased since the reference year 1900.
Notice in the above image, while the countries are painted in red and green, we cannot distinguish which country performed relatively better or worse over the years in curbing the greenhouse gases emitted. Like comparing United States and Canada, it can only be said that they both have increased emissions over the years. However, the magnitude of this increase cannot be judged by viewing the chart currently. In the next section, we’ll see how this detailed comparison can be made.
3. Improving data visualization with coloring nodes with gradients
So far, we used the same shades of green and red to represent a country's performance in controlling the CO2 emissions over the years. Now, going a step further in the analysis. We'll use different shades of green and red for a detailed comparison of a country's performance relative to others. To calculate the desired shade for a node, we can normalize its percentage change in emission. Based on this, we interpolate the color.
Since we wish to represent all countries with a %change > 0 with shade of Red and all countries with %change <0 with shade of Green, we need to split the values into two ranges: [Min %change, 0] and [0, Max %change]. After defining the start and end colors for a range, we'll start from 0 and interpolate the ARGB values gradually moving towards the end point of the range.
The following is the complete code for this:
private Color InterpolateColor(double value)
{
Color start, end;
if (value <= 0)
{
start = Colors.YellowGreen;
end = Colors.Green;
value = Normalize(-value, 0,-_minValue, 0, 1);
}
else
{
start = Colors.LightGoldenrodYellow;
end = Colors.Red;
value = Normalize(value, 0, _maxValue, 0, 1);
}
double red, green, blue, alpha;
red = Clamp(start.R + (end.R - start.R) * value);
green = Clamp(start.G + (end.G - start.G) * value);
blue = Clamp(start.B + (end.B - start.B) * value);
alpha = Clamp(start.A + (end.A - start.A) * value);
return Color.FromArgb((byte)alpha, (byte)red, (byte)green, (byte)blue);
}
Once we have completed interpolating the color, we can paint the rectangle, as done in part 2.
private void chartTreeMap_NodeRendering(object sender,
C1.WPF.Chart.RenderNodeEventArgs e)
{
if (!e.IsTitle)
{
var country = e.Item as Country;
var value = country.ChangeInValue;
var brush = new SolidColorBrush(InterpolateColor(value));
e.Engine.SetFill(brush);
}
else
e.Engine.SetFill(Brushes.LightSteelBlue);
}
Download the demo: WinForms | WPF
Happy plotting and analyzing using FlexChart!
Ruchir Agarwal