How to Make an Interactive Area Graph with Flare

December 9, 2009  |  Statistical Visualization, Tutorials

flare graph

You've seen the NameExplorer from the Baby Name Wizard by Martin Wattenberg. It's an interactive area chart that lets you explore the popularity of names over time. Search by clicking on names or typing in a name in the prompt. It's simple. It's sexy. Everybody loves it.

This is a step-by-step guide on how to make a similar visualization in Actionscript/Flash with your own data and how to customize the design for whatever you need. We're after last week's graphic on consumer spending (above).


This tutorial is for people with at least a little bit of programming experience. I'll try to make it as straightforward as possible, but the concepts might be a little hard to grasp if you've never written a line of code. Just a heads up. Of course it never hurts to try.

If you don't care about customization or integration into an application and don't mind putting your data in the public domain, you could also just dump your data into Many Eyes, and use the Stack Graph.

Get Adobe Flex Builder

Like I said, this is all in Actionscript, so before we start anything, I strongly recommend you get Adobe Flex Builder if you don't already have it. You can buy it, get a trial version from the Adobe site, or if you're in education, you can get it for free.


Working With Flare

Luckily you don't have to start from scratch. In fact, most of the work has already been done for you using Jeffrey Heer's Flare visualization toolkit. It's an Actionscript library. We're going to work off one of the sample applications: JobVoyager. Once you get your development environment setup, it's just a matter of switching in your data, and then customizing the look and feel.

Okay, let's get started (finally).

Step 0. Download and import Flare


Open Flex Builder. You should see something like this:

Flex Builder Window

Right click on the Flex Navigator (left-hand side) and click on "Import..." You'll get a popup that looks like this:

Picture 2

Select "Existing Projects into Workspace" and click "Next." Browse to where you put the Flare files. Select the "flare" directory, and then make sure "flare" is checked in the project window.

Picture 3

Do the same thing with the "flare.apps" folder. Your Flex Builder window should look like this once you've expanded the flare.apps/flare/apps/ and click on

JobVoyager Code

If you clicked the run button right now (the green button with the white play triangle top left), you should see the working JobVoyager. Get that working, and you're done with the hardest part.

Step 1. Update the data source

Let's dive into the code now so you can adapt the visualization to your own data and customize the aesthetics. Again, we're going to adapt this code to consumer spending data to make last week's graphic.

consumer spending


  1. private var _url:String = "";


  1. private var _url:String = ""


Step 2. Change the years

The next two lines, line 58 and 59 are the column names, or in this case, the distinct years that job data was available. It's by decade from 1850 to 2000. We could make things more robust by finding the years in the loaded data, but since the data isn't changing we can same some time and explicitly specify the years.

Our expenditures data is annual from 1984 to 2008. We'll change lines 58-59 accordingly.

  1. private var _cols:Array = [1984,1985,1986,1987,1988,1989,1990,1991,
  2. 1992,1993,1994,1995,1996,1997,1998,1999,
  3. 2000,2001,2002,2003,2004,2005,2006,2007,2008];

Step 3. Data headers


Luckily, it's pretty easy. The year column is the same, so we just need to change any people references to expenditure (vertical axis) and any occupation references to category (the layers). Finally, we'll remove all uses of gender.


  1. var dr:Array = reshape(, ["occupation","sex"],
  2. "year", "people", _cols);

Change it to this:

  1. var dr:Array = reshape(, ["category"],
  2. "year", "expenditure", _cols);

We only have one category (sans sex), and that's uh, category. The x-axis is still year, and the y-axis is expenditure.

Step 4. Sorting

Line 84 sorts the data by occupation (alphabetically) and then sex (numerically). We'll just sort by category:

  1. data.nodes.sortBy("data.category");

Are you starting to get the idea here?

Step 5. Proper categories

Line 92 colors layers by sex, but we don't have that split in our data, so we don't need to do that. Remove the entire row:


We'll come back to customizing the colors of the stacks a little later.

Step 6. Labeling areas

Line 103 adds labels based occupation:

  1. _vis.operators.add(new StackedAreaLabeler("data.occupation"));

We want to label based on spending category, so we'll change the line accordingly:

  1. _vis.operators.add(new StackedAreaLabeler("data.category"));

Step 7. Interactive filters

Lines 213-231 handle filtering in JobVoyager. First there's the male/female filter and then there's the filter by occupation. We don't need the former, so we can get rid of lines 215-218 and then make line 219 a plain if statement.


Step 8. Search categories


Here's line 222 as-is:

  1. var s:String = String(["occupation"]).toLowerCase();

Change occupation to category:

  1. var s:String = String(["category"]).toLowerCase();

Step 9. Color scheme

If you ran the code right now, everything should compile correctly, and it'll look something like this:



  1. shape: Shapes.POLYGON,
  2. lineColor: 0,
  3. fillValue: 1,
  4. fillSaturation: 0.5

Then line 105 updates saturation (the level of red), by count. The code for the SaturationEncoder() is in lines 360-383. We're not going to use saturation though. Instead, we'll explicitly specify the color scheme.

First update lines 86-89 to this:

  1. shape: Shapes.POLYGON,
  2. lineColor: 0xFFFFFFFF

We're going to make stroke color white with lineColor. If there were more spending categories, we probably wouldn't do this because it'd be cluttered. We don't have that many though, so it'll make reading a little easier.


  1. private var _reds:Array = [0xFFFEF0D9, 0xFFFDD49E, 0xFFFDBB84,
  2. 0xFFFC8D59, 0xFFE34A33, 0xFFB30000];

I used the ColorBrewer for these colors.

Then we'll add a new ColorEncoder around line 110:

  1. var colorPalette:ColorPalette = new ColorPalette(_reds);

Tada, you now have something that looks like what we're after:


Here's the finished product.

Step 10. Download the code and see for yourself

To play with this yourself, just complete step 0 and then replace with this file. It has all the updates we've just covered.

Step 11. Where to Go From Here


Have fun!


