I designed and built this data exploration tool to showcase the 3D capabilities of Mapbox GL JS library. This demo is presented in AWS re:Invent 2016 and as a sales collateral for business intelligence customers.
UI/ visual design
To showcase the 3D capabilities of Mapbox GL and inspire people on new ways to visualize geospatial data.
Also as a general exploration app to learn more about NYC.
For prospect customers:
- Screenshare + walkthrough in a sales conversation;
- Interactive demo in a conference booth.
For the general public:
- See from the Mapbox blog, twitter, etc.
I visualized one year (2015) of NYC 331 restaurant related complaints, and full list of restaurants.
(Data source: NYC Open data)
Why a 3D map?
Why not both?
In this demo, I want to show how 2D and 3D visualizations can work together to present 32,000+ geo-tagged reports in the most meaningful way.
What a viewer should take away with?
A smooth and engaging 3D experience enabled by Mapbox GL JS.
Capability to render and calculate big geospatial datasets with Turf.js.
Full control over the data soruce, type of visualization, popup configuration, etc.
The 'drill-down' is the core interaction for this demo, which allows a user to switch between aggregation (3D) and individuals (dotted) with a click.
Changes over iterations:
- Opt out hexbin scales and data normalization options
- Use blue highlight to connect the 2D and 3D scenes
- Legend data loading dynamically with visualization
* * *