DailyDev: Treemap

July 1, 2010

DailyDev blog series logo - day 11When I saw Mark Luckie’s post “What is a treemap? 5 examples and how you can create one” the other week I thought making a treemap would be a fun exercise for this series, in which I test drive new (to me) Web tools and techniques.

From Luckie:

Treemaps are a growing trend in online data visualization and you’ve likely spotted one or two around the web. But what are they?

Most newsies have probably seen the Newsmap, one of Luckie’s examples.

Treemaps, sometimes written as “tree maps,” display hierarchical information in a series of clustered rectangles, which together represent a whole. The size of each box represents a quantity. Treemaps also can use color to represent any number of values, but it is often used to categorize the various boxes within the treemap.

Be sure to check out the full post on 10,000 Words for more examples and advice on creating your own.

In part to simplify the styling of the chart and in part to brush up on my skills, I decided to build my treemap, illustrating the fiscal 2011 spending plan for the municipality I used to cover, in Flash.

Given that it’s been — let’s just say a while — since I tackled anything approaching serious development in this particular program (this hastily made virtual bell I used to motivate teammates in an all-hands-on-deck Web development session might have been the last interactive I produced), it took me a few days to put the treemap together. Recreating the visualization in HTML/CSS could be a future project, I suppose. I’ve seen enough of this chart for now, though.

Finished Product

Screengrab of treemap city budget visualization made in Flash

Pros

  • Efficiently communicates the basics about the budget. With a quick glance and a few mouseovers users get a good grasp of how the city’s money is divided up and what some of the bigger-ticket areas are.
  • A lot more fun than reading a budget story or scrolling through the spending plan PDF.
  • Doesn’t have to take long to do. Although I didn’t choose either of these options, as Luckie mentioned in his post, Google and IBM have tools that generate treemaps for you.

Cons

  • It can be cognitively difficult for users to compare proportionate shapes with varying aspect ratios. (That’s one reason I made the blocks representing my subcategories squares.)
  • Difficult to optimize for mobile, given reliance on mouseovers, and, in many treemaps, the oh-so-teeny-tininess of the tiniest blocks.
  • Building from scratch and manually doing the math to determine the proportions — like I did (though I did have Google’s tool assist me with the dimensions/layout of the five main blocks) — can be time consuming!

Tip

  • Flash doesn’t allow nested rollovers. Use the hitTest method if you want that behavior. For example, here’s the AS2 I used to get the Parks details to appear on mouseover:
parksMain_mc.onEnterFrame=function()
{
	if(parksMain_mc.hitTest(_root._xmouse, _root._ymouse))
	{
		parksMain_mc.gotoAndPlay(2);
	}
}

Recommend?

  • Yes, but make sure the time it takes to create the treemap is balanced by the time it saves/value it adds for your audience. Also, given the increasing importance of interlinked data on the Web, which I blogged about earlier, it behooves developers to present data in semantically smarter ways than Flash. So, yeah: Do as I say, not as I do.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: