Somewhere in between presenting static information graphics and complex, interactive data dashboards there’s a need for a way to visualize moderately dynamic data on the web. Oftentimes the solutions you see implemented are clunky, for example, manually creating multiple frames of various data points and uploading them by hand. These methods scale poorly and try even the most patient.

Traditionally the task of combatting the challenge has fallen to Flash. To be sure, it is a fine choice. I am not here to rail against Flash and contend that absolutely all things on the web should be done with HTML, CSS, and JavaScript. Flash is tailor-made for creating dynamic web experiences. However, using Flash in some cases might be the technological equivalent of hitting a fly with a sledgehammer.

By using a standardized set of web technologies, it is possible to produce interesting data visualizations that degrade gracefully in the face of browser inferiority. Through careful semantic crafting of our XHTML containers, clever use of CSS, and a splash JavaScript, we can build data visualizations that enhance our message and communicate better to our users. As a frame for this technique, I have created a fake site for a university fundraising event. The data visualization we’re going to be working with here is a temperature gauge that will display progress towards a monetary goal. Go ahead and take a sneak peek at the final result.

Building the XHTML

As with most techniques, the foundational XHTML is the most important piece, enabling us to progressively enhance the visual presentation. The structure of our XHTML will be in three parts:

1. The container of the data visualization
2. The progress indicator to be animated
3. A textual representation of the data

The structure for this is alarmingly simple, so I wonââ