Cambridge University Design / UX group

Simple data visualisation with CSS – improve user experience


For the main project I work on, my boss, a Prof in the Dept of Earth Sciences, writes an article, or ‘Topic’, about the subject he is interested in, and this Topic is added to one or more Categories. The whole lot, plus all the relationships, is stored in a database, and those data are used to generate content for a website. This is exactly the same concept as me writing a post on this blog, and then adding it to the ‘Tips’ category.data_viz_screengrab

I’ve been playing around with simple graphical representations of the data, initially just using CSS techniques. I thought that some of you might find it handy so see how it is done.

Problem and Solution

I occasionally need to generate some simple graphs to show how many articles my boss has written for a given category, so he can keep track of what has been written already, and where we are lacking content. It is pretty easy to generate some numbers directly from the database, or to have a web page in the backend of the website to display those data in a table, but up until now, I had been generating the graphs manually.

I could have achieved this in Excel, but I had been using it as an excuse to use the IBM Many Eyes website that I mentioned a few weeks ago, since it allows you to rapidly produce all sorts of visualisations.

Showing how many Topics have been written for a given Category is obviously pretty straightforward, and a simple bar chart generally seems to suffice (although my boss also likes the bubble chart visualisations!). It occurred to me, after producing these graphs a couple of times, that I could just do this on our website, using the live data, instead of having to produce them manually each time. That makes the process much more maintainable for me, but it also improves the experience for the site’s administrators (i.e. my boss, and the other content-providers).

Styling unordered lists

Bar charts, and especially horizontal bar charts, are a good one because the concept is easy: each bar is just a box, and according to your data, you tell it how wide to be. Simple!

To do this, I used Wilson Miner’s approach that he wrote about in A List Apart last year. All credit to him for the technique of using an unordered list, and styling the links and list items accordingly. Follow that tutorial, and you will see how easy it is to produce something attractive, using standards-compliant XHTML and CSS. He also describes how to produce a couple of other kinds of graph that you might find interesting.

So I took this approach, tweaked it a bit to fit in with the administration tools on my website, and there we go. An up-to-date, dynamic bar chart, whenever my boss wants it. (I won’t go into the code used to generate the list used to make that chart, but it is pretty simple PHP). The chart is obviously very easy to interpret, and an overview can be gained at a glance, whilst looking a table of the same data is not quite as good.

OK. Next…

Now I just need to work on the bubble chart… that’s a bit trickier, and will almost certainly involve Flash! I can also take this simple bar chart approach, and apply it to other data for the site. I will also look at allowing the administrators to chose what they want to display, and thus generate graphs on-the-fly.

Advertisements

Filed under: Tips, , , , , , , ,

One Response

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: