Team Members: Nelson Liu, Mathew Luo, Darin Chin, Teresa Zhan

Design Rationale

We had a lot of design decisions that we had to make during this process! One of the biggest decisions that we had to make was deciding what we wanted to visualize and make interaction for. For example, we had a total of 15 different fruit and vegetable categories. For the vegetable categories, it was hard to discern them, as it was not explained in the documentation. An example of this was there was a category for "orange vegetables" and also "starchy vegetables". We weren't sure of what these categories meant. For example, what about a sweet potato? Was a particular type of vegetable only allowed to be in one category, or was it okay to be in two categories? Because this was very unclear to us, we decided to just focus on the three fruit options: fresh/frozen fruit, canned fruit, and fruit juice. Furthermore, we didn't want to clutter our visualization with too much data across too many categories for the fruit and vegetable options, which is why we decided to just have three fruit options. We wanted also to show the change in food prices over time, which is why we chose to include time as the x-axis and price as the y-axis. One of the things we kept having discussions was deciding what we wanted the user to interact with: should the user be able to filter through geographic region or fruit group instead? (For example, should the user see how prices of the three groups in one particular region, or should it be seeing all the different geographic regions with a choice for food groups?) In addition, we were deciding between using a line graph and a bar chart. We decided to do a line graph instead, because it shows the continuity of the price over time, and furthermore, because we didn't think that time could fit into categorical data. For our interaction, we decided to use a drop down menu to allow the user to the particular geographic region or food group that they wanted to filter by. The reason why we wanted to do this is because we wanted to make sure that the user could only choose one geographic region or food group at a time. This is because we wanted to prevent overplotting and have information overload to the user and we decided that the drop down menu is the interaction that allowed us to do so. Another design choice that we made was what should be displayed as the default. Should the user be presented with either a blank visualization, or a default geographic location or food group? We decided to have the default be a blank visualization because it prompts the user to interact with our visualization and figure out how to use it, especially with the "Click to Choose a Region!" prompt. Finally, we decided to add a tool tip that shows information about the data when you hover over the exact data point. We decided to do this because we wanted the user to find more information about the exact data point because we had so many noticable peaks and valleys in our data. A user's eyes might focus on the peaks and valleys of the visualization and the data behind this. We wanted to fulfill the user's curiosity by showing the data point when the point was hovered without being overwhelming and we found that the tool tip was the most useful way of conveying this. These design decisions ultimately helped us make the visualization that you see now.

Development Process

Filtering and Brainstorming
First, the main problem that we had to figure out was what we wanted to convey to the user with our data and finding our data in the first place. Teresa and Darin looked for the data that the entire group eventually agreed on. From there, we realized that we just had a set of raw numbers, but we weren't yet sure what we wanted to show. Therefore, we decided to use Tableau for quick prototyping to spark ideas. Because we had time as a dimension as well as geographical location, we knew we wanted to do something with time, as the data provided both year and quarter for when the food price data was collected. Therefore, we first used Tableau to visualize the relationship between the year, ranging from 1999-2006 (across the four seasons) and the price of fresh/frozen fruit. We were able to see a very interesting trend. In addition to the price of the fruit increasing over time, there were very noticable differences between quarters. In particular, the price of the fruit was much cheaper in the fall months compared to the spring months . We suspected that this is because in quarter 3, which is around Autumn time, more fruits are being harvested, and with more supply, the prices in general will decrease. This was a suprising trend that we did not anticipate, so we knew this was definitely something that we wanted to include in our final visualization. Then, we decided to brainstorm. The four of us met together to hash out ideas on a notepad and drew by hand a quick sketch of what we wanted. We had a fun discussion bouncing ideas off each other and ultimately agreed on what we wanted to display. The process of deciding what we wanted to visualize to finally coming up with a rough idea took about one hour.

Implementing Our Design
Now that our group had a good idea of what we wanted to visualize, we moved on to implementation. Mathew, Darin, and Teresa started working with D3, each of them working in parallel. Nelson, on the other hand, wanted to go a different route and try to use Vega instead. Each of us had to break down the problem into separate subproblems. The first thing the D3 group wanted to tackle was simply showing a line graph and importing the data from the CSV file and display it in some manner. This was a huge challenge for the three of us because none of us had prior experience to web development, let alone D3! We looked for examples online for projects that wanted to display information in a similar manner to us, but all of us were running into separate errors, such as not being able to show the years as time (were displayed as numerical values instead) and dealing with null pointers. In the midst of this, Nelson discovered Vega instead. He wrote a python script to clean the csv files by mapping the numerical values of the quarters and division codes to their English names. In addition, Nelson was able to display the data in a much faster and cleaner way without as much struggles that the other 3 members of the group were facing. Resultantly, our group collectively decided to switch gears from D3 to Vega. It took about 1.5 hours from the start of implenting to deciding to switch gears to Vega. In Vega, Nelson was able to get all lines of the 3 fruit groups aross all divisions, but all of them showed up at once, so there was actually 27 lines in the visualization. It was at this point that our group's attention switched to Vega. However, the main problem was that we wanted to create the interaction of filtering between geographic regions with a drop-down menu and only see 3 fruit groups at a time, since we wanted to focus on how the prices in the different fruit groups varied over time within one single geographic region. Figuring out how to do this took the longest time as this was a challenge trying to separate the data and how to organize the data into layers. Nelson and Mathew focused on trying to implement this while Darin and Teresa worked to plan the next steps for what we wanted to visualize. We also faced problems with what we wanted to visualize and how the different layers interacted with each other. For example, we had an iteraction that showed the exact data point as you moved your mouse over the lines; however, all the data points would display as a huge cluster because the data was still not separated into the different geographic regions. Trying to debug this took the most amount of time, around 3 hours, which involved looking at other examples, moving code, and reading articles online to better understand our code so we could fix and separate the data. We discovered that the interaction that was showing the exact data points was causing the problems, as two side-by-side views could not be layered on top of a single view, so we decided to remove it. Our whole group collectively worked together to try to fix this. After seeing our visualization, we were really happy with what we had after tuning up some details! However, one of the discussions that we kept having was whether or not we wanted the interactive part to allow the user to filter for geographic location or different fruit groups (fresh/frozen fruit, canned fruit, and fruit juice). Then we asked ourselves, "why not?". Since we already had a visualization for filtering by geographic location, it was relatively simple to code up the visualization for filtering by fruit group. We were also facing minor troubles with UI problems, such as making sure that the names of the fruit groups were fully displayed, and adding titles and axis titles(and deciding on them as well!). Nelson and Mathew worked on adding another visualization while Darin and Teresa worked to write the write-up as well as fix the troubles with the UI in parallel. This took about 1.5 hours. We had a fun time doing this project and learned a lot about data visualization in the process!