< Back To Projects or view next project: Realtorvr >

Air Quality Map

For this project, a fortune 500 client wanted to create a scientific application, with a very open brief: Display real-time air quality data from an API they gave us access to. Beyond this brief, was had the pleasure to be given as much room as possible to design how that real-time data would be displayed, as well as the full user journey through the application.

We drew inspiration from a variety of sources from film visual effects to Edward Tufte's work on information design.

We experimented with several solutions, some of which could not make the cut as they were at the time not performant enough, such as volumetric raytracing. While this technique is great to render light going through smoke, and that would be perfect to showcase pollution, it can make a graphic card heat up pretty quickly.

In the end, we ended up with a combination of concise menus created with Vuejs, graphs displayed in WebGL and 3D histograms created with a series of nodes in our custom WebGL engine on top of Mapbox.

We also pull street data from Mapbox, so we could draw geometry lines on top of the map. That enabled us to do 2 things:

• We could add our own shaders to the lines, allowing us to display the impression of traffic. That was not just eye candy, and was important to re-inforce the fact that air quality data was impacted by that traffic.
• We could detect when a user's mouse was hovering over or clicking on those lines, and trigger events, such as displaying a specific histogram on demand.

< Back To Projects or view next project: Realtorvr >