Intermediate implementations
--
As we mentioned in our previous blog post, our programming/implementation ‘game’ has finally started. In this post, we describe the first steps we made in visualising our board game data design.
Adjusting the dataset
In order to visualise the links between the categories, we needed to change the structure of our data file. We did this with a python script that searches for all potential combinations between two categories. Descriptive characteristics of games which have the combination of these two categories are also collected. The output csv file has the following structure:
Svelte: This is the way!
For our implementation we went with svelte after having a look into different tutorials for our suggested libraries.
We were convinced by two comprehensive tutorials provided by the svelte community itself and the teaching staff. Also, after discussing our plans for the implementation, the staff suggested svelte would be the best choice. Svelte is a powerful tool for building web pages but it also excels at visualizations.
Ludo board and coordinates
We managed to make a svelte file that draws a cross of a specified size with a colour gradient that represents the basis of our Ludo board.
Further, we made a point generating function that generates coordinates of all the points in the Ludo board, based on the number of points on a side. For example, on the left we have all points displayed for 5 points at the top side, and at the right we have generated them for 10 points. The coordinates are generated top to bottom, so we can use these and assign them to categories that are sorted in descending order by average rating, so we will have the highest rated categories on top of the ludo board and lower rated ones at the bottom.
Connecting categories
Above the concept to get the highlighting between connected categories is shown. The dot positions and category names are arbitrary for now. By clicking on a specific category a line between two neighbouring categories appears. This could be adapted to highlighting adjacent categories or even show some additional information. In this example the thickness of the line indicates the shared games between the categories and the inner grey circle shows the amount of games in this category proportional to the overall number of games in the dataset.
Where to go from now
We have some separate parts of our implementation programmed and working. So the next logical step is to get it all working together and build upon that.
After discussing our implementation up until now with our teaching team, we got some helpful suggestions. One was to implement a way to show all possible connections between games at the same time (using semi-transparent lines/an overview plot). We could make these connections using Bezier curves between categories, and perhaps join overlapping lines to improve visibility. We should also find a way to show the summary statistics per category somewhere on our visualisation.
