The Game Map

https://jumanafm.github.io/retro-games-viz/

Screen Shot 2020-11-25 at 10.43.01 PM.png

Screen Shot 2020-11-25 at 10.43.29 PM.png

Screen Shot 2020-11-25 at 10.44.01 PM.png

Role

Developer & Designer

Design Rationale

For this visualization task I wanted to explore a fun and playful interaction and I chose to explore the history of video games. To keep things interesting and informative, I explored copies sold by gaming consoles, genre and video games and compared those over time and location. I chose to compare the top 30 games in each genre with sales greater than 100,000 copies globally. I looked to for the most comprehensive dataset I could find publicly available and found this list on Kaggle based on VGChartz. This data set contains a list of video games with sales greater than 100,000 copies. For each game we have the console along with the game genre and year of release along with ratings.

Data Cleaning and Prep

In order to understand the data, I first visually explored the dataset on Tableau. I noticed outliers in the data that didn’t make sense when I did a plot overtime. For example, for PlayStation 2 I found a game that had the date of release as 1980 which is impossible since the console was manufactured much later in the early 2000. I had to manually search for some of the games and fix some of the dates. Another issue with the data that I discovered more after sharing a draft prototype of one visualization with some colleagues is the abbreviations used for the gaming consoles. I have some domain knowledge so it was intuitive for me to read and recognize different consoles but other might have to read the full name to recognize the console. In the dataset there are 31 gaming consoles and I manually fixed the naming of the ones that were abbreviated.

Ideation and Stories from the data

The dataset has information about copies sold of games. For each game we have information about the game including sales in different continents. Along with that we have: game console, genre of the game, publisher, year of release and different type of ratings. I particularly was fascinated by how games and consoles were doing differently in different continents. Specially, North America (NA) and Japan (JP). Also, the genre was noticeably different. Role-playing games do great in JP as opposed to action and sports game that dominates the rest of the world. I wanted to convey those insights in the visualization, but with more playfulness and interaction. I chose to go with an 8-bit style experience while maintaining readability. I ignored rating since it was not connected to location and was not available for older games.

Interaction Design

When I first explored the design space, I experimented with using a multiple connected chart for each region. But the data is rich, and each game has more information that needs to be further explored. That approach didn’t allow for further exploration. So, I experimented with multiple visualization patterns as we dig deeper: treemaps for console and genre, then bar chart for the games. However, we have many games and having different pattern within the same experience felt disconnected and didn’t convey the story. For this info viz my goal was to keep the view and interaction above the fold and within the same viewport without having to scroll to be able to compare or filter. I decided to use a treemap since it conveys the hierarchy I noticed in the data (each game belongs to a genre and a console) and the area of the treemap represents the number of copies sold. It’s easy to identify area and compare within a glance, but if that was tough, by just hovering you get the number. The affordance of interacting with a treemap is high and the change in style of the pointer also adds a cue to the user, as well as a call for action when users hover. I used color to differentiate the different consoles in addition to labels to give more emphasis on the visualization and the variations. The aesthetics of a treemap also matched the vision and story, 2D squares give the retro or gaming vibe that enhances the user the experience.

The channels used in the visualization that supported my decision to choose a treemap:

Consoles, genre, game names: Categorical à Color Hue and Spatial Region
Sales of units Quantitative à Size (Area)

Filters:

Years: Ordinal à control and filter
Region: Categorical à Global (total), NA, EU, JP, Other

This visualization supports direct interaction with the data and users can compare, explore and filter within one visualization.

In order to design the interactions, I kept in mind the natural explorative process performed by users to find knowledge [Wijk, 2005]. Users start with initial analysis by looking at the visualizations to gain knowledge then interact to explore even further. In order to support exploration, I provided multiple ways to interact with the data (visualizaiton), which are mentioned in [Yi et al, 2009]:

Users get to abstract or elaborate as they interact with the visualization. The first view gives an abstract general view of the share of copies sold by each console. Users can click and navigate deeper to get more details about a particular console, then genre then game. For each game users can click to get elaborate details about that game or hit a button which will direct them to the right search for more elaboration.
Users can filter data based on the time period they are interested in looking at. Or by choosing a specific console or genre. The timeline provides a cue to show users who filtered by console, the actual period of that console.
The visualization could be reconfigured by the user by choosing which location they are interested to see. The size of the blocks and the location change based on the number of copies sold in each location. That change in movement and reconfiguration directs user attention to the variation in the market and amplifies comparison.
Users can explore and go back and forth between different layers and time periods to see more options. They can also select a game of interest to view more information or to be directed to search for that on google to trigger their memory and get more information.

Along with those main interactions, users can get details on demand by hovering over the blocks to get the share of copies sold by that console, genre or game.

Development Process

I spent around 74 hours. The creative process took about 40% of the time due to multiple iterations and enhancement to the dataset, design pattern and interactions. I had to share my designs with colleagues to get feedback, synthesize that feedback and reiterate. The other 40% was spent trying to modify the libraries used and D3. The interaction part wasn’t intuitive and had to figure out workarounds to deal with the interactivity. Finally, the remaining 20% was spent on writing and finding resources to support my claims and figuring out the logistics.