The existing model needed an appealing visualization to ensure that the model outputs would be accessible and engaging for potential research consumers. 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. The System C team applied their user experience and UI design expertise, 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.

Development & New Features

After gaining further support for the project, we started 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 options to explore spatial fishing patterns. We implemented new methods of data visualization, such as heat maps of fish biomass and fishing activity, to enable decision-makers to quickly explore patterns in a visually and technically appealing interface.

The System C design approach always puts the user experience first. For Phase 1, we conducted user research and worked closely with the client (acting as product owner) at all times to guide our collaborative design decisions. Additionally, we researched the most appropriate mapping libraries and technologies to deploy for this project.

Collaboration with The School of Geography & The Environment

We partnered with the School of Geography and the Environment’s team of software developers, who were working on Poseidon. We designed a new data structure for the model output, which was more scalable, human-readable, and maintainable – migrating from CSV files to JSON format.

Agile Development Process for Phase 1

As outlined, the remit of Phase 1 was to deliver a demonstrator iteration of the model, which was developed in four weeks. Speed of delivery was vital to the success of the project. We worked in an agile manner, collaboratively with the School’s developer team and the product owner—the Poseidon Project Director at Ocean Conservancy. We 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 followed a similar approach, but we migrated to GitHub at the request of our client and project team to track features for project deliverables.

Frontend UI & Technology Choices

The purpose of the frontend UI is to visually represent the results of a simulation model run, comprising a large set of data files. We used the Mapbox GIS platform for mapping, with Mapbox GL JS (a JavaScript library using WebGL) utilized to render the maps. For the UI, we chose REACT to wrap a non-REACT Mapbox library, adding greater mapping functionality.

REACT proved to be a crucial choice as we used it to develop the overall front-end UI. We also used a third-party charting library (also in REACT) for chart creation. The charts are easily configurable on the fly and modified to suit the user’s needs. They are synchronized to the simulation as it runs on the map, with a moving vertical line that sweeps across the time axis.

Phase 1 UI Deliverables

Phase 1 UI deliverables include the capability to display 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, which can be fully selected and configured, showing their fishing journeys over several years. The map can also display banned fishing zones. Phase 1 UI was a locally hosted web app, stored on a user’s laptop and running in a browser.

Migration to Online Access for Phase 2

In Phase 2, the web app migrated to The University of Oxford servers to enable global remote access via the Internet. To expand the tool’s applicability and deliver insights useful for decision-makers, 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 nearly 10,000 FADs floating individually on currents.

New Features in Phase 2

Phase 2 also delivered several new features to help users better interpret simulation results, including:

  • Spatial Heatmaps: Presenting aggregated fishing activity and fish biomass data.
  • Simulation Milestones: Markers display key points along the simulation timeline.
  • Simulation Speed Controls: Allowing users to alter the speed of the simulation.

These additions enable users to see trends and results from different fishing policies. The features are fully customizable, allowing users to toggle them on or off.

Addressing Performance Challenges with Mapbox

As a team, we faced challenges with Mapbox regarding improving GPU performance. We were using Mapbox in a non-standard way, integrating it into an animation of an agent-based model interfacing with large datasets. The UI design comprises multiple types of visual data points, numbering in the tens of thousands, which are constantly moving, updating, and being interpolated.

To address this, we created custom canvas layers, with vessels and FADs drawn separately. These layers sit between standard Mapbox layers to ensure optimal animation performance. The custom canvas layer can be toggled on or off to assist users who may experience performance issues related to GPU limitations.

Next Steps

Learn about all the positive impact we’re having in the real world if our large selection of news & blogs.

if you have any questions or enquires, please don’t delay in contacting us right away.