VitalVis Project Update: Coding the Vision

Since my last post about VitalVis the Superteam has been hard at work and you can find the latest screenshots below.

These are dynamically generated graphs pulling *real* patient data provided by Wardware .

NewestCapture2 NewestCapture

It immensely satisfying to see the *real* version getting to close to the mock-up.


VitalVis – Re-imagining the Observation Chart for the Digital Age [NHS Hackday 4 – London Edition]


For NHS Hackday 4 – London Edition. I wanted to work on a design hack to solve the following challenge.

How to display 5 days worth of patient bedside observation data on a small smartphone sized screen.

Digital collection of routine observations (Blood pressure, Heart Rate, Respiratory Rate, Oxygen Saturations and Temperature) is becoming more common place in the acute hospital setting. The advantages of automated calculation of Early Warning Scores (EWS) and automated notifications to the clinical team and Patient At Risk Team (and related early intervention teams) are undeniable.

However, displaying of a large amount of patient observations to allow comparison of trends in a small smartphone sized screen remains problematic. Doctors are very used looking at patterns and trends very quickly. The way this is represented on smartphone sized screens currently makes this difficult.


The example above is taken from a leading provider of bedside observations systems. As you can see, the number of observations is quite limited and getting previous observations require a significant amount of scrolling and does not allow direct comparison with the current set of observations. This is a significant disadvantage compared to paper.

Inspired by Edward Tufte

Inspired by the father of data visualisation, Edward Tufte and his paper co-authored by Seth Powsner article (“Graphical Summary of Patient Status”, The Lancet 344 (August 6, 1994), 386-389), the Superteam (see below) produced the following solution:-

Iphone5 with VitalVisThis design shows:-

  • A total of 5 days of observational data:- The last 24 hours is shown in the right half where as the previous 4 days is shown on the left hand side of the screen.
  • The right  area of the screen shows the most recent set of observations
  • Horizontal Gray bars demonstrate ‘safe ranges’
  • Numbers incorporated in the middle divider helps orientates viewer

Principles of the design:-

  • Minimal use of colours
  • Maximising the data-to-ink (pixel ratio)
  • Variable X-axis with emphasise on the last 24 hours
  • Use of dots or lines to represent trends instead of ‘artificial’ lines
  • Relies of the natural ability of the human mind to quickly process large amount of information using pattern recognition

This also allows:-

  • In a larger screen like a tablet or computer monitor, this allows one to view observations from multiple patients at the same time, allowing a quick overview of multiple patients
  • Incorporation into a patient dashboard

The technical implementation

To turn this idea into reality, we were fortunate to have anonymised real patient level data collected by Wardware provided by Rob Dyke (@robdykedotcom) of Taxtix4 in the form of an mySQL database. In the short amount of time available to create the, the Superteam managed to create a webapp that can query this database and display it on a webpage. The technology stack: Python, Django, Mathlib library. Screenshot below. [30/05/2013: An updated version 48 hours post hackday could be found here ]


To my knowledge this is the 1st ever project at any of the previous NHS Hackday to use actual patient data. I strongly believe that one cannot build good systems without using realistic data.

The Superteam

This project would not be possible without the skills, professionalism and dedication of the following amazing people:-

  • Martin Green – Radiation Physicist and Coder
  • Alan Beebe – Coder
  • Chris Pritchard (@chriscpritchard) – Student paramedic and Coder
  • Ayesha Garrett (@londonlime) – Designer
  • Amanda (@complexitytamer) – User Experience Designer
  • Wai Keong Wong (@wai2k) – Haematologist <- ME!

Collaborate and other Resources

The code if available on GitHub

Presentation is available on SlideShare