Overview

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.

View live demo

Launch date

Nov 2016

Roles

Data visualization
UI/ visual design
front-end development

 

 


Goals

Why

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.

Who

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.

What

I visualized one year (2015) of NYC 331 restaurant related complaints, and full list of restaurants.

(Data source: NYC Open data)

 


Process

 

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?

"3D"

A smooth and engaging 3D experience enabled by Mapbox GL JS.

"Data analytics"

Capability to render and calculate big geospatial datasets with Turf.js.

"Customizability"

Full control over the data soruce, type of  visualization, popup configuration, etc.

 

Early sketches

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

 


More screenshots

Hexagon density

Individual incidents

Icon design

Demo at AWS re:Invent 2016

 

*    *    *

Or read more in the Mapbox blog post!

 

Yunjie Li, 2017
Using Format