Second intermediate implementation

As we mentioned in our previous blog post, we were going to combine all our different implementation elements, including the connections between the categories with the use of Bezier curves. Eventually, we ended up with the implementation shown below. The category name shows when you hover your cursor over a dot, the connections show on mouse click. The pawn shows in the upper left corner, with the top board games in that category also listed.

While combining everything, we first encountered some layering problems: the lines that represented the connections were rendered on top of the points and we couldn’t access the points anymore. After a discussion with the professor and the assistant team, we fixed this problem by rendering the points after the lines.
The tooltip represents the name of the category and a second SVG represents some details about the category itself by a pawn. This pawn was already discussed in the design phase as a way to represent the details, and an assistant from the teaching team made a svelte file for us with the path specifying the pawn (created with inkscape).

In order to access our data more easily, we also adjusted the python script to load our data in as a .json file. The .json datafile has the following structure:

[{“maincat”: “Civilization”, “neighbours”: [{“catname”: “Prehistoric”, “index”: 41, “bayesaverage”: 5.76, “count”: 6, “year”: 2018, “owned”: 996.17, “weight”: 3.02}]}]

The full dataset contains 125 538 boardgames. For our implementation, the size of the imported data is determined by the number of combinations between the categories, and thus independent of the number of included boardgames. We also included ranking of the categories based on the average ratings of all the games included in this category. This way, we discovered that there isn’t a lot of variability in the average ratings for the categories (maximum average rating ~5.9 versus minimum average rating ~5.2).

Where to go from now
We will remove the connections between the category and itself and add one boardgame for the category. We are also thinking about showing the list of categories it connects to on the right side of the board. Next, we also want to assign variables to the pawn, so one variable could be represented by the height, another one by the width, and yet another one by the head.