Game Visualizer
an interactive visual aid for choosing a video game
Felix Gonda
Final Project Report
Visualization (CS 171)
Harvard University, Spring 2011
(Main Page) | (Download Applet) | (Run Applet)

                                                                                     School of Engineering 
Instructor      : Dr. Hanspeter Pfister                                                  & Applied Science
Teaching Fellows: Alberto Pepe                                                                 Spring 2011
Table of Contents • Introduction • Related Work • Approach • Data • Implementation • Results • Discussion • Acknowledgements • References Introduction Today, video games have become an integral part of our society. Many people spend countless hours playing games online and off-line as a past-time and sometimes as hobby. With the emergence of console gaming systems such as Microsoft XBOX 360, Sony PlayStation 3, Nintendo Wii and handheld devices, the number of games available to consumers have exploded in recent years making it rather complex to make informed choices of game purchases. This issue is further complicated with the fact that most of the newly-released games cost around $60, which is tough to afford and new gamers (especially casual gamers) find it extremely difficult to determine the right type of game to buy. This project presents an implementation of a visualization to alleviate this problem by providing an interactive visual aid for choosing a video game. The software analyzes the current state of video game ratings and sales and provides an application that quickly distills a universe of all video games based on user preferences to a small set of games from which a user can select their game of choice. Target Audience: The target audiences of this visualization are video game users and video game developers. Video game users can find the visualization indispensable in quickly narrowing their game choices and comparing against other games. With the additional at-glance information of quality and sales with respect to other games, gamers are equip with more knowledge to enable to them to make better game choices. Game developers can find the visualization a good tool for analyzing the state of the game industry and observe how developers qualitatively and productively fare against each other. Tasks: To arrive at the game of choice, the visualization examines the factors influencing a person choice of game. Although there’re many factors that affects a person choice of a game, the most fundamental factors includes the following: • The type of gaming system. Fundamental to choosing a video game is the type of gaming system for which the game is chosen. Generally when a person decides to purchase a game they know what platform they’re purchasing for. Therefore, we can query the system for all games of a given gaming system (platform). • The quality and sales of a game For knowledgeable game users, the quality of a game (critic and user reviews) drive their choices; as these users generally participate in online discussions and regularly monitor gaming sites to scope out user and critic reviews. Casual game users, on the other hand, are usually driven by the popularity or sales of a game; as a result, they tend to lean toward the best selling games irrespective of quality. Therefore, we can query the system for all highly quality as well as best selling games. • The flavor or genre of a game This is perhaps one of the most fundamental and unpredictable aspect of choosing a video game. Some people are very strict about the genre of the game and tend to avoid other genres all-together. For instance, many parents strictly purchase sports games for their children because of non-violence while hardcore gamers tend to go for first person shooters which contain the most violence and high-level action. Therefore, we can query the system for all games of a specific genre. • Publisher of a game There're many people who are devoted fans of certain publishers, and their choices are driven by who develops the game. For example, Infinity Ward is one of the most famous first person shooter studios with their flagship product "Call of Duty" - many users will wait for hours in line to purchase their games. Therefore, we can query the system for all games of a specific publisher. • Release date of a game Sometimes people are interested in games released in a specific time period for research or other specific reasons. For this type of user, the release date of the game is more important than the other factors. Therefore, we can query the system for all games released in a specific time period. With these factors and tasks, the visualization can narrow the universe of all games to a small set of games from which the user can then select their “game of choice”. Data: The main data used by the visualization is user and critic reviews of games released between the year 1994 and 2011. The data is further augmented by game sales information for the same time frame. Related Work My biggest inspiration was the LaNet-vi visualization ( which generates 2D static images of large-scale network based on k-core decomposition algorithm. I really like their idea of visual encoding of network structures and wanted to apply a similar technique to visualize the universe of video games. Although the LaNet-vi is cool looking, it is not interactive, and it is designed specifically for decomposition of large-scale networks. Approach Design: To provide an effective visualization, I wanted to break-away from the notion of visualization data using graphs and charts and instead leverage the technique of pop-out to reveal patterns and relationships in the data. I wanted the end user to feel immersed in the universe of video games at all times and yet be able to distill the universe to a small set of games from which they can choose their game of choice. The design encapsulates two interactive components that are essential to the analysis of all video games. These components are: (1) Game Universe This is the universe of all video games. It is represented as a radial layout of all games released between the period of 1994 and 2011. At the center of the layout are the highest rated games and at the periphery are the lowest rated games. The game universe encodes data elements as follows: - A circle represents a single video game - The color of a circle represents the quality of the game with green being highest quality and red being lowest quality. Nuances of yellow between red and green represents average quality. - The distance of a circle from the center of the universe represents the relative quality of the game with respect to other games. As such the highest quality games are at the center. A game (circle) in the game universe can be expanded to reveal detail information. The expansion de-emphasizes all games in the universe and pops-out the selected game to reveal a detail view of the game and relation to similar games. (2) DecisionTree The second component of the visualization is a decision tree which encapsulates user choices and provides filters to distill and analyze the universe of games. It consists of the following filters: - Platform - Genre - Publisher - Quality - Sales - Release Date Data Source The data used by the visualization was acquired using the process of scraping from the data sources described below. The data scraping software consisted of python scripts and uses the Beautifulsoup library provided in earlier homeworks. The script connects to the websites, extracts the data and performs a postprocess to clean and merge the data into a single tab delimited file which is then used by the visualization. Below is a description of the data represented by the visualization and the sources of this data. • Data Source I: From this source, the following data is extracted - Name of the game: this is the actual production name of the game - Meta critic: this is the critic score of the game by professional organizations. The visualization uses this data to compute the final quality score of the game. - User rating: this is the score assigned by actual users who played the game. The visualization uses this data to compute the final quality score of the game. - Publisher name: this is the name of the organization that released the game. It is used by the visualization as a filter. - Platform: this is the type of gaming system for which the game is developed for. It is used by the visualization as a filter. - Release date: this is the actual shipping date of the game and it is used by the visualization as a filter and informational. • Data Source II: From the site, the following data is extracted: - Game sales - this is the actual amount in dollars since the release of the game. It is used by the visualization to filter best selling games. - Genre of game - this is the flavor of game and it is used by the visualization to filter games by genre - Name of the game - used to cross reference with data extracted from meta critic site Implementation I chose processing as the main language of implementation for the visualization because of its simplicity and power in implementing beautiful interactive elements. For user interface, I wanted a very simple, professional, and engaging user interface that would support and communicate my visual concepts seamlessly without sacrificing interactivity. After several iterations, I found the right formula and was able to write code for all interactive elements from scratch. The other consideration is the type of input the end user will use to interact with the visualization. For this, I chose the mouse as the only input concept. Mouse hovering and clicking are the two methods of interacting with the visualization. Results
Scenario 1: universe of all games. The first usage scenario of the visualization is when the software is run with no filtering. In this case, the visualization shows the universe of all games as depicted below. The user can mouse over to see the name of the games or click to view detail information.
Scenario 2: filtering games by PS3 platform In this scenario the universe of games is distilled to PS3 games only. The user has selected the PS3 platform and is marked in the decision tree with selection metaphor.
Scenario 3: game view screen Clicking on a game causes the game to be selected and expanded into a game view window. This window shows detail information about the game and also shows the highest quality games matching the user criteria. In this particular case the user selected "Kung Fu Panda" from the list of games for the publisher "Activision". You can see "Activision" highlighted in the publisher list. In this view, all options are muted (disabled) except for the game view window. The user can return to the game universe view by right clicking.
The system is implemented in processing and uses no external library, as such, the only performance
consideration is the drawing of interactive elements.  I've tested the visualization on both Internet
Explorer 9 and Google Chrome with no issues.  The visualization runs as an applet.

