This is the final project "Spatial Intelligence" for MIT-6.859 in spring 2021. We are Fei Xiong, Zidong Huang and Zihui Zhang.
🚨 Please use CHROME Browser and set the zoom rate to 100% for best performance. The AWS Server hosting this site is located in HongKong, so the loading speed might vary according to your location.
Build Locally:
npm install npm start
Based on our A4, we intended to expand the visualization scope of the final project to meet the needs of the shopping mall managers more comprehensively. We reorganize the complex information and divided them into three progressive layers:
- The mall's daily customer flow data overview, categorized by customer type and store type
- The mall's monthly customer flow trend, categorized by customer type, but now down to the level of every single store
- The detailed customer flow data of each single store with adjustable customer type and time period
The three layers were designed to provide managers insights in a progressive way, enabling them to both quickly grasp an overview and access enough details with further interactions.
The data we used is generated by the 400 surveillance cameras of the HopsonOne Mall in Beijing, China. Firstly, we took some measures to desensitize data, in compliance with local policy and laws. Secondly, we took out two exiting tables, the store information table,
and the KPIs table of each store on a daily basis. The KPIs include gender, age, acessories, entering, passing, etc.
Thirdly, we did some basic cleaning, filtered out 0 and null values. Also, in order for the visualization not to be too crowded, we went through a selection process. We selected the data range with fewer missing values and outliers. Similarly, we only selected a few customer tags that have a perceptible difference like female, teenager, enter rate. At last, we translated, joined, and converted the data and got this final table.
The overall principle for designing the visual encoding was to present the complex information in a progressive way by reasonable reorganization to help the management team understand current situation quickly and generate detailed insights with further interaction. It should be able to provide both an overview and enough details. To achieve the goal, we designed three separate but internally connected parts: a sankey particle chart, a bubble chart, and a 3D model.
The sankey particle chart was designed to provide the most straightforward information about the overall customer flow in a designated day. The larger the volume, the wider the link and the faster and denser the particles. Users can choose the categorization of customers (there are two choices in current version: Gender and Age) and any date they are interested in to control the information displayed. By hovering on the the link or the node, the exact number of a certain link or node will be displayed to provide more details. This chart provides answers to general questions about the mall, e.g. "where did men mostly go?", or "what was the majority visiting fashion stores, young people or seniors?", which will help the management team grasp an overview of the current situation. We intentionally kept the graph abstracted to help the user focus. More details will be provided in the next graphs.
The bubble chart further provides information about the trend of each store's customer flow through a period of time. Users can designate a specific customer type, and then the chart will display the flow data of this type of each store in the form of discrete bubbles. By hovering on a specific bubble, the trendline of the specific store will be displayed. And by clicking on it, users are able to keep the trendline stay for comparison. The design intention here was to allow users to control the visibility of key information thus to reduce distractions. This chart will further help the management team understand the trend of a certain customers type in the individual store level, which will generate more detailed insights for them.
The last 3D model was designed to bring the management team into the most fundamental level of a single store to examine its data in a thorough way. Different from the previous two which both contain overviews, this one was designed to only focus on the designated object. The reason to adopt a 3D model was that it can provide unique location information that no other chart can provide, which is critical when analyzing a specific store.
The three charts together are to help the management team understand the customer flow from different but progressive levels.
For more detailes, please refer to our full paper.
✅ Data Processing ✅ 3D Model ✅ Bubble Chart ✅ "Introduction" + "Related Work" of Paper
✅ Data Processing ✅ Sankey Particle Chart ✅ Bubble Chart ✅ "Methods" of Paper
✅ Overall Visual Design ✅ Project Page ✅ Bubble Chart ✅ Video Teaser ✅ "Results" + "Discussion" + "Future Work" + "Conclusion" of Paper