This program displays comsumption data of SJTU in September, 2014. Tens of thousands of transactions happen on campus each day. ID cards are used for meals, shower and purchases.

In one of my interaction design course, we were introduced to data visualization method. I wrote this program to abstract and display the statistics that had millions of records.


  • UX Design
  • Data visualization

My Role

Individual Programmer

Date & Time

Oct. 2015, 4 weeks

… video demo …

  • … data resource …

  • All consumption data on campus from 09/01/2014 to 09/21/2014 was provided by our instructor Liqun Zhang. There were three CSV documents: account record (1.1MB), merchant record (7KB) and trade record (40.3MB). There was no offense in terms of privacy.

  • accounts

  • transactions

  • merchants

  • … codding …

  • … locations …

  • canteens * 6
    bathrooms * 3
    supermarkets * 2


    Daily and monthly flux
    Daily and monthly turnover
    Daily and monthly per capita spending

  • … visualization …

  • In this program, the average monthly flux, turnover and per capita spending are easily read by looking at the histogram on the map. It can be concluded which canteen is visited most frequently, which canteen serves the most expensive food, and so on. If you combine the histogram with the map, it is possible to analyze which part of campus is accommodated by more people. Users can also take a closer look by clicking on the menu of certain locations, it shows the statistics of one place throughout the time. Drag the time bar and you will see how the flux and income change from day to day.

Other projects