HXRC Team: Data Visualisation in Urban Setting

Text by Irina Konovalova

The purpose of the City Data project was to build a web-based 3D application showcasing building models of the Myllypuro Campus area, and to visualise data of the buildings and the surrounding environment. The idea was to create a digital twin of an area by visualising city data in real time, and linking the building model to the Empathic building platform with detailed indoor maps and data of the building. In the beginning, the application only included the Myllypuro campus, but as the project progressed, navigation to Arabia, Karamalmi and Myyrmäki Campus areas were also developed.

The City Data project was a proof of concept (POC) funded by Metropolia’s Smart and Creative City innovation hub.

Trainee introduction: Irina Konovalova

Hi, I’m Irina, Information and Communication Technology student here at Metropolia UAS. I started as a Developer trainee at Helsinki XR Center in the summer of 2024. In this project, I was responsible for the development of the application, including code design and implementation, integrating data from multiple APIs, and data visualisation.

I started working on the City Data project in the beginning of my internship at HXRC. The project had just started, and its goal was to connect building models made by the City of Helsinki with city data. The trainee team included Alma Hoque, a 3D Artist responsible for the visual design and UI prototypes, and myself as the coder. The vehicle models and a material for the Myllypuro Campus building were made by Annika Hirvelä, a 3D Artist trainee.

Starting the project

This project started with outlining the features to be implemented and researching technologies and APIs with open data. We decided to create a map-based application, where the user can navigate at different levels of detail – from city to area, from area to building, from building to building data. Our goal was to display information about the energy consumption of the buildings, and to link the building to its Empathic Building indoor representation. We wanted to make the application visually interesting by overlaying live data visualisations on the map, so that they would reflect the physical environment in the application. We decided to add models of public transport vehicles moving in real time and weather simulations demonstrating the current weather conditions.

The development process started by setting up a React application and creating a map component using Mapbox GL JS, a JavaScript library for building interactive maps for browser-based applications. Next, 3D models of Myllypuro Campus and surrounding buildings were downloaded from the Helsinki map service, and placed on the map.

Placing the buildings on the map was fairly straightforward, as Mapbox provides an example of adding a 3D model to a map using Three.js. In this implementation, Three.js renderer uses the same WebGL context as Mapbox, ensuring that Mapbox and Three.js content are rendered on the same canvas. The models’ geographic coordinates are converted into Mercator coordinates (x, y, z) used by Mapbox. Model is transformed by translating, rotating and scaling in the map’s coordinate space to ensure it aligns with the map correctly.

Now that the buildings are added to the map, let’s talk about other visualisation layers!

Layering data on the map

Myllypuro campus with transport, weather and energy consumption visualisations.

The application can be thought of as layers overlaid on the top of the map. In fact, a Mapbox map consists of layers, where each layer represents different type of elements, such as roads, buildings, or water. These layers can be modified dynamically and custom layers can be created, such as a Three.js layer described above. The buildings layer was modified with fill extrusion to make all the buildings on the map 3D.

Once the map was set up, it was time to add layers with transport visualisations. GTFS (General Transit Feed Specification) real time API was used to visualise the vehicle positions and trip updates. The data was fetched and processed for visualisation. Deck.gl, a data visualisation framework, was used to overlay data layers on top of the Mapbox map. The layers included 3D models of vehicles moving in real time and paths showing where a vehicle is passing.

Weather data was fetched from Vaisala xWeather API and visualised using Three.js custom layers, similarly to adding 3D building models. Three weather conditions were visualised: clear, cloudy/overcast and rainy. Mapbox styles were updated dynamically based on weather data, for example, applying fog and changing sky color to show overcast weather conditions. Also, a dark theme was applied after sunset. Rain was created using a Three.js custom layer by importing a GLTF model of a raindrop and making multiple instances of it at random positions, and adding a Three.js animation. In the beginning, we tested importing a rain animation from Blender, but doing it in Three.js turned out easier and lighter. Additionally, dynamic shadows were added based on solar angles from data, but this feature currently works only on Mapbox buildings, leaving shadows of imported building models for further development. Also, there were other layers including geojson layers, which outlined the selected area, and text layers to show some energy consumption numbers.

Linking to building information and finalizing the project

Once the data visualisation was complete, it was time to add interactions to the building models to link the buildings to Empathic Building. It was implemented by opening an overlay on clicking the building with a button for redirecting to Empathic Building.

Myllypuro campus at night; building info overlays with links to Empathic Building with more detailed building information.

In the end of the project, more areas were added to the application, including Myllypuro, Arabia, Karamalmi and Myyrmäki campuses, which the user could select from the navigation menu.

Initial view of the application with areas outlined on the map view. The paths represent public transport flow.

Last step was to polish the project by updating the building materials and replacing vehicle placeholders with improved 3D models. There is still plenty of room for further development in this project, such as adding more weather effects and clearer presentation of energy consumption, allowing easy comparison between buildings within an area.

Conclusion

I really enjoyed working on this project, as well as my overall experience as a part of the HXRC trainee team. The project combined working with different APIs with a more creative side of developing, which I found very fascinating. I have learned so much about Three.js, while also gaining more experience in teamwork, communicating ideas and application development process overall. This project definitely sparked my interest to learn more about data visualisation in 3D web applications. I am continuing exploring the subject in my bachelor thesis.

To see previous news about our trainees’ projects, head over to the Trainee news section.

Follow us on social media for more posts: Facebook | LinkedIn | Twitter | Instagram