Posts Tagged ‘visualizations’

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

DailyDev: Timetoast Timeline

June 1, 2010

DailyDev thumbnail logoThis is the first of what I hope is many posts in my DailyDev (for development, not devotional) blog series. I plan to try out at least five new (to me) Web tools or techniques a week and share my experiences and finished products in this space.

To kick things off, I made a timeline version of my resume using free online tool Timetoast. While Timetoast is free, registration, or, a log-in via your Facebook account, is required.

Finished Product
Timetoast timeline screengrab

  • Timetoast outputs a Flash timeline (above) and html list version of the timeline (below).

Timetoast timeline list version screengrab

Pros

  • Super easy to use. If you can fill out online forms, you can make a simple interactive timeline in minutes.
  • Shareability. Each project gets own permalink, embed code. Built-in social media sharing, comments.
  • Basic HTML  tags including <a>, <b> and <i> allowed within descriptions.

Cons

  • Very limited design, formatting options.
  • Can add images only to title, events, not to timespans.
  • HTML formatting counts toward per-box character limit.

Tip

  • Take the time to add images to each event. It helps make the timeline appear a lot more visually interesting.

Recommend?

  • Yes. If you’re short on time, money or development expertise, Timetoast is a functional alternative to scratch-making Flash or CSS/jquery timelines.

The Molecule As a Social Media Metaphor

October 7, 2009

chemName a social media app and you’ll likely find it on Brian Solis’ Conversation Prism. There are nearly 200 social media icons on Version 2.0 of the colorful conceptual map, intended to assist organizations in applying social media to their brands.

Every industry needs an encyclopedia. Daily newspapers have the Editor & Publisher International Yearbook. Such exhaustive resources can be invaluable — in the case of the E&P Yearbook, locating potential employers is how I used it — but are too cumbersome for everyday use.

To fully make out the Conversation Prism’s icons requires a large monitor. Or, for $20, you can buy a 22″ by 28″ poster from theconversationprism.com.

With some study, advanced users can make sense of it. They recognize most of the icons and have used enough of the tools to know how they relate to each other. But the average business person will be overwhelmed: “Yeah, it looks pretty, but what do I do with it?”

A second shortcoming is that the Conversation Prism does a poor job of illustrating the crossover between different tools. For example, I’ve embedded a YouTube video on this blog. WordPress and YouTube are at opposite ends of the prism, however, suggesting they don’t interact.

An alternative metaphor that addresses these deficiencies is a chemical molecule. Think of the models from chemistry class (pictured above). Social media advisers would only need to present to managers the tools they’re most likely to use, and the relationship between them would be clearer.

Say a rock band wants to use Twitter to promote its music, videos and fan-produced photos. The “molecule” for such a campaign would have a Twitter atom at its core and music, video and pictures atoms branching off of it. Electrons within each atom would comprise the individual tools. Pandora, Seeqpod and Last.fm for music, for example.

The hands-on assembly of the molecules would engage the manager on a level staring at a chart just can’t. Plus, social media chemistry models would make for fantastic conversation pieces. Sit them on an executive’s desk or trade show table and you’re bound to get people talking. Conversation. What you’ve been going for all along.

Like Pictures? This Post’s For You.

October 5, 2009

If a picture truly is worth 1,000 words, then, I hope my professor forgives me for exceeding the prescribed length for this post.

Images, as the expression suggests, can pack a lot of meaning into a small space. This, and that the brain can generally process images quicker than it can text, are why information visualizations are so effective, particularly for illustrating relationships, as the three below do. Even though they’re not labeled, with a little thinking, you can probably guess what’s being conveyed.

cooking2

currency2

calories2