Peer Feedback:
The feedback I received from my peers were generally positive. A lot of the suggestions I received have
already been addressed such as the ability to filter games using genre and making user selections more
prominent than other other games.  One suggestion that I could not incorporate into my application was
the actual price of a game.  I found this very difficult to extract because the gamestop web site does
not provide a good means of viewing this data - and furthermore because the price of a game is constantly 
changing I would to incorporate a live component to my visualization which would require time to implement
and test.  To mitigate this issue, however, I have direct links of the game details and sale info that 
the user can browse to directly from the visualization and connect to sites for purchasing.

I went through several design iterations before settling with the right and appropriate design for my 
problem domain. My initial design and problem domain was too broad and was not appropriately addressing 
my central question (which is how to choose a game with the visualization). Below is a description of some
of the designs I went through.

Design I: graphs and charts 
This design consisted of distribution graphs of games by publishers, years, quality and sale.  
The user could filter games by platform and quality.  The user could also mouse over games and view detail 
information that included the breakdown of ratings by critics and users.  The problem with this design is 
that it does not really help the user choose a game, it rather portrays the outlook of the gaming industry 
and provide information that is relevant to analyst instead of game users. So, I terminated this design.

Design II: relational graph 
This design consisted of a single vertical distribution graph of games by publishers. The publishers are
arranged in descending order of number of games produced (which is represented by the bar graph)

