Energy Expansion Navigator

We designed a custom three-level visual journey that methodically guides users from area of interest through to detailed, geolocated data stories.

To capture attention and introduce the tool, we created a WebGL particle simulation featuring a million particles and optimised them to be mobile performant. Acting as a micro-lens into the energy world, users navigate through topics presented as a carousel of samples under a microscope. Once users have identified their area of interest, the interactive Macro Map View grounds the concepts into interactive, geolocated data stories using MapBox GL tile and rendering services.

The platform needed to seamlessly render hundreds of millions of complex data points, including point, shape and raster data, without compromising CPU and GPU performance. To meet these visualisation demands, we utilised Preact, WebGL, Node and Mapbox to engineer a three-page templated visual journey. Crucially, we developed a proprietary tool to customise MapBox data points before rendering, solving computational challenges, improving styling opportunities to match the S&P brand guidelines and significantly reducing tile-rendering costs for the client.

During the project, the team experimented with various map shapes and projections to figure out the most effective way to visualise specific data stories. As a browser-based experience, we worked to optimise how different data formats especially how raster data (image data like GeoTIFFs) would fit onto these maps without causing performance issues.
.
As part of this process, we explored several different visual representations of the Earth, rendering maps as natural globes, completely flattened out (“flat earth”) views and views of a convex nature. Once the data was better understood, the concept changed to focus on an interactive solution that required Equal Earth, Mercator and Albers Equal projections.