This projects has been rolling around in my brain for a while but I haven’t tackled it yet because I have too damn many other projects in process. So I’m putting it here in the hopes that maybe someone will pick it up and run with it.

I want to put together a collection of javascript based graphing tools that generate pretty SVG graphs of your data in a way that’s fun to look at for people who have to work with it every day but not necessarily something you’d ever want to try and explain to a customer. I want to do this because we deal with a crapload of really interesting data at work, but a lot of it is just internal and only of interest to geeks. Also I’d like a visually interesting way to keep an eye on the status of our systems and the data flowing through them. Stacked bar charts and line graphs get old fast.

Here’s my first idea:
Imagine you have a wooden beam. Hanging down from that beam are strands of ivy. Each strand of ivy represents a thing you’re watching (customer actions, a product’s sales, a website, whatever). The length of the strand represents the number of hits to / quantity of that thing. Now, imaging that that thing has some quality goodness/badness, happyness/saddness, good profit margin / bad profit margin, etc.. As each item is added to the end of the ivy the ivy curves to the right or the left based on how much goodness/badness (or whatever) this item contains. If every item you added had some goodness the line would angle off to the right. Bad items would, similarly, curve it off to the left. If you have a relatively even distribution your lines will simply curve back and forth in a wavy line like a real piece of dangling ivy.

Originally the ivy was just a metaphor to help people visualize it but brainstorming with John brought up the idea that when an item’s goodness/badness crosses a threshold a leaf is added to the line. Maybe the leaf could have an onClick event to take you to a page with details. Maybe the leaves could be different colors or sizes to emphasize how important the event is (relative to how far over the threshold it is).

Imagine how cool it would be to have a whole collection of fun little graphs like this to keep an eye on your data! The beauty of it is this is actually really easy to implement. I just won’t let myself do it until I release the next version of SSCM out the door (with merging and all that goodness), and release the source code to TicketEverything!.

There’s a good tutorial on creating svg objects and you could pre-generate complex items, like the leaves, with Inkscape, or any other vector based illustration app that can export svg.