Sunday 17 March 2013

Exam Timetable

A couple of months ago I spent a fair amount of time reading Bret Victor's essays.  If you haven't watched Inventing On Principle, or read Magic Ink I suggest you stop looking here and go there instead (it'll be a much better use of your time!).  One point that really struck me is the incredible bandwidth our eyes afford our brains to receive information.  By comparison, our means of sending data back to the world is incredibly limited.  When put in the context of how we interact with a computer (e.g. my work machine has 4147200 pixels to display information, my hands only have 10 fingers & thumbs) this has really shifted my attention to thinking much more carefully about what I and others get to see.

It's been a fun day, I've spent it thinking about exams I don't have to take...
Not really having much experience with visualisation and graphics, I've been working my way through Edward Tufte's Envisioning Information and Visual Explanations (with The Visual Display of Quantitative Information currently on order).  There are many take-home lessons from that I wish I'd known years ago, most interestingly they have given me an appreciation for paper as a reasonable output medium - the "resolution" (at 600dpi) for a tiny piece of A4 paper is 4960 x 7016 pixels (of course there are considerations for what you can distinguish by eye).  Other lessons about side-by-side static content not requiring memory across time (as opposed to rollovers or other means of dynamically showing/hiding information you may want to compare) have also been small insights.  There is a danger with technology that the programmer "doing something cool/interesting/difficult to program" outweighs doing something simple, but well.

Anyways...having read all of this stuff, I thought it'd be fun to pick a little side project to put it into practice.   As it happens, this Friday the 2013 Summer Exam Timetable for the computing department (where I work) was released.  This takes the form of a static HTML table, with rows sorted by time, with one row for each exam.  Each exam has a code, title, date, time, duration, room and size.  Now for the students (for whom this timetable is primarily designed), its be straightforward to search through the list for their exams, and add them to whatever calendar system they're using.  

However as staff, it's always useful to have a more global view of what's going on where.  Eventually there will be an allocation of primary and secondary invigilators to these exams (of which I'll be involved in several), and it's always useful to be answer the question of who is supposed to be where.

The idea then of a two-phase project struck me.  First (today), rework the existing timetable into something a bit more visual - using graphics to localise the exams in time (length, day, week), and also in physical location.  Second (to do later, once the information is known) - extend the visualisation to show the assignments of staff, and allow quick finding of particular people (in particular, the exams I'll be involved in!).

A plan.  The red stuff on the right is what I settled on actually trying to implement.
I started the day away from the computer, building a sketch/plan/storm of this mini-project, and working out some rough ideas.  I'm no artist - so my sketches are incredibly abstract, and I favour some textual notes.   From the outset, I quite liked the idea of localising the exams in space, by having a depiction of the rooms they can take part in, as-well as in time.  The A3 page right was my plan.

Then an afternoon of fun ensued.  Tech wise, I thought I'd make this a (large) web-page (so it's easy to share/show others), but with the eventual aim of making something that can be printed and stuck on a wall. -- I believe web-pages are fairly straightforward to convert to print medium.

Deciding to use this as an excuse to learn enough angular.js and javascript svg manipulation turned out to be frustrating at times (just how are you supposed to embed an svg that you want to dynamically restyle in a HTML5/angular document, - oh wait chrome needs svgs to be served from a server to allow you to alter their contents, and don't forget to hack around inkscape to add a viewport to your svg if you're wanting to resize it in a browser! ...sigh).  However, I got about 2/3rds of the way through my idea before running out of Sunday.

At top is a screenshot of the result (larger version below, the online version is likely to change or go away), there's a lot wrong and yet to be fixed, though I am quite pleased with the current state of it.  Hopefully (before the exams!) I'll get something I'm happy enough to turn into a (framed?) poster.