Displaying Web Statistics in an SVG Web Application

By Jeff Schiller

These are some web statistics for my site that I've wrapped into a Scalable Vector Graphics application. SVG has recently been implemented in browsers such as Firefox, Opera and Safari. For other browsers you can use the Adobe SVG Viewer plugin. On my Windows system, performance is best with the latest WebKit and Opera 9.5, sufferable in Internet Explorer + Adobe SVG Viewer and Firefox 3.0.

Sorry, you do not have a web browser capable of displaying SVG. I recommend downloading Firefox, Opera, Safari or the Adobe SVG Viewer for Internet Explorer.

Where possible, I've tried to make things interactive, so play around with it. Drag the red and green "grippies" at the bottom to change the scale of the graph. Drag the grey scrollbar to change the position. Drag the "glass" legend around. You can move the horizontal cursor by dragging it or using the left/right arrow keys (Firefox and Opera only). I know that I should have spent some time making this fully accessible via the keyboard, sorry about that. If someone wants to send me updated code for that you'll get a credit and link here.

The full history of this thing began when I came across Johan Sundstrom's post about Scott's aesthetically pleasing web stats graphs (link now broken, you can try this Wayback Machine link). I took the challenge and made my first pass at it (original version is now visible here). Johan took my code and made considerable improvements that more closely matched Scott's original designs and posted about it here. Next I took Johan's code and added more interactivity and capped it off with some suggestions for improvement from Rob Russell, Jonathan Watt, and Johan. The idea for the dynamic scrollbar was Rob's - it works so beautifully in ASV (not so smooth in other native browser implementations - yet).

I also changed the statistic from "# of Page Views" to "# of Unique Visits" (based on IP). I've got Operating System data also, but I haven't found the time to properly integrate that into the graph (maybe I need to make "tabs" to switch between the two statistics?