Feedback

.gitignore

@@ -0,0 +1,8 @@
+# # models
+# node_modules/
+# .gitignore
+# .elasticbeanstalk/
+# # Elastic Beanstalk Files
+# .elasticbeanstalk/*
+# !.elasticbeanstalk/*.cfg.yml
+# !.elasticbeanstalk/*.global.yml

LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) 2016 Rafał Pocztarski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1 +1,68 @@
-# final-project-starter-code
+# Spatial Intelligence
+
+## OVERVIEW
+#### This is the final project "Spatial Intelligence" for MIT-6.859 in spring 2021. We are Fei Xiong, Zidong Huang and Zihui Zhang.
+#### 👓 [Project Page](https://6859-sp21.github.io/final-project-spatial-intelligence/)
+#### ☁️ [Visualization Website](http://18.166.102.28:5000/) 
+>🚨 _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
+>```
+#### 📄 [Link to Full Paper](https://github.com/6859-sp21/final-project-spatial-intelligence/blob/main/6_859_spatial_intelligence_finalpaper.pdf) 
+
+
+## COMMENTARY ON PROCESS
+#### Ideation
+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: 
+1. The mall's daily customer flow data overview, categorized by customer type and store type
+2. The mall's monthly customer flow trend, categorized by customer type, but now down to the level of every single store
+3. 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.
+#### Data Collection
+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, 
+
+![Stores Table](https://github.com/6859-sp21/a4-spatial_intelligence-1/blob/main/data/stores.jpg)
+
+
+and the KPIs table of each store on a daily basis. The KPIs include gender, age, acessories, entering, passing, etc.
+
+![Kpis Daily Table](https://github.com/6859-sp21/a4-spatial_intelligence-1/blob/main/data/kpis_daily.jpg)
+
+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.
+
+![Final Table](https://github.com/6859-sp21/a4-spatial_intelligence-1/blob/main/data/final_table.jpg)
+
+#### Visual Encoding and Interaction Design
+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. 
+
+![Sankey Particle Chart](https://user-images.githubusercontent.com/60722129/118685024-509a5080-b835-11eb-9a7a-ba12733dd9cf.jpg)
+
+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. 
+
+![summary_02](https://user-images.githubusercontent.com/60722129/118686143-52184880-b836-11eb-93c1-3816418bc98a.png)
+
+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.
+
+![summary_03](https://user-images.githubusercontent.com/60722129/118686198-5f353780-b836-11eb-919f-3bd5d70dbb43.png)
+
+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](https://github.com/6859-sp21/final-project-spatial-intelligence/blob/main/6_859_spatial_intelligence_finalpaper.pdf).
+
+
+## WORK DIVISION
+##### Fei Xiong:    
+✅ Data Processing ✅ 3D Model ✅ Bubble Chart ✅ "Introduction" + "Related Work" of Paper
+
+##### Zidong Huang: 
+✅ Data Processing ✅ Sankey Particle Chart ✅ Bubble Chart ✅ "Methods" of Paper
+
+##### Zihui Zhang:  
+✅ Overall Visual Design ✅ Project Page ✅ Bubble Chart ✅ Video Teaser ✅ "Results" + "Discussion" + "Future Work" + "Conclusion" of Paper
+

index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en" class="mw-100 mh-100">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Spatial Intelligence Project Page</title>
+
+
+
+
+
+
+    <style>
+   h1, h2,p, footer,h6{
+       text-align: center;
+      }
+
+      .center {
+    margin-left: auto;
+    margin-right: auto;
+    display: block
+}
+
+    </style>
+
+
+  </head>
+
+
+  <body class="text-center" width = '1500' style ='background-color: black;'>
+
+
+
+
+    <div class ='center'>
+        <h1 style = 'color: white; font-family: Helvetica, sans-serif;font-size: 60px; font-style: italic;'>
+            <a href="http://18.166.102.28:5000/" class="text-white" style = 'color :rgb(118, 179, 189)'>SPATIAL INTELLIGENCE</a></h1>
+                        </div>
+
+            <h2 style = 'color: white; font-family: Helvetica, sans-serif;font-size: 24px;'> Running Instructions</h2>
+            <p style = 'color: white; font-family: Helvetica, sans-serif;font-size: 18px;'>
+                1.Please use CHROME for best performance;</br>
+                2.Please zoom out your webpage to 100%.</p>
+                <h6 style = 'color: white; font-family: Helvetica, sans-serif;' class ='center'>
+                  <a href="http://18.166.102.28:5000/" class="text-white center" style = 'color :rgb(118, 179, 189)'>Click to our Project Spatial Intelligence</a></h6>
+                <svg width="800" height="50" class ='center'>
+                    <rect width="800" height="5" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"class ='center' >
+                  </svg>
+
+        <h2 style = 'color: white; font-family: Helvetica, sans-serif;font-size: 24px;'> Digitalization of Shopping Malls</h2>
+        <p style = 'color: white; font-family: Helvetica, sans-serif;font-size: 16px;'>We process data - the flow of customers and their features, generated by cameras,
+            to provide decision support for physical spatial management.
+        </br>Project Team Member : Fei Xiong;   Zidong Huang;    Zihui Zhang.</br></p>
+
+
+
+
+
+
+    <footer class="">
+        <h6 style ='color: white; font-family: Helvetica, sans-serif;'>Data credit: Beijing Chaoyang Hopson One by
+            <a style = 'color: white; font-family: Helvetica, sans-serif;' href="https://www.placeint.net/" class="text-white">@placeint</a></h6>
+    </footer>
+
+    <img src='public/img/summary.png' width = '1500px' alt="Summary Screenshots of Spatial Intelligence" class ='center'>
+    <div width ='300px'>
+    <p style = 'color: white; font-family: Helvetica, sans-serif;font-size: 16px;' width ='900px'>Digitalizing is the primary step for the Internet of things, 
+        and Spatial Intelligence is utilizing the transformation from images to numeric </br>
+        and time-stamped data to provide service for spatial management. These visualizations provide opportunities to imagine the possible </br>
+        application for imaging tagging and visualizing. In the meanwhile, our visualizations are not only informative but also lucrative for </br>
+        commercial usage. Serving as an assessment and analysis system can provide subjective decision-making suggestions on rent pricing, </br>business type deployment in malls, and customer 
+        flow monitoring. Our vision is to let the viewers be more aware of the unattended </br>
+        resources near us and fight for the offline world with the database we are about to establish someday.</br>
+        <a style = 'color: white; font-family: Helvetica, sans-serif;font-size: 16px;' href="https://github.com/6859-sp21/final-project-spatial-intelligence/blob/main/6_859_spatial_intelligence_finalpaper.pdf" class="text-white">Read Full Paper, please click here.</a></p>
+    </div>
+    <video width="800" height="400" controls class ='center'>
+        <source src="public/video/1.mp4" type="video/mp4">
+        <source src="public/video/1.ogg" type="video/ogg">
+        <source src="public/video/1.webm" type="video/webm">
+        <object data="movie.mp4" width="800" height="400">
+          <embed src="public/video/1.mp4" width="320" height="240">
+        </object>
+      </video>
+      <p><a style = 'color: white; font-size:14px' href="https://vimeo.com/551823774" class="text-white">
+        Spatial Intelligence is a visualization and analysis tool for physical spatial management, 
+        currently targeting at commercial real estate.</a></p>
+
+
+
+
+
+  </body>
+</html>