an interactive visual aid for choosing a video game
(Main Page) | (Download Applet) | (Run Applet)
Final Project Report
Visualization (CS 171)Harvard University, Spring 2011
School of Engineering
Instructor : Dr. Hanspeter Pfister & Applied Science
Teaching Fellows: Alberto Pepe Spring 2011
Table of Contents
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.
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.
To arrive at the game of choice, the visualization examines the factors influencing a person choice of game.
Although therere 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 theyre 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
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
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.
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.
My biggest inspiration was the LaNet-vi visualization (http://xavier.informatics.indiana.edu/lanet-vi/)
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.
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.
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:
- Release Date
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: http://www.metacritic.com
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: http://www.vgchartz.com
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
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.
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.
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
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.
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