Treemaps can be used to visualize and find patterns in pretty much any kind of heavy data sets. An example of this is the demo running on ILOG Elixir web site that visualizes various figures about the Forbes Global 2000 companies.

If you think of the data you manipulate every day, you can also pretty easily find big data sets that would benefit from treemap visualization. One obvious example being the bug base of your project. You typically want to quickly find which are the most critical bugs or alternatively the most popular ones.

ILOG Elixir Treemap is a good candidate for visualizing such data. Indeed it provides a pretty flexible treemap with still good performances when visualizing large data sets. And running in the AIR or Flex environment it gives you the ability to easily connect to your bug base web service to get the data your are interested in.

This is particularly easy if your bug base is hosted by a Jira instance. Indeed Jira provides RSS feeds with issues that can be easily interpreted by a Flex client.

In this post I will describe the starting point for an AIR application that connects to a Jira instance RSS feed and display the result as an ILOG Elixir Treemap. It can easily be enriched to grow and become a more realistic AIR application. I’ll try to come up with following-up posts that will show how to enrich the application, watch the RSS feed ;).

Obviously the first thing to do is to create an AIR application either in Flex Builder or your favorite IDE. Once this is done you basically have 3 components to add to the application.

Two non visual components which are the mx:GroupingCollection object that allows us to group feed result depending on a given criteria and the mx:HTTPService object which connects to the Jira RSS data feed and provides us with the result. Finally the ilog:TreeMap graphical component that visualizes the data from the feed.

The GroupingCollection is defined as follows:

  <mx:GroupingCollection id="data"
    source="{feed.lastResult.rss.channel.item}">
    <mx:Grouping label="assignee">
      <mx:GroupingField name="assignee"/>
    </mx:Grouping>
  </mx:GroupingCollection>

That means that we want the result of the feed to be grouped by assignee. Doing this the treemap will not display flat data (which would be possible tough), but hierarchical data grouped by the name of the bug assignee. You can of course choose another grouping criteria as the reporter or even create more hierarchy by providing several grouping criteria (by project, then assignee for example).

For the HTTPService, in the scripting section of your application you must declare a constant holding the URL you want to connect to:

    private static const URL_ADOBE:String =
      "http://bugs.adobe.com/jira/sr/jira.issueviews:searchrequest-xml/" +
      "temp/SearchRequest.xml?type=1&resolution=-1&status=1" +
      "&sorter/field=issuekey&sorter/order=DESC&tempMax=1000";

In that case this is the RSS feed showing all the non resolved from Adobe public bug base. However you can use here any Jira RSS feed URL such as the one from ILOG Elixir public bug base.

In the content of your application use the HTTPService to connect to that URL:

  <mx:HTTPService id="feed" url="{URL_ADOBE }"
    showBusyCursor="true" fault="Alert.show('RSS query failed');"
    result="data.refresh()" />

You can see that when the result is received from the server, the refresh method of the GroupingCollection is called such that the grouping is performed.

Finally you can just set the GroupingCollection as your TreeMap dataProvider:

  <ilog:TreeMap width="100%" height="100%" id="treemap"
    dataProvider="{data}"
    colorScheme="none" colorFunction="{colorFunction}"
    areaFunction="{areaFunction}"
    labelField="assignee"
    creationComplete="feed.send()"
    itemClick="navigateToURL(new URLRequest(event.item.link))"
    labelThreshold="1" borderThickness="1"
    topMarginProportion="0.4" maxTopMargin="20"
    leftMarginProportion="0"
    rightMarginProportion="0"
    bottomMarginProportion="0">
  </ilog:TreeMap>

In addition to the dataProvider other attributes are set on the TreeMap. The most noticeable ones are:

• The colorScheme, setting it to "none" tells to the TreeMap it should not apply a predefined coloring algorithm but let each cell to be colored using the color returned by the colorFunction defined just after. In our case the color function is determining the color depending on the priority (severity) of the bug. Very critical bugs will have an intense red color making sure that you see them quickly when visualizing your bug base:

      private const COLORS:Array = [
        0xff0000,
        0xcc0000,
        0xaa0000,
        0x00aa00,
        0x00cc00,
        0xffffff, // unused
        0x00ff00, // none
        0xeeeeee, // unset
      ];
  
      private function colorFunction(item:Object):uint {
        if (item.priority) {
          return COLORS[item.priority.id - 1];
        } else if (item.type) {
          return COLORS[7];
        } else // grouping element
          return 0xffffff;
      }

• The areaFunction will be used to return the number that will be used to compute the area of each TreeMap cell. In our case we want the cell to be size according to the number of votes for a give bug. Issues with a lot of votes will appear bigger than unpopular issues. For that we just return the number of votes + 1 (to avoid having zero size cells) in the function:

      private function areaFunction(item:Object):Number {
        return parseInt(item.votes) + 1;
     }

• The labelField attribute is defining which field in the feed must be used to display the label of the cells. In this case we want the assignee field to be used so that the treemap display the name of the bug’s assignee.
• The creationComplete listener is making sure that once the TreeMap has been created the Jira feed is queried by the HTTPService.
• The itemClick listener is making sure that when you click on a treemap cell, it navigates using your Web browser to the URL of the Jira issue available in the Jira RSS feed in the link attribute.

You can see that leveraging ILOG Elixir and Adobe Flex we were able to pretty quickly connect to a Jira instance and visual in a new way your bug base allowing you to have a global picture of the product status while at the same time being able to pick the most critical bugs and the most popular (most votes) ones.

Mixing the Flex GroupingCollection class features and the TreeMap area and color configuration you can imagine to enhance that
application to allow one to choose its grouping, coloring and area computation criteria using combo boxes, or wait for a future follow-up post…

You can download the Flex Builder project of the application as a .zip file here. To run this you also need to download and install ILOG Elixir 1.0 at http://elixir.ilog.com. For those who are just wondering how a treemap looks like, here is a screenshot showing the AIR application connected to the Adobe public bug base showing high priority bugs in red and popular bugs with bigger cells:

Tags: air, ILOG Elixir, jira, rss, Treemap

Posted by Christophe Jolif in AIR, ILOG Elixir, Treemap. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.