The video materials show the WGB recreated solely from the information we acquired from the official floor plans that can be accessed by all Computer Lab researchers.

This page further shows two visualisation demos for the WGB. One was written in D3.js, the other in Three.js.

These are incomplete examples and do not show the full scope of the project, e.g., including all of the APIs, data collection, and integration architectures that were created during this initial deployment. Please refer to the published and pre-print papers for more information.

D3.js Visualisation for Floor Plans and Sensors

While developing front-end data visualisations for the Adaptive City Platform, we experimented with a range of tools to display the incoming sensor data from dozens of deployed sensors.

For the most part, these experiments were done using the D3.js library.

Instead of relying on the click-on-the-sensor-and-inspect-the-data paradigm, our approach was to construct individual room-bound heatmaps for the WGB.

The metaphor driving the data visualisation was to depict new data points emerging in real-time on the heatmap, updated continuously as if mimicking raindrops, with the data being delivered through a WebSocket connection.

The video below showcases multiple raindrop ripples (or splashes) appearing on a heatmap generated over a lecture theatre floor plan:

Some of the deployed sensors came with an 8x8 IR camera, allowing us to see real-time snapshots of what these sensors were seeing.