Problem & Motivation
Boss Bidding has always been a bane and a hassle for students from the time they step into university as freshmen till their last years as seniors. When bidding opens every semester, students are usually caught in a frenzy trying to analyze the tremendous amount of data presented to them in the Boss Bidding system.
As students, deciding how much e$ to bid for a particular module, depend largely on the professors teaching the modules, its timetable, the previous bidding numbers, its vacancy as well as a variety of other factors. This process of making sense out of all the historical records is often an intimidating and stressful experience for the students.
Our solution is aimed at helping students visualize the large and often confusing data into simple, easy to understand components. Its design would allow for an intuitive user interface by showing only relevant details at different levels of data abstraction.
Here, our solution is not aimed at providing the student with the "optimum" bid-amount. This is because the analysis would be rendered useless if all students had access to this amount and bids the same. Rather, our solution is aimed at giving critical insights or trends to students so that they can make a better informed decision when placing a bid.
The current system in place to retrieve past BOSS bidding data does not provide an easy, straightforward method to export data into a software friendly format (.xls, .csv, .xml). There is also a limit to the amount of data that can be displayed per request due to their pagination feature. This means that we were restricted to scraping the data page by page.
In order to overcome this issue, we created a custom bot to programmatically extract the actual html codes used to display the elements, for about 2,000 pages worth of data.
However, the data at this stage was still unusable, as can be seen from above. Next, we imported the dataset into Excel and wrote our own custom scripts to selectively extract the relevant data, remove the irrelevant HTML elements and organize them into their respective columns.
Finally we were left with a 16 Megabyte (MB) csv containing about 130,000 records of 16 columns.
[Click here to Download]
Survey of Current Related Visualisations Available
1. Art Auction Visualisation(link)
- Transitioning effects allow the viewer to easily understand how the same set of data fits into another category.
- Mouse over effect shows the picture preview of the selected art-piece.
- The data nodes are on single level of abstraction so it would not be able to quickly show a multi-level analysis that we are looking to show in our solution.
2. Olympic Medals Visualization(link)
- The time series transition allows the viewer to easily see how the distribution of the data changes across time. This will be good in our context to show how bidding changes over time.
- The visualization shows only the relevant or more significant pieces of data and hides the rest to prevent confusion for the viewer. This is good in large data sets like our Boss Bidding results.
- As a result of the hidden information, seemingly insignificant results require a mouseover to reveal more detailed information on the node.
In our visualization, we plan to create a solution that would allow students to have a quick gauge of the bidding patterns of a particular module at a glance. Our target audience will be students who will be participating in the next BOSS bidding exercise and we aim to visually represent:
- Cross comparison of bidding amounts across all available modules
- Cross comparison of bidding amounts across all professors teaching in a specific module
- Cross comparison of bidding amounts across the different sections that a specific professor teaches in a specific module
We intend to use circles of different sizes and of different shades of colors to represent our data.
- Size → Vacancy of the Subject
- Color Intensity → Median/Minimum/Maximum Bid Amount of the Subject
The visualization can also be toggled to display the bidding information by the following variables:
- Academic Year
After studying the examples, we have decided to incorporate some of those design elements that make their individual visualizations effective and stand out. We have also decided to add in our own elements to address some of the disadvantages of the selected visualizations.
Mouse-over Details effect
From the Art-Auction visualization, the effect we found effective was the one where a mouseover to the particular node would instantly reveal the data contents of the node. (In the visualization’s case, it was the art piece itself!). In our visualization, we will incorporate this effect to show the more granular details of the particular node.
Zoom-In Details effect
From the Olympic-Medal visualization, one of the effect we found to be useful was the ability to hide information that is too detailed or specific from the viewer unless or until the viewer requests for it. Thus, we intend to implement a zoom in effect where the user would be able to start viewing the visualization from the most general view. if he wishes to know more about the details of the particular node, clicking it would zoom in to the node to reveal the more detailed ‘’sub or child’ nodes within it. Clicking those again would reveal more sub nodes and information becomes more specific as a user zooms in the visualization.
The design and implementation is bound to change as we explore more in depth into the data and gather deeper insights but this would be the general direction we would be working towards.
| Technical Challenge
|| Mitigation Plan
||Unfamiliar with the D3 framework
- We will be looking to learn from more concrete examples especially how to achieve certain effects with the data.
- We will be first researching and focusing only on the D3 implementations that we think are suitable for the project, instead of attempting to learn to code from scratch.
|Cross Browser Compatibility Issue
||Scripts may behave differently across different browsers, which would likely lead to the risk of project breaking, if we were to only focus on one browser.
- Constantly test our project on all major browsers at every key milestone so that we are able to react to any major bugs in time.
Project Timeline & Milestones
List of References & Tutorials
Hey! Let out your thoughts. We're here to hear! :)