Yevhen Horban, Brandon Archbald, Shaun Khundker
Service-Learning Course Project as part of DS 4200 F20: Information Visualization, taught by Prof. Cody Dunne, Data Visualization @ Khoury, Northeastern University.
For this project, we used financial data from the Northeastern Motorsports Club to visualize a breakdown of their yearly budget by funding sources, and also show where they are spending the most money by budget category. We used three different bar chart variations to display a budget summary for the NU Motorsports Club. For technology, we mainly used D3 to create our visualizations. Click here for the link to our GitHub repository.
The first and third visualizations are linked to the second visualization. Please interact with the second bar chart in order to affect the other 2. To select multiple funding sources at a time please "shift + click" the bars. A shortcut to reload the selection is clicking anywhere on the vis except the bars or click on the total bar.
Our visualization is compiled of 3 different major components. The first visualization is a ‘fuel gauge’ bar (horizontal stacked bar chart) representing the total budget. The second visualization is several smaller fuel gauges (proportional bar charts) representing each of the budget’s funding sources. The third visualization is a couple of bar charts (proportional bar charts) representing what budget categories the money from the selected funding sources was spent on.
We have included multiple features to make the charts more interactive. Firstly, hovering over any of the bars reveals a tooltip that provides additional information for the specific bar users are hovering over. We thought that offering details on demand would be a quick way to give readers the details on specific areas of the visualizations. Secondly, clicking on the bars in the “Funding Sources” chart selects the data that was clicked on. Shift+ clicking on the bars allows users to select multiple funding sources simultaneously for collective comparison if needed. When a funding source is selected, the associated bar remains blue while non-selected sources change to a grey color. We did this so users could identify which sources are selected and which aren’t. The second visualization is linked to the first visualization as well as the third. The selection of bars in the second visualization updates the first visualization to show how much of the current budget is being used by the selected funding sources. This is visually apparent because the money in the budget contributed by the selected funding sources is highlighted in blue. Simultaneously, the rest of the bar turns grey to make it visually apparent to users. Selecting bars in the second visualization updates the third visualization and displays the proportion of the money spent in each budget category. If more than one funding source is selected, the resulting visualization will show the budget category breakdown for multiple funding sources together.
When creating the visualizations, we needed to make specific choices about what to include in the visualizations. We changed our mind about using a pie chart to represent the budget categories and used a percentage bar chart for the last chart because we needed to indicate when no purchases were made in a particular budget category. One of the most important ones we made was that we did not use multicolored bars in order to avoid the complexity of the visualization. Since we are mainly focused on bars, we were wary that having them be multicolored may confuse users and make them think there is a correlation between color and the bars that would not have been there. We also added small animations so that, when data is selected, users can see the visualizations move up and down like fuel gauges.
The presentation slides can be found here.