Data Visualisation for the Oxford Flood Network

18th March 2015

Oxford is riddled with rivers, streams, brooks, rills, weirs, locks, sluices, channels. The city floods most years, damaging property and disrupting transport. No more personal answer to the question ‘will I be affected by flooding’ exists than the local news coverage provides. We’re partnering with local startup LoveHz to find an Internet of Things solution to this problem.

Enthusiastic members of the public volunteer to place our sensors over water – whether it’s a bridge over the Thames, or a stream in their garden. We’ll blog about the hardware in more detail soon, but the basic idea is that an ultrasound sensor detects the height of the water, sends it over radio to an internet-connected Raspberry Pi gateway, which forwards it up to the cloud. We’re also using multi-km-range TV Whitespace radio technology to connect gateways outside normal internet coverage.


We now have several months of river level data from our first batch of sensors. The Environment Agency have official sensors mounted at locks, and we’re consuming the data via their API. Given both these sources, what can we put on a map to best communicate what is happening? Map-based data visualisation has two challenges: how to display the current state, and how to display the evolution over time.


You’re probably familiar with the way Google Maps displays the current traffic: bad roads are coloured red on the map, good roads in green. This works well, so we used a similar approach: we colour in the rivers according to the latest sensor readings, using historical data to determine ‘badness’. At present we update the map every 10 minutes, and we’re working towards real-time updates each time a sensor reports in.

Most maps emphasise roads and buildings, with faint rivers; we need the opposite. We used Mapbox to style a custom map with high-contrast rivers, emphasising what we were interested in without losing context. As a plus, we can choose the same font family on the map as on the surrounding UI – this prototype uses Open Sans, but I’m looking forward to trying others.

To get a feel for evolution over time, we plot river-level-vs-time sparklines for each sensor. We tried plotting them directly on the map, but lining them up on a sidebar makes it super-easy to spot common trends. Mouseover and touch associate the dropped pin with the sparkline, highlight the relevant section of river, and show sensor metadata in a small popup. You can also zoom in the time axis, and by dragging around on the sidebar to set the ‘current’ time, so you can e.g. see Oxford’s rivers at their height in January.


What jumps out of this visualisation is how closely coupled the various river levels are. Water around Oxford rises together, and falls together (broadly speaking). It’s not hard to guess that each of these river sections is coupled to common sources upstream. Can the upstream level be used to predict how the downstream levels will behave in the future?

Real sensors in the field provide intermittent, aperiodic, asynchronous timeseries data which is fiddly to handle. We’re still alpha-testing the sensor hardware, so you can see gaps in the graphs where connectivity drops out. One of our sensors is sometimes distracted by the branch of a marauding tree; another is mounted inside a water-butt.

This visualisation is a working prototype, but it’s not yet ready to give personal answers to “will I be affected by flooding?”. Turning raw data into ‘actionable knowledge’ is never trivial, especially when targeting a lay audience, but we’re working on it. What you see here isn’t publicly-available yet, hence the still images, but we’d love to hear your comments or suggestions.

There are only a few sensors on the map, at our test sites. We’re hoping to start wider distribution in the coming weeks. If you are based around Oxford and are interested in hosting a sensor, do please drop us a line!

Images contain Environment Agency data supplied by Shoothill Ltd., licensed under the Open Government License v2.0.