This is the Project Spatial Intelligence and we are Fei, Zidong, and Zihui!
Credit: Built on the framework of https://github.com/civisanalytics/d3_tutorial
Our project is based on a real scenario, which our early-stage startup is currently working on. As we know, we already have mature systems for online shopping analysis but still, heavily rely on empiricism when it comes to offline shopping. So we focused on analyzing customer and brand features in physical shopping malls.
The data we used is generated by the 400 surveillance cameras of the HopsonOne Mall. 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 exploratory data analysis, 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.
-
Overall: As mentioned before, the project is about the trends of customers to different stores. Thus the first thing we want you to see is the tendency of different groups of people(represented by dropdown tag) visiting different store types(represented by color). Also, there are dimensions of time(x-axis) and percentage(y-aixs) and counts(circle size)
-
Visual Encodings: We used connecting line to show the trend of one store. We thought about every single dot representing a store, but that would not show whether the customer profile could represent the overall tendency; Colors are most eyecatching, and the 7 store types are important and need to be brought upfront; The circle size is relatively low-key. We only expected viewers to feel the difference, instead of knowing exactly how many more customers.
-
Interaction: If you want to go in detail and explore the specific brand, you can hover at some point, and see the connecting line, which means this is a single store’s data across different time. We also have a tooltip here, with the brand, floor, and specific values. You can also click to make it stay. We don't want our viewers only able to look at one store at a time. If you feel the visualization is too crowded, you can drag the toggle of the slider. We did not implement vertical slider intentionally. Because we found two sliders with four toggles could be annoying. It took several steps to view what you want. So we made the vertical range automatically adjusted. The dropdown is used to switch to another customer feature. This process is about changing the whole object you want to view. We did not implement the radio button because the dropdown could hold many more options.
At every stage we distributed the workload among ourselves. Althoug each of us was involved in almost all works, Zidong is mostly responsible for interaction, Fei for data and the framework, Zihui for design and details. Our generall process was:
- brainstorming(4h)
We went through a lot of ideas. The biggest one is to animate the tracks of every customer, with specific values by the side. We tried this idea and thought this would take so much time that should be left to the final project.
- data cleaning(2h)
It was a back and forth process to know the exact content, form, and range of our data. We also played around the format(json, csv).
- wireframe(4h)
There is an existing project we refered to (source at the credit part). We spent some time reading the oringinal code and discussed how we could implement our own ideas. Then we drew some scratches to build the framework.
- Interaction(13h)
We spent a lot of time working with slider, zooming, dropdown, hover, click, and tooltip.
- Detail(8h)
The details that we polished included: clear section button; color scheme; bubble size; font; filter stores with small counts.