Flood Monitoring API
In my first month of my internship at Epimorphics, I have been working on a demonstration of the Environment Agency’s flood monitoring API. I wanted to demonstrate the open data available online to give an idea of its capabilities. I have previously worked on a similar data visualisation as part of my second year university group project.
The flood monitoring API allows access to open data for rainfall, river and tide levels. It gives data for thousands of stations across the UK for the last month, with historic readings available daily. Data is available in 15 minute intervals, but some data may not be available until telemetry is collected.
To start looking at the data I loaded historic CSV archives into a Postgres database. This allowed me to experiment with different selection methods and determine the most appropriate view of each data type. A local database also meant I could work more quickly during early development by not overloading the EA server with too many requests to the API.
Cesium Prototype
I experimented with Cesium, an open source 3D globe library created in WebGL which was used to create the visualisation shown in the video below. This has some nice features such as Google Cardboard VR support, animation and 3D terrain.
Note: The videos below are hosted on a third party website www.youtube.com. Watching the video is exactly the same as visiting www.youtube.com. Youtube may collect data about you, use cookies, embed additional third-party tracking, and monitor your interaction with that embedded content, including tracing your interaction with the embedded content if you have an account and are logged in to that website.
https://www.youtube.com/watch?v=OlhanZ-YviU
This idea wasn’t viable for this project however as it suffered from framerate issues caused by the number of entities displayed per time slice (around 2000) and an issue with textures flashing. This was specifically a problem for data that was not perfectly suited to a bar graph such as river levels. Attempts at creating a heatmap weren’t very successful since a new material needed to be loaded for each time slice and the texture would flash white each time this happened.
Leaflet Prototype
I also prototyped a 2D visualisation of the data using Leaflet for mapping and Vue.js as a front end framework. This would eventually become the final version I would focus my attention on. The prototype version required a hosted database and many requests to achieve a suitable level of animation. For a final demo, I needed to move to utilising the flood monitoring API to eliminate the need for a backend database.
Final Version
The final version of this demonstration is available here.
The visualisation begins with a view of the latest data available for each station. From here, you can select a date and data type, then an animated view of the data for that day will be displayed. This is downloaded directly using multiple requests to the EA flood monitoring API so may take some time to download, once cached this will load much faster, however. Using this API you have access to data collected from the last month.
I recommend starting by viewing tidal data, the data is nicely animated and doesn’t take too long to download. This data shows the water level at a station for the current time slice.
Rainfall data is also interesting if you select a rainy day but may take more time to download (There are around 900 rainfall stations!). This is displaying the rainfall level in mm measured with a tipping bucket rain gauge.
Flooding data displays a heatmap of river levels from all the monitoring locations. Unless you have selected a day with a significant amount of flooding this, unfortunately, won’t be very interesting, it also takes a significant amount of time to download.
You can also select the current date for a look at data for the current day, however, only data up until the previous quarter of an hour will be available and some data may not appear until all the telemetry is collected.
The code for this project is available at the Epimorphics Github page.