Here is a screenshot from Google Analytics showing the main line chart of visitors:

When you rollover one of the points, you get a popup telling you the exact number of visitors on that date. This simple rollover, while cool, is not particularly useful to me. If I wanted to know exact numbers, I’d look at an Excel printout. Thankfully, we can use Axiis to provide something much better.

Column Stack Chart

I’ll use Axiis to show two different visualization options for the same data. I made some artificial visitor data per day. Here it is as a vanilla line chart I grabbed from Excel:

Not very exciting, but the classic weekend lulls make our dataset a little hard to follow. In XML, it looks like this:

<visitors>
    <week label="A">
        <day label="Sun" val="0.2" />
        <day label="Mon" val="1.6" />
        <day label="Tue" val="2.0" />
        <day label="Wed" val="2.4" />
        <day label="Thu" val="1.8" />
        <day label="Fri" val="1.6" />
        <day label="Sat" val="0.4" />
    </week>
    <week label="B">
        <day label="Sun" val="0.3" />
        <day label="Mon" val="1.2" />
        <day label="Tue" val="1.8" />
        ...
    </week>
    ...
</visitors>

Since the data per day is a little annoying, let’s try to smooth it out by collecting up the day data into weeks. This is easy to do in Axiis by using the ColumnStack layout. Recall that Layouts in Axiis specify how incoming data will be rendered to the display. Here’s an abbreviated snippet of code showing the relevant parts:

<axiis:DataCanvas id="dc" ...>
    <axiis:layouts>
        <axiis:HBoxLayout id="myLayout" ...>
 
            <axiis:layouts>
                <axiis:ColumnStack id="myStack" ...
                    dataProvider="{myLayout.currentDatum.day}"
                    dataField="val" />
            </axiis:layouts>
 
            <axiis:drawingGeometries ... />
        </axiis:HBoxLayout>
    </axiis:layouts>
</axiis:DataCanvas>

First, we use an HBoxLayout layout to render our weeks into columns (the dataProvider is the visitors.week array), and inside that we use a ColumnStack layout to render our days stacked one on top of another (the dataProvider is the current week’s day array).

Here is the result (view source enabled):

The column stack chart is nice because it enables us to distinguish the macro trend over the weeks, traffic is obviously dying off from week A to week H. But it does a poor job illuminating intra-week data. For example, it’s hard to tell how Monday of week A compares to Monday of week B.

Interactive Column-in-Column Chart

Another option to visualize our simulated visitor data is empower the user. Start with a super simple column chart of the aggregated week data, and allow the user to drill down into the day data via some interaction. The implementation I’ve chosen below uses an inset column chart to show the day data when the user mouses over a week column.

In order to display week data, we first need to pre-process our day data to aggregate it into weeks. Axiis makes this trivial with DataSet:

var ds:DataSet = new DataSet();
ds.processXmlString(myXML.toXMLString());
ds.aggregateData(ds.data.object.visitors, "week.day", ["val"]);

The aggregateDate() method walks our XML hierarchy and rolls up aggregates of day.val at every level. When processing is complete, visitors has a new aggregates object that contains day_val_sum (and min, max, and average) for all the days in the entire data set. And one level down, week also has a new aggregates object that contains day_val_sum for just the days in that week.

Next, we construct our visualization using a pair of DataCanvas objects and a pair of BaseLayout layouts, one for the main column chart showing aggregated week data, and the other for an inset column chart showing just the current week’s day data. Here I’m using the same column-chart-the-long-way code as I used last post.

<axiis:DataCanvas id="dc" ...>
    <axiis:layouts>
        <axiis:BaseLayout id="myLayout" ...
            itemMouseOver="mouseOverHandler(event)">
 
            <axiis:drawingGeometries>
                <degrafa:RegularRectangle id="myBar" ... />
                <degrafa:RasterText id="myBarLabel"... />
            </axiis:drawingGeometries>
 
            <axiis:referenceRepeater ... />
 
            <axiis:states>
                <axiis:State
                    enterStateEvent="mouseOver"
                    exitStateEvent="mouseOut" ... />
            </axiis:states>
        </axiis:BaseLayout>
    </axiis:layouts>