Each game is encoded as a circle filled with a color.  The color of the circle represents the quality of 
the game and arrow from the game to the publisher represents the relationship of the game to the publisher.
If user mouse over a game, a detail information is showned in a different screen.  Although this design 
was better than the previous, it still wasn't effective. First, it poses screen real-estate issues as the
number of games increases.  Second, it transitions the user to a different screen to view detail information
about a game which means user has to be constantly clicking in order to narrow down their choice.  Other
issues includes the fact that the number of games produced by a publisher does not really help the user select
a game.  So, I terminated this design.

Design III: radial layout based on game quality  
After spending a few days researching other techniques of visualizing data, I decided to breakaway from 
the techniques of graphs and charts and think of a way to represent the universe of video games in a way 
that is visually appealing yet interactive.  I came across the LaNet-vi visualization tool which generates 
static images of network structures based on a k-core decomposition algorithm. I decided to design my 
visualization around this concept and based the layout on the quality of games.  As I papered-out my
design, I added filters and immediately started to see patterns emerge.  For example, I could filter 
the universe of all games with platform and visualize those specific games without interfering with user 
interactivity. Long story short, this is the design I settle with, and the rest was just expanding on 
the idea and making it communicate the message of the visualization effectively. 

Strengths of the Design:
   • Every data element is clearly encoded with legends and labels
   • Effectively represents the universe of video games in an appealing and interactive form.
   • Ability to visualize many game parameters at once, which equip user with more knowledge
     that enables them to make educated choices of their games.       
   • Seamless transition between "game universe" view and "game" view.    
   • User is able to quickly choose a game with one click and compare game against other games.
   • Very simple and engaging user interface and controls that seamlessly reinforces the message of 
     the visualization.
   • Selection metaphors are implemented and clearly shows the differences between data elements
     selected by user and those which are not.
   • All filters implemented support the data elements represented in the data and effectively distill
     data to user choices.     
   • Includes a tutorial screen that explains the visual concepts and mapping used in the visualization
     and the means of input to interact with the software.
   • Provide direct link to game detail and sale information.     
   • One of the unintended consequences of the visualization is that it reveals patterns which are 
     useful beyond the target audiences. For example, by filtering data by sales and quality, marketting 
     personnel can use the data to strategically position a game release and set internal expectations
     for the company and external expectation for consumers.
Weakness and lessons learned:
   • No ability to view price of game
   • No graphs and charts - it would be nice to include some level of trending as it could be useful
     to other type of users.

Future Work:
   • Add ability to visualize the universe by sales (currently its only defaulted to quality)
   • Add ability to track user selections for comparision purposes
   • Add ability to retrieve live price information
   • Fix all bugs that I missed during my testing   
   • Dr. Hanspeter Pfister for teaching Visualization class
   • Alberto Pepe for supervising project and giving feedback
   • Hiro Hattori for giving valuable user and design feedback
   • Jeff Wilson for user feedback
   • Flαvia Medina da Cunha for peer review feedback
   • Gerishom Gimaiyo for peer review feedback
   • Angeline Baniqued for peer review feedback
   • Han He  for peer review feedback
   • Matthew Gladney for peer review feedback


Research Materials & References:

(1)   Visual Thinking: for Design   
      Morgan Kaufmann; First Edition edition (April 18, 2008)

(2)   Processing: A Programming Handbook for Visual Designers and Artists
      The MIT Press (September 30, 2007)

(3)   Ben Fry.

(4)   Processing Language
(5)   Large Network visualization