TreeMap is used to represent a large hierarchical collection of quantitative data. The hierarchical structure is revealed by the nesting level and location of each rectangle and convenient drill-down capabilities are used to effectively navigate through the hierarchy. The area and color of each rectangle are used to represent any other quantitative properties.
TreeMap was designed to handle any type of data using an internal data parsing model which enables advanced interpretation of any input data via reconstruction options that can applied on CSV files and ICollectionView instances.
Like other Kap Lab components, TreeMap handles the following data input:
ICollectionView instances including XML, ArrayCollection;
Objects with children property or with a custom TreeDataDescriptor;
CSV files.
It is advised to visit the Components Data Input section of Kap Lab components to get more details about the data parsing properties and functions.
An ICollectionView is a view onto a collection of data. All Classes implementing the ICollectionView interface (XML, XMLListCollection, ArrayCollection) are handled in the same way by the component.
Creating hiearachy using your data input is done by setting the filterPath property.
In the following example, we use an XML file to display a large hierarchical collection of quantitative data.
In some cases, ICollectionView instances contains hidden information that need to be extracted and analyzed before being displayed. TreeMap do this for you by using an internal data parsing library. Users can choose to ignore root node to analyse the data content based on a filterPath and some reporting functions, See Common Data Input Section.
CSV Files are organized in rows and columns using a CSV delimiter. A data field has a row index and column index, generally described in a String format while it can represent a Date, a Number or other content. TreeMap handles CSV parsing, reconstruction and data content interpretation via a set of options. In this part we will show how TreeMap meets the needs for CSV content visualization.
Kap Lab TreeMap provides some extra optional properties to provide an advanced CSV data input parsing. These properties and methods are following:
filterPath : used to extract needed data from the CSV file;
csvDelimiter : used to indicate the delimiter of the CSV file (by default it is set to ";")
withHeaders : used to indicate if the first row should be considered as column headers (by default is set to true);
recordDelimiter : used to indicates the delimiter of a field (if it exists). It is generally used when data field content contains CSVDelimiter string as in such situations CSV parsing produces wrong results. By default, the recordDelimiter property is "" and can be modified when needed.
reportingFunction: used to transform the data fields arrays into a real data by applying standard or custom functions.
The following sample shows how can integrate TreeMap using the CSV data source.
CSV Integration Sample
CSV code
name;continent;region;population;area
Albania;Europe;Southern Europe;28750;3249136
Greece;Europe;Southern Europe;131940;2104035
Macedonia;Europe;Southern Europe;25333;2104035
Serbia and Montenegro;Europe;Western Europe;102350;10614558
Andorra;Europe;Southern Europe;450;72766
MXML code
?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:treemap="fr.kapit.components.treemap.*" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Embed(source="CSV.txt",mimeType="application/octet-stream")]
privatevar CSV:Class;
private function onCreationComplete():void
{
var byteArray:ByteArray = new CSV() as ByteArray;
var content:Object=byteArray.readUTFBytes(byteArray.length);
myTree.dataProvider = String(content);
}
]]>
</mx:Script>
<treemap:TreeMap id="myTree"
filterPath="{['continent', 'region', 'name']}"
csvDelimiter=";"
labelField="id"
areaField="are"
colorField="population"
width="100%"
height="100%"/>
</mx:Application>
Filter Path is the most important field when analyzing informations encapsulated and hidden inside any data. It indicates what we want to see and defines how links must be constructed. A Filter Path is an array containing a selection of Headers (for CSV) or Node attributes (for XML files) or Object properties (for objects with children or customTreeDataDescritor) in a given order that defines the linking policy.
When defining a Filter Path, the input data will be transformed into an internal data structure that can be manipulated and analysed.
When the property filterPath is used, the labelField property must have id as value: labelField="id"
Objects with children property or with customTreeDataDescriptor
In some applications, it can be interesting to display the content of internal data structures like in the case of administration or introspection application. TreeMap allows such functionality, as the developper should only give the reference to its object instance and a custom Tree Data Descriptor (via the treeDataDescriptor property) allowing custom navigation inside the object (only if it doesn't have the children property).
The options used for ICollectionView instances described previously can be applied to this data format.
One of the features of TreeMap is to diplsay discrete value for example to display elements by categories. Categories can be for examples A, B, C, D or category can be years if you want to display elements by year 2007, 2008, 2009.
Discrete String Values
To display a TreeMap with discrete values the colorField property should be a string. For example the name of a category in our example it is the name of the continents. colorField="continent"
In the case that one or more of these information is not explicitly available in the data, you can use the areaFunction, colorFunction, labelFunction and tooltipFunction properties to indicate to Treemap the function it has to use to generate the corresponding information. The following example shows how to use these properties :
In order to allow users to interact and to zoom on specific values on TreeMap to visualize data according to their needs, users can instantiate a TreeMapAreaFilter or TreeMapColorFilter.
TreeMapAreaFilter
In order to filter areas users have to use TreeMapAreaFilter. It is simple to use, the developer has to instatiate it to give it a width and a hight and to set the TreeMap property by passing to it the id of your TreeMap.
To make it more easy to read the value of colors on TreeMap the user can instantiate a TreeMapLegend.
The shape of the legend depends on values displayed by TreeMap (Discrete value or Continuous values).
The legend gives the user the possibility to filter values. In case of continuous values two sliders will be added to the legend and in case of discrete value the filter is done by clicking on color of the legend.
TreeMap dipatches events that can be captured by the developer to specify a custom behavior. These events ensure an easy deployment and interaction with the component.
The dispatched events are listed in the following table:
nodeClick : dispatched when a node is clicked
nodeRollOver : dispatched when the mouse is rolled over a node
nodeRollOut : dispatched when the mouse is rolled out of a node
Tools
