Data Visualization
With D3.js
To Project GitHub Page
Source code The D3.js script is incorporated inside the html file, you can access the scripts through the github link above or through browser inspect if you wish.
- Force-directed graph layout
- Interactive Line Chart
The dataset for this question was inspired by a reddit post about visualizing boardgames as a network, where the author calculates the similarity between board games based on categories and game mechanics where the edge value between each board game (node) is the total weighted similarity index. The visualization is an undirected graph dataset of boardgames, board_games.csv file (in the Q2 folder). You can drag and pin the nodes with a release, the rest of the node will remain dynamic movement. Unpin the nodes with a double click~
Using the same dataset, shows an interactive dotted linechart of boardgame ratings from 2015-2019, which displays a bar chart of the top 5 boardgames with the highest ratings below corresponding to the year and rating count of your choice. Both the barchart content and title are dynamic and it shows all boardgames if the chosen bin has less than 5 games.