https://6859-sp21.github.io/a4-beereaction/
Beereaction is an interactive visualization that recommends and provides information about beers based on the user’s preference. While there is a plethora of beers in stores or bars, we found ourselves always going for the same choices, so we were inspired by these personal anecdotes to create a system that helps users expand their beer boundaries by providing suggestions based on the user's personalized inputs. We use BeerAdvocate’s 1.5 million beer review dataset, further augmented by Google locations API and hand-crafted beer type classification tool. For each beer name and brewery, we aggregate the mean score for the four subcategories (aroma, palate, appearance, and taste) and add location information of its brewery.
For our main visualization, we use an interactive map with circle data points to plot the brewery (origin) of the beers. For seamless interactions with the map, we allow the users to scroll or double click to zoom, and drag to pan. We use color encodings to show the beer style (Ale, Lager, Stout, Porter, or Else). Although our initial plan for color encodings was to show its beer types, after an exploratory data analysis, we quickly found that there are over 100 beer types in the dataset, and it is inadequate to present that many colors on a map. As a result, we grouped the beers hierarchically and had our color encodings to represent beer styles instead. As there were many overlapping data points on the map, we set the opacity accordingly to present every data point on the map as lucidly as possible. Radius of the circle relates to the user-specific score of the respective beer as we wanted high-scoring beers to appear larger on the map. Finally, our aim was to present a minimalistic and clean visualization, and therefore decided to hide all of the textual details. Yet, we didn’t want to omit the information, so we present them in the tooltip when the users hover over a desired data point. We use fade in animations for smooth transitions, and have a 2-second fade out such that if users move the mouse too quickly or by an accident, they still have access to the tooltip information for a decent period of time without moving back the mouse to hover over again.
For beer style filtering and selection interactions, we provide multiple tools to personalize the preference. First, we provide a multiple selection box to allow users to choose a desired set of beers if they are interested in more than one specific style of beer. For an easier selection experience, we allow the users to filter by beer style as well (using check boxes), which is then reflected in the multiple selection box. Next, we provide two range sliders that decide the number of beers to be shown on the map, as well as the ABV (Alcohol by volume) index. Users might not only be interested in the top scoring beers (maybe, they want to explore the less “mainstream” selections), yet still want to limit the number of beers presented on the map for clearer view; while a traditional slider doesn’t allow this feature, our range slider does. Also, it is natural to allow the users to choose not only the upper bound for the ABV, but also the lower bound. Finally, we present a three-sided radar-chart-inspired preference selector to allow the users to choose their importance weight among aroma, palate, and appearance. By adjusting this selector, the radii of the circles on the map updates synchronously.
For those who may not be a beer expert, we provide two interactive exploration visualizations that help to explore and study beer styles and types. Making use of our hierarchically organized dataset, we provide a sunburst diagram, using the same color encoding for consistency. Radii of the arcs represent the number of beers in that category to show the prominence of the beer styles. Since this visualization doesn’t allow the users to view different beer styles at once, we also provide a tree representation of the beer hierarchy on the bottom.
Of course, there were many turnarounds in the design decision processes, and we have considered numerous alternatives as well. Also, our final version is noticeably different from the MVP with significant improvements. For instance, we altered the way users interact with the map (originally, we had sliders for zooming and translations) as we concluded that interactions with mouse movements are more intuitive and natural. We added a table list view of the top 10 beers for better readability as the standalone map couldn't provide clear ranking of the beers. Note that we omitted taste subcategory in the preference selector as we decided after the MVP that taste is an obligatory feature that should have a fixed weight, unlike the other three subcategories (originally, we had two 2D sliders that allow users to choose weights for all four subcategories). We tried our best to make the presentation as flexible as possible to support not only different window sizes, but also tablets or smartphones. Other smaller alternatives (such as using opacity instead of radius for encoding scores, using different shapes to represent beer styles instead of colors, and more) were considered but unemployed as they didn’t provide clear and neat representations on the map.
To be honest, the overall development process was pretty rough for both of the students as we are new to javascript, D3 and front-end programming. Naturally, learning the necessary skills to create and present the visualizations took a long time, but we were able to come up with encodings and design decisions relatively swiftly. Yo-whan Kim took care of most of the data cleaning and augmentation using Python, while Hyeyoung Shin focused on exploratory data analysis and further cleaning using Tableau. Both worked collaboratively on the visualization design and implementation. HTML/CSS styling was mostly done by Yo-whan, and necessary research for data hierarchy organization and explanations were handled by Hyeyoung. Overall, roughly 50 hours were spent developing this application.
Note: For the best experience, if you do not have a 2-column view (map on the left, filters on the right), expand the window width!
By: Yo-whan Kim (yowhan), Hyeyoung Shin (hyshin)