</axiis:DataCanvas>
 
<axiis:DataCanvas id="dc2" ...>
    <axiis:layouts>
        <axiis:BaseLayout id="myLayout2" ...>
 
            <axiis:drawingGeometries>
                <degrafa:RegularRectangle ... />
                <degrafa:RasterText ... />
            </axiis:drawingGeometries>
 
            <axiis:referenceRepeater ... />
        </axiis:BaseLayout>
    </axiis:layouts>
</axiis:DataCanvas>

The interaction is achieved by the itemMouseOver event on the main column chart’s layout. Note that we are not listening for events on the columns themselves, rather we listen on the parent BaseLayout. The layout is responsible for attaching individual listeners to all of its children as they are rendered to the display. Layouts have events for all possible mouse interactions, including click, double-click, mouse over, mouse out, etc. This is one of the nicest features of Axiis. Since user interaction is managed by the layout and not by the rendered geometry, I change whatever I want about the geometry or how it is rendered and user interactions are preserved. The code is also pleasantly clean.

What’s more, the main column chart uses an Axiis State to create a visual rollover effect on the columns. The State is used to trigger some visual changes (column stroke weight is increased and label font is bolded) on mouseOver and then reverts the changes on mouseOut.

Here is the event handler attached to the itemMouseOver event on the layout:

private function mouseOverHandler(e:LayoutItemEvent):void {
    //change dataset to current mouseOver'd column
    myLayout2.dataProvider = e.item.data.day;
 
    //set color
    var color:uint = myPalette.colors[e.item.index];
    myPalette2.colorFrom = color;
    myPalette2.colorTo = PaletteUtils.darker(PaletteUtils.darker(color));
 
    //hide text
    insetText.visible = false;
}

The LayoutItemEvent event contains all kinds of useful information when it arrives at our handler. First, we set the dataProvider of our inset chart using the day data from the highlighted week column. Next, we use some Degrafa color magic to set the colors of the inset’s columns from the color of the highlighted week column. And finally, we hide the reminder text.

Here is the result (view source enabled):

The end result is a fairly cool visualization that does a good job initially hiding unnecessary information, but later reveals it upon user interaction. For example, toggle back and forth between week B and week C. You can easily see a shift in traffic to the first half of week C compared to week B.

Postscript

I recently discovered another amazing data visualization framework. Protovis is an awesome Javascript library created by some hella smart dudes at Stanford. If I ever needed to do any visualizations on the web, and was banned from using Flex, I’d definitely use Protovis.

Files

• AxiisColumnStack (download)
• AxiisColumnInColumn (download)

Lately, I’ve been working on a project at work that places a real premium on cool. This post has nothing to do with that project, of course. It’s all about the quest for cool and my personal journey with Axiis.

Simple Ass Column Chart

In the beginning, I had a simple data set and just wanted create a basic column chart. I tried to follow the Intro and Tutorial, but I must admit I got a little lost the first time through. Hopefully, this will be an even easier introduction to the Axiis framework.

Here is our data in MXML:

<mx:XML id="myXML">
    <columns>
        <col label="A" val="10" />
        <col label="B" val="9" />
        <col label="C" val="7" />
        <col label="D" val="5.5" />
        <col label="E" val="6" />
        <col label="F" val="3" />
        <col label="G" val="4" />
        <col label="H" val="2.5" />
    </columns>
</mx:XML>

We want to render this data to the screen as a bunch of columns (aka RegularRectangles). So, the next thing that we need to do is process our data and feed it into an Axiis Layout. A Layout is the main element in any Axiis chart; it takes incoming data and renders it to the display.

Here we process our data and set our Layout‘s dataProvider:

private function complete():void {
    var ds:DataSet = new DataSet();
    ds.processXmlString(myXML.toXMLString());
    myLayout.dataProvider = ds.data.object.columns.col;
    dc.invalidateDisplayList();
}

