Pulse: Toward a Smart Campus by Communicating Real-time Wi-Fi Access Data

09/29/2018 ∙ by Aoyu Wu, et al. ∙ The Hong Kong University of Science and Technology 0

To enhance the mobility and convenience of the campus community, we designed and implemented the Pulse system, a visual interface for communicating the crowd information to the lay public including campus members and visitors. This is a challenging task which requires analyzing and reconciling the demands and interests for data as well as visual design among diverse target audiences. Through an iterative design progress, we study and address the diverse preferences of the lay audiences, whereby design rationales are distilled. The final prototype combines a set of techniques such as chart junk and redundancy encoding. Initial feedback from a wide audience confirms the benefits and attractiveness of the system.



There are no comments yet.


page 1

page 2

page 3

This week in AI

Get the week's most popular data science and artificial intelligence research sent straight to your inbox every Saturday.

1 Related Work

Much work has been proposed to analyze the Wi-Fi access data for behavior analysis [9, 7] or facility management [5]. However, there were few visualization systems proposed to communicate those information. A typical visualization approach is the heat map [3, 8]. Other systems display crowd sizes at different locations using circles on a 2D map [1]. These approaches could deliver spatial distribution information, but could lack in sense of dynamic and realistic because the 2D maps do not provide intuitive representation of different locations. In addition, the exclusion of statistical information could make it impractical for real-life usage.

To address those issues, a recent system called Wi-Crowd [2] visualizes real-time crowd distribution on campus using a 3D building map, and a 2D information panel which includes useful numerical information such as top buildings of this hour. While it is shown to be useful and engaging, it remains unclear how those decisions on data and designs are made and whether the approaches are effective. For instance, 3D models and design used in the project were not sufficiently representative of the different locations on campus and therefore, showing weakness in intuitive information delivery.

Our work adds to this conversion by contributing a set of design rationales that guide communicative visualization for this application area. Meanwhile, we reported on the decision choices that we made based on successful or failed prototypes, providing anecdotal evidence on several visualization techniques that might be helpful for such system.

2 Design Rationales

Our first contribution is the derivation of design rationales for systems which communicates Wi-Fi access data. The goal of the Pulse system is to analyze the Wi-Fi access data and communicate the derived useful information to the university community and visitors, promoting the idea of smart campus.

Through the design progress, we have worked with a variety of audiences including 4 administration staffs, 10 undergraduate students, 14 postgraduate students, and 6 external personnel. We adopted different design approaches including individual interviews where we directly asked for their interests, paper- and code-based prototyping where we gathered feedback. In the following text, we summarize the design rationales that we distilled during the iterative design progress:

R1: Data visualization must come with geographical context.

Audiences need to be cognizant of the geographical locations to enhance the sense of realistic and engagement. This is particularly important for visitors which are unfamiliar with the environment.

R2: Maintain visual redundancy by dual-modality of text and visualization. We found that audiences tended to fall into two categories: those who preferred graphical charts and those who liked textual information such as tables. We believe that both types are valid and our system shall address them by redundancy.

R3: Adopt simple and intuitive charts. We observed an overall negative altitude towards complex visualization. Therefore, the system shall adopt simple, daily-used charts. Complex visualization shall emerge step-by-step to promote understanding.

R4: Involve competitive information. We noted that audiences tended to get attracted by competitive information such as rankings. We think the representation of such information could enhance the attractiveness of the communicative system.

3 Visualization System

Our second contribution is the development of the Pulse system, which visualizes the Wi-Fi access data with a 3D Map view and derived useful statistical information with a 2D Chart view. In the following text, we described each visual component and explained the design decisions.

3.1 Map View

The Map View (Figure 1.A) consists of two main visual components: a satellite map which offers an overview of the crowd distribution calculated from the Wi-Fi access data, and a pop-up window which provides useful information of important facilities in a loop.

3.1.1 Satellite Map

We utilize the point cloud on the satellite map (Figure 1.) to provide the overall information (R1). Specifically, the height of the point cloud indicates the number of Wi-Fi connections at each building. We have made two improvements based on the feedback to improve the readability: First, we apply bouncing effect to the point cloud, so that the points are vibrating from the 80% to 120% of original heights. This could bring about a sense of dynamic and vitality, which our audiences appreciated much. However, such changing heights could lead to misconception of the actual value. Regarding this, our second improvement is to assign a linear gradient colorway. For instance, the cyan color denotes less than 200 connections, while the red color corresponds to more than 1000 connections. The colorway is designed based on the visual contrast strategy [4] to highlight the busy places. Specifically, we assign blue and green, which are closed to the background color of the satellite map, to low values, in order to decrease their visual importance. On contrast, high values are encoded with yellow and red with high visual contrast.

In addition, we have mainly considered two alternatives for the map, as shown in the Figure 2. Similar visualization is predominantly based on the dark scheme, because it often brings about an appealing Sci-Fi feeling [6]. However, it lacks in sense of realistic especially for external visitors. Regarding this, we adopted a 3D model map similar with the Wi-Crowd system [2]. Nevertheless, we still received negative feedback on its lack of realism and thus engagement. Therefore, our final prototype is based on the satellite map, which could help audiences locate the position easily.

Figure 1: Two design alternatives for the map. Left: The dark map; Right: The 3D model map.

3.1.2 Pop-up Window

We designed a pop-up window (Figure 1.) to display useful statistical information of important campus facilities in a loop, which a pin icon showing its location on the map. From top to bottom, it displays the place name with an icon showing its functionality, the current number of connection, the calculated level of crowdedness, a line chart showing the data of last 24 hours with highlights on peak timestamps.

