Designing our visualisation

Our research question & visualisation journey

What combination of categories make up great games?

“new” standard |xx — — — -o — — — -| novel

The Corona pandemic of last year and the lockdown influenced people to play more games. Therefore, this dataset of 2020 is novel in the sense that since we are playing a lot of games while we have to stay home to see what kind of games are similar or which category combination is a great one. We are not going to use standard designs to visualise the data, so in this aspect it could also be regarded as novel.

“useful”: not useful |xx — — — -o — — — -| useful

The pandemic is still going on and people are in need of new games. This visualization of the boardgame dataset should be a help to find a new game based on their categorical preferences and maybe bring a bit of fun to the searcher.

“feasible”: simple |xxxxx — — — -o-xxx| impossible

With our upcoming designs we aim to answer the research question and much more. The planned interactivity and custom visualizations require us to use D3.js, svelte or Vega which will be a challenge in itself since no one in our group has worked with javascript before, so we rate our chances for success in the upper quarter of the scale. The programming and implementation will be a game in itself, albeit a long and tricky one.

Designing our visualisation

For visualisation of our board game data, we organised two brainstorm sessions. All of us tried to think about various ways to visualise the data and drew some sketches, which we shared on our miro board (https://miro.com/app/board/o9J_lOomW_o=/). Some of these initial sketches are shown below. We divided the sketches into different categories, and then thought of ways to combine the sketches. The main ideas that popped up were visualisation for showing a network of categories/mechanics, visualising our data in a ‘board game’ manner and visualizing missing data. After some time to let the ideas sink in, we did another brainstorm session, further expanding the ideas and graphs we already had.

Overview of our miro board

Initial plots

Ludo Board(a) and circle plot(b)

Because we are dealing with board games, what better way to display them than with a board game? The game “mens erger je niet” (dutch) or ludo (English) came to mind. Here(fig. a) we can depict the categories with the playfield and order them according to rating, numbers of game in each category or whatever strikes our fancy. It came up in our first diverge phase and was built upon later on. The circle plot(fig. b) is a way to visualise the connection between multiple numerical variables in the dataset. This example shows a circle plot to visualise the difference between different rated games for different numerical categories(Nr. of players, avg. playtime).

‘Jellyfish’ Network plot(a) and pawn plot(b)

In figure a, we could put all the categories on a circle and connect them inside the circle if they have games in common. Surrounding this circle, we could put a circle with all the possible mechanics and connect them to categories if the mechanic occurs in a game included in that category.
This pawn(fig. b) combines several numerical variables in one figure:

• The height of the pawn: minimum/maximum/average number of players
• The width of the pawn: the minimum/maximum playtime
• The length of the stripes around the head: the weight (= difficulty) of the game(s)
• The haircolor: the publication year (grey if older game, black if more recent)
• The color of the pawn: average rating

Combining sketches

To show some details when looking at the connections between the different categories and the mechanics used in the categories, another visualisation can be used. For example, we could use the circle plot to show the numerical variables from that category. Another possibility is making a dice with on each side the distribution of a numerical variable, or some other visualisation for separate numerical variables derived in the diverge phase. Finally, to emphasize the subject of the overall plot with the connections clearly, namely board games, we could try to make the edges resemble paths in a “ganzenbord” game board.

The pawn could be used to navigate the “mens erger je niet” (ludo) board. The meeple would be placed on the board, in a location which represents a certain category or mechanic. Averages of different attributes relating to the games in this category/mechanic would be displayed by the meeple. The location of the categories and mechanics on the gameboard would be determined by a ranking eg. the highest rated categories and mechanics on the top and the lowest rated categories and mechanics on the bottom. Another variable eg. weight (= game difficulty) could be used to determine the placement on the left/right axis.

Another idea is to combine the two previous ideas into one, namely making a ludo board with the categories on the outside and the mechanics on the inside. The network then represents the categories that are shared in at least one game, and we could color all the mechanics that occur in a game in that category.

Alright, Nuf(f) (scale) said!