Visualizing data has always been a a major priority in just about every project I’ve worked on in the past 8 years. Most people don’t know it, but before I was dragged into programming, I was doing graphic design for a living (manuals, covers, and web sites) and I’ve never let go of those skills.

More often than not, I hear developers complaining that they’re not designers which means they shouldn’t be required to make any consideration for how things look, feel, or operate. I know none of you really believe that though - I’ve seen the ASCII art you try to make. Perhaps there’s a middle ground.

Several months ago I read an intriguing article by Edward Tufte on the notion of Sparklines. What’s a Sparkline you ask? It’s an “Intense, Simple, Word-Sized Graphic”. That’s the concise way of saying that it’s a small graphic that crams a lot of data into something that fits well inline with text.

Yesterday, Hylton (founder of Corante.com), sent out a link to site with a collection of links that were all quite interesting. By chance, it happens that one of these links, to the Functioning Form Blog, was to an implementation of Sparklines for Web Logs. Naturally I had to know more.

I was blown away to see something I had been thinking about for some time but hadn’t found the means to illustrate. Luke Wroblewski, the blog’s author, has done an awesome job. Here’s what he’s come up with:

A simple Web-log post continuum sparkline could plot the current post a reader is viewing, the previous posts it references, and the later posts that reference it. This paints a picture of where the current post originated (what ideas it draws from), and where it went (how those ideas evolved).

The sparkline could also provide a macro-level overview of when the post occurred (in the life of the blog) how many posts are related to it and when those were added. So you could potentially see a flurry of writing on a particular topic, a lull in the evolution of the topic, and then a return to the topic at a later date (though perhaps less active).

Source: Functioning Form Blog, “Web-log Continuum Sparklines”

I really believe in Sparklines. I’m using them in another project I am trying to get off the ground. Heck, I even own sparklines.com. I also believe that Flash is the perfect medium for developing sparkines for the online world, though CSS does come in at a close second.

So the challenge is this. Can anyone produce this in Flash using the following data:

// SparkLine Object
function SparkLine(timeFrame, timeUnit, prevColor, currColor, fwdColor, cat2Color, cat3color) {
	// Baseline properties
	this.timeFrame = (timeFrame) ? timeFrame : 52;
	this.timeUnit  = (timeUnit)  ? timeUnit : 'Weeks';

	// Color properties
	this.prevColor = (prevColor) ? prevColor : '#ffcc00';
	this.currColor = (currColor) ? currColor : '#000000';
	this.fwdColor  = (fwdColor)  ? fwdColor : '#ffcc00';
	this.cat2Color = (cat2color) ? cat2Color : '#ffcc00';
	this.cat3Color = (cat3color) ? cat3Color : '#ffcc00';

	// Data
	this.data = [];

	// Methods
	this.addData = new function(index, newData) {
		this.data[index] = newData;
	}
}

// Web-Log Continuum Object
function WCL(postURL, postLength, isCurrent, category) {
	this.postURL = URL;
	this.postLength = postLength;
	this.isCurrent = isCurrent;
	this.category = category;
}

// Sample Data
var spark = new SparkLine();

spark.addData(25, new WCL('http://yahoo.com',250,0,'code'));
spark.addData(30, new WCL('http://yahoo.com',50,0,'code'));
spark.addData(32, new WCL('http://yahoo.com',50,0,'code'));
spark.addData(40, new WCL('http://yahoo.com',300,1,'code'));
spark.addData(41, new WCL('http://yahoo.com',310,0,'code'));
spark.addData(47, new WCL('http://yahoo.com',300,0,'code'));

Sorry if this code is bad or broke, I just spit it out as a baseline. If you’ve got a better working model, stick it in the comments for all to see.

I know some of you drawing API guys are drolling over this :) Any takers on this challenge? If so, I think I can generate this data in a few places already. Ray Camden, if you’re seeing this, I can see a plug-in for BlogCFC that does this quite easily.