We apply a visual redundancy method [4] for showing the peak hours. Specifically, the line chart and peak hour table represent the same information but in different forms. We adopt both textual and visual forms to support different user preferences (R2).

3.2 Chart View

The Chart view (Figure 1.B) presents the statistical information including the crowd amount ranking of functional zones, the historical and predicted number, the movement of crowd among functional zones, and the buildings with top incoming and outgoing crowd.

We adopt simple, daily-used charts (i.e. bar and line charts) for the crowd ranking and total count (R3). During the design progress, we mainly compared two design alternatives (Figure 3). First, we found that the usage of gradient color as a junk chart component received more positive feedback, compared with uniform color scheme (Figure 3. Left). Second, while some audiences reported that the infographics with customized marks was interesting, this design was not preferred because it could be unfamiliar, non-intuitive and therefore take time to comprehend.

In order to visualize the campus movement, we used the standard approach in the visualization community - the Chord diagram. However, we received many complainants from the audiences during the prototyping stage, since they found it difficult to understand. We utilized the anchoring and redundancy techniques [4] in response. Specifically, we calculated and set the top ten movement path as anchoring points, at which we highlighted the corresponding edge. Meanwhile, we provided textual information of that edge as redundancy. We got positive feedback that these improvements made it easier to understand.

We additionally designed a ladder to display the building with most incoming and outgoing crowd (R4). This idea was inspired at the initial interview where four audiences mentioned that they were interested in such ranking data. We also showed it to other audiences during the prototyping stage and received positive feedback.

Figure 2: Two design alternatives for the bar chart. Left: Uniform color; Right: Infographics with customized marks.

4 Evaluation

Our third contribution is a user study to evaluate the benefits and attractiveness of the visualization design. Each user study session includes a two-minute demonstration, a questionnaire, and a five-minute interview. There are totally 33 participants (18 males, 15 females) between the age of 19 and 39 (mean 24.94, std 4.937). Those participants are excluded from the design progress.

Figure 4 shows the description and results of questionnaires. As a whole, the visualization system receives an average score of 6.14, suggesting that the participants agree that it is useful, clear, interesting and engaging. However, participates reported less sanctification with the clearness. During the interview, two participants reported that it was still difficult to understand the Chord diagram. This indicates the needs for more effective methods for such communicative visualization.

Figure 3: Description and results of questionnaires. The rightmost column denotes the average score using 7-Likert scale.

5 Discussion

Our work has two major limitations. First, our design decisions were mainly driven by anecdotal evidence gathered during the design progress, which might be biased. We plan to conduct statistical experiments to verify those assumptions. Second, our evaluation methodology was based on questionnaires and interviews. We intend to measure the success of the communication for more systematic evaluation in the future.

6 Conclusion

We report on our design progress of the Pulse system, a communicative visualization for crowd analytic with Wi-Fi access data on campus. During an iterative design progress, we determined the user preferences on different visual designs, and distilled four rationales that guide the design of such visualization system. The final prototype combines different visualization techniques such as visual contrast, visual redundancy, and junk chart to enhance the effectiveness of data communication. Feedback gathered from a user study indicates the benefits and attractiveness of our approach. We believe that our work could contribute to a growing scholarship on this application area.

We would like to thank Diana Liu, Justin Kwok, Tiffany TANG, and Serena YUNG for their valuable support and insight.


  • [1] D. Ahlers, K. G. Aulie, J. Eriksen, and J. Krogstie. Visualizing a city within a city – mapping mobility within a university campus. In International Summit, Smart City 360°, pp. 492–503, 2016.
  • [2] A. Binthaisong, S. Phithakkitnukoon, and J. Srichan. Wi-crowd: Sensing and visualizing crowd on campus using wi-fi access point data. In Proceedings of the 2017 ACM International Joint Conference on Pervasive and Ubiquitous Computing and Proceedings of the 2017 ACM International Symposium on Wearable Computers, pp. 441–447, 2017.
  • [3] J. Horwitz. Wechat’s new heat map feature lets users-and chinese authorities-see where crowds are forming, 2018.
  • [4] J. Hullman and N. Diakopoulos. Visualization rhetoric: Framing effects in narrative visualization. IEEE Transactions on Visualization and Computer Graphics, 17, 2011.
  • [5] M. B. Kergaard and P. Nurmi. Challenges for social using wifi signals. In Proceedings of the 1st ACM workshop on Mobile systems for computational social science, pp. 17–21, 2012.
  • [6] D. O’Shea. Sci-fi ui colour scheme and style, 2016.
  • [7] P. Prasertsung and T. Horanont. How does coffee shop get crowded?: using wifi footprints to deliver insights into the success of promotion. In Proceedings of the 2017 ACM International Joint Conference on Pervasive and Ubiquitous Computing and Proceedings of the 2017 ACM International Symposium on Wearable Computers, pp. 421–416, 2017.
  • [8] I. Rudomín, G. V. Solar, J. E. Oviedo, H. Pérez, and J. L. Z. Martini. Modelling crowds in urban spaces. In computacion y sistemas, Centro de Investigación en computación, pp. 57–66, 2017.
  • [9] Y. Zeng, P. H. Pathak, and P. Mohapatra. Analyzing shopper’s behavior through wifi signals. In Proceedings of the 2nd workshop on Workshop on Physical Analytics, pp. 13–18, 2015.