The existing model needed an appealing visualization to ensure that the model outputs would be accessible and engaging for potential consumers of the research. The remit for Phase 1 of the project focused on the delivery of a visualization interface to generate interest, enthusiasm and support for the wider roll-out of the model. Oxford Computer Consultants applied our considerable user experience and UI design skills coupled with the latest web-technologies to create an engaging user interface suitable for use as a demo product at a fisheries conference with key stakeholders in Indonesia, where it was well received.
After gaining further support for the project, OCC started on Phase 2 of development which they have recently completed.. The remit of Phase 2 was to extend the user interface to expand the range of fisheries that could be visualized and develop new option to explore spatial fishing patterns. OCC implemented new methods of data visualisations such as heatmaps of fish biomass, and fishing activity to enable decision-makers to quickly explore patterns in one visually and technically appealing interface.
The OCC design approach always puts the user experience first. So we conducted user-research for Phase 1, working closely with the client (acting as product owner) at all times to guide our collaborative design decisions. We also researched the most appropriate mapping libraries and technologies we could deploy for this project.
OCC joined with the School of Geography and the Environment’s team of software developers who were working on Poseidon. OCC designed a new data structure for the model output, which was more scalable, human readable and maintainable – migrating from CSV files to JSON format.
As outlined, the remit of Phase 1 was to deliver a demonstrator iteration of the model which was developed in four weeks, so speed of delivery was vital to the success of the projectOCC worked in an agile manner, collaboratively with the School’s developer team and the product owner – the Poseidon Project Director at Ocean Conservancy. OCC operated in short one-week development cycles using tools such as Trello to track development features and project progress. Scheduled weekly calls were instrumental in refining these.Phase 2 operated in a similar way, but in this case we migrated to GitHub at the request of our client and our project team to track features for the project deliverables.
The purpose of the frontend UI is to visually represent the results of a simulation model run. This is the model output, comprising a large set of data files. OCC used the Mapbox GIS platform for the mapping with Mapbox GL JS (a JavaScript library using WebGL) utilised to render the maps. For the UI, we chose REACT to wrap a non-REACT Mapbox library to add greater mapping functionality.
REACT proved to be a crucial choice as we used it to develop the overall frontend UI. We also made use of a third-party charting library (also in REACT), for chart creation. The charts are easily configurable on the fly; modifying to suit the user’s needs. The charts are synched to the simulation as it runs on the map by way of a moving vertical line that sweeps across the time axis.
Phase 1 UI deliverables include the capability of displaying simple chart types with configurable chart series (datasets). A fully interactive global map is shown with both scrolling and zooming functionality available. The map exhibits a running simulation of different vessel types (these can be fully selected and configured) on their fishing journeys over several years. The map can also show banned fishing zones. Phase 1 UI was a locally hosted web app, stored on a user’s laptop, running in a browser.
Phase 2 sees the web app migrating to The University of Oxford servers so that it can be accessed remotely via the internet on a global basis. In order to expand the applicability of the tool and deliver the insights most useful for decisionmakers, Phase 2 included the addition of Fish Aggregation Devices (FADs), floating objects used to attract tuna; this posed a unique challenge as the web app needed to display almost 10,000 FADs floating individually on currents. Phase 2 also delivered a number of features designed to help users better interpret simulation results, including spatial heatmaps presenting aggregated fishing activity and fish biomass data, markers to display milestones along the simulation timeline, and controls to alter the speed of the simulation. These additions allow users to see trends and results from different fishing policies. Additional features can be fully customisable by being toggled on or off by the user.
As a team we faced challenges with Mapbox regarding improving levels of GPU performance. We are using Mapbox in a non-standard way, utilising it as part of an animation of an agent-based model interfacing with considerably sized datasets. The UI design comprises multiple types of visual datapoints numbering in the 10,000s, constantly moving, updating and being interpolated. OCC created custom canvas layers, with vessels and FADs drawn separately, which sit between standard Mapbox layers to ensure the optimal operation of the animation. This custom canvas layer can be toggled on/off to assist users if they experience challenging levels of GPU performance when using the tool.
