You can translate the content of this page by selecting a language in the select box. But I suggest that the best display would be in English.
Spring, 2023

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
  • 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~

  • Interactive Line Chart
  • 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.