Visualizing data for homebuyers in 3D
Liberty Mutual’s innovation team, Solaria Labs, recently launched Total Home Score to help homebuyers evaluate the ‘hidden’ livability factors associated with a home or apartment before they move in. The product currently offers a Road Score, which measures the prevalence of aggressive and potentially dangerous driving, and a Quiet Score, which estimates noise levels surrounding a home. Total Home Score is primarily an API-based data service, but the Solaria Labs team also wanted to visualize the data in an interactive way.
Total Home Score leverages Mapbox GL to render large, complex data for entire cities at 60 frames per second in the client. Solaria labs needed a solution that was powerful enough to handle the scale of data and flexible enough to customize the experience across platforms. Solaria Labs’ engineering team broke down the decision for us:
We settled on using Mapbox because its detailed documentation and examples made creating data-heavy 3D maps much easier. With Mapbox GL rendering we can create visualizations that really pop and allow the data to tell a story. We didn’t even have to worry about optimizing for mobile performance — the 3D maps rendered beautifully on mobile and tablet out of the box.
Solaria Labs is using Mapbox Studio to upload and manage their own data to use in the maps. With Tippecanoe, a command line utility for creating vector tilesets from large GeoJSON files, they could convert big datasets into performant vector tiles that can then be styled in Studio and rendered at 60 FPS on web and mobile. Here’s more on their process and what they learned:
For the building geometries we extracted building shapes and heights from OpenStreetMap data via Mapzen custom extracts. We combined Total Home Scores from our Shine API platform with building geometries based on the building IDs in OpenStreetMap. We plan to improve this part of the process in the near future by using more efficient geo-hashing functions.
We then wrote this combined structure into a large GeoJSON file. The GeoJSON file was then converted to an mbTiles file using Mapbox’ s Tippecanoe tool. We uploaded the mbTiles file into Mapbox Studio and used data driven styling to color the map and add user interaction, both in 2D and 3D. We then used these styles in our site. We scripted this whole process, so it needs no human interaction other than running the script.
Homebuyers want to learn as much as they can about the places they want to live, so they can decide what they can and can’t live with before they move in. The Total Home Score product makes that complex data analysis digestible and interactive, allowing end users to quickly and easily explore a lot of information about homes, neighborhoods, and cities.
As developers, we get really excited about anything that is interactive and 3D in the browser. With advances in user hardware and WebGL support, we can create unique visualizations that incorporate a lot of data. We are constantly trying to innovate at Solaria Labs, and Mapbox helped us bring the story of our data to life in a really cool way.
For anyone interested in using Total Home Score for their applications, please check out the Shine API Developer Portal. Don’t hesitate to contact us with comments, questions, or feedback; we’d love to hear from you!
Thinking about creating a 3D visualization with large, complex sets of data? Sign up for a Mapbox account, upload your data, and create your visualization today.
Liberty Mutual Total Home Score was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.