In this recipe we are going to build a treemap. Treemaps are used to represent the data structure of a tree (nodes that have nodes as children). In this example, we are going to use it more as a rectangular pie chart. Wherever you can use a pie chart, you will be able to use this treemap, but it will give you the ability to use something a bit different.
Open the files in the Treemap folder in the downloadable code files from www.packtpub.com.
- Let's start by creating the data structure that is
TreemapData.as:public var color : uint; public var percent : Number; public var label:String; public function TreemapData(newPercent:Number, newColor:uint, newLabel:String) { percent = newPercent; color = newColor; label = newLabel; } - From there we can jump to
Treemap.as. We will need to inversely sort the data as our first step. To do so we will create a sorting function and pass it to thesortfunction ofArray. The following is what the sorting function looks like:private function _sortData(a:TreemapData, b:TreemapData):int { if (a.percent > b.percent) { return -1; } else if (a.percent < b.percent) { return 1; } else { return 0; } } - Once our data is sorted we will draw a rectangle for each of our objects in the data.
matrix.createGradientBox(currentWidth, dataHeight,Math.PI / 2,currentPoint.x, currentPoint.y); graphics.beginGradientFill(GradientType.LINEAR, [data[i].color, data[i].color], [1, 0.3], [0, 255], matrix); graphics.drawRect(currentPoint.x, currentPoint.y, currentWidth, dataHeight);
- After that we update our values so that our next rectangle can be drawn in the right place.
- The file
Main.asgenerates the data and instantiates an instance of theTreemapclass.
By using the treemap chart as a pie chart, we follow this principle: the first rectangle will be the size of its percent times the total area. It will take the full width of the graph and as much height as needed to be of the correct size.
The second rectangle will start after the previous rectangle (y equal to the height of the previous rectangle), and will take the full height of the remaining space and as much width as needed to be of the correct size.
We repeat those principles by dividing the remaining space first in width and afterwards in height. We do so until we have no more sections in our data. For this graph to look good, it is important that it adds up to 1.
Until now the code was pretty easy. It's just drawing rectangles, but we also added a little stylistic element. Instead of using a simple fill for our rectangles, we went with a gradient fill. Using gradient fills is a bit more complex because you need to use the createGradientBox function of the Matrix class. But all this function does is define the bounding area, the rotation, and the starting point of the gradient. Note that we are creating a gradient over the alpha of the color for each section of the graph, so it would work for any color.
Until now in the book, mostly every recipe has been using vectors to store the data, but this recipe uses an array. We did so because a vector is a much more rigid (but it is faster in general) structure than an array so it doesn't have a sort functionality which we need in this case.
You will need a strategy to show small values and also there is another way you can use a treemap to represent the tree data structure.
You have to use the right chart for the right data, so using the treemap when you have many fields, with very small percentages, it might not be the best. But if you really want to use a treemap then you would need to improve on the labeling. By having labels that are outside the graph and point to their respective rectangles, you could have a way to convey information to the reader.
A tree is represented with nodes that can have children. In turn these children can have children. Each child represents a branch and a branch in a treemap is a rectangle. The root (the first node) is represented as the entire graph. We divide the graph into rectangles for each child the root bears. We repeat this process for every rectangle until we find a leaf (a node that doesn't have children). Recursion is a good way to code this.