Final visualisation

Final implementation

Below, an example configuration of the final design can be found. The buttons (1) on the top control display which ordering of the dataset is shown. As a default “Rating” is chosen. The different choices are between Rating, Weight, Playtime, Players, Owned and Count. Beneath the buttons in the top left corner of the cross, an overview of the category as well as the name (2) is given, when hovering over a category on the board (3). The board itself displays the different categories and their connections to other categories (4). The width of the lines scales relative to the count of the games the hovered-over category shares with the connected category. In the upper right corner of the cross an overview (5) of the first three neighbouring categories is given. These are always ordered by a decreasing gamecount they share with the hovered-over category. The details displayed here include a picture of the highest rated game within the combination of the two categories. It also shows the number of shared games between the two categories, and their average weight and playtime. Below this overview section a small control panel (6) is provided in which some interactive functions can be controlled. The control panel gives an overview of the displayed categories and which ordering is selected. Furthermore, it includes two sliders with which the number of displayed points per edge (7) and the slicing (8) of the dataset can be selected. The standard value for the points per edge is three and the displayed slicing is zero. The slicing resets when a new sorting is selected. A checkbox (9) is provided to select if all connections should be shown on the board. It is unselected by default as it impairs performance significantly. In textform the selected ordering (10) and value sliders are given.

For the implementation of the pawn, we got a svelte file of one of the teaching assistants where a pawn is implemented with an adjustable width, height, color of the head and size of the head. For the head the color changes from a blue to red with increasing year. The radius represents the average weight of the selected category. The width displays the average maximum playtime in that category. The height gives the average number of players per game.

• Link to svelte app: https://dataviz-project.vercel.app/
• Code can be accessed by using ‘inspect’ on the visualisation.
• Link to video: https://youtu.be/cgxvo-ws1wk