And here is the basic shell of our entire application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application ...>
    ...
 
    <axiis:LinearScale id="vScale" />
 
    <axiis:DataCanvas id="dc">
        <axiis:layouts>
            <axiis:BaseLayout id="myLayout">
                <axiis:drawingGeometries>
                    <degrafa:RegularRectangle id="myBar"... />
                    <degrafa:RasterText id="myBarLabel" ... />
                </axiis:drawingGeometries>
 
                <axiis:referenceRepeater>
                    <axiis:GeometryRepeater>
                        <axiis:geometry>
                            <degrafa:RegularRectangle ... />
                        </axiis:geometry>
                        <axiis:modifiers>
                            <axiis:PropertyModifier ... />
                        </axiis:modifiers>
                    </axiis:GeometryRepeater>
                </axiis:referenceRepeater>
            </axiis:BaseLayout>
        </axiis:layouts>
 
        <axiis:backgroundGeometries>
            <axiis:VAxis ... />
        </axiis:backgroundGeometries>
    </axiis:DataCanvas>
</mx:Application>

Stepping through the code element by element, we see:

1. LinearScale – We use a LinearScale to convert from data values to screen values (aka pixels). So a data value of 5.5 might translate into 11 pixels, 42 pixels, or 55 pixels depending on the scale.
2. DataCanvas – The DataCanvas contains all Axiis graph elements. This is analogous to Flex 4′s Graphic container for FXG elements, and Degrafa’s Surface container for drawing elements.
3. Layout – BaseLayout is the parent of all layouts and the most flexible.
4. drawingGeometries – We draw each column as a RegularRectangle and each label as a RasterText. Positioning and sizing is guided by the reference geometry created by the referenceRepeater. Column height is computed using the current value of the data from the Layout converted to screen coordinates by the LinearScale.
5. referenceRepeater – The reference geometry and repeated property combine to create a visualization for the data. So, repeating rectangles horizontally gives a column chart, repeating rectangles vertically gives a bar chart, repeating line segments horizontally given a line chart, etc.
6. VAxis – Draw a vertical axis underneath our graph layer by using the backgroundGeometries layer of the DataCanvas. I like to use a negative x value to shift the axis left to get it out from underneath the chart (and compensate by shifting the entire DataCanvas right with a positive x value).

That’s it for the high-level stuff, the dirty little details are in the code. A little trial-and-error went a long way to teach me what the hell each of the various parameters actually did. The Intro and Tutorial article does a good job covering some of the details and tricks like the vertical flip trick, and I also recommend Tom’s session from AdobeMAX.

User Interaction Coolness

Last, we’ll add a little dash of coolness to our application with a simple rollover effect on our columns. Using an Axiis State, we modify a few properties of our drawingGeometries on the mouseOver event to create a rollover effect.

The State code:

<axiis:BaseLayout id="myLayout" ...>
    ...
    <axiis:states>
        <axiis:State enterStateEvent="mouseOver"
                exitStateEvent="mouseOut"
                targets="{[barFill,barStroke,myBarLabel]}"
                properties="{['alpha','weight','fontWeight']}"
                values="{[1,2,'bold']}"/>
    </axiis:states>
</axiis:BaseLayout>

Cool Colors

Using Degrafa geometry to build our chart gives us total control of the shape and design, but if we really want something cool, we need to use color. For our column chart, we’ll use an Axiis LayoutAutoPalette element to create a smooth color gradient for each bar.

Here is the code:

<axiis:LayoutAutoPalette id="myPalette" layout="{myLayout}"
        colorFrom="0xFF99FF"
        colorTo="0x6699FF"/>
 
<degrafa:SolidFill id="barFill" color="{myPalette.currentColor}" />

The LayoutAutoPalette interpolates from a starting color to an ending color for each data value in the Layout. We then feed the palette’s current color into a standard Degrafa SolidFill. Lastly, the fill is applied to the RegularRectangle in the drawingGeometries section of our Layout to create a pretty gradient of bars from left to right. Note that color is not proportional to the data value, but Axiis certainly provides the functionality to make a column chart with bars colored by height.

The Result

Here it is, rollover effect and all (view source enabled):

Files

• AxiisSimpleColumn (download)