Skip to main content
SimilarExport ZIP
100%

Final Board Game Visualization Schnair

✓ Published0🌍 Public
112jack812@gmail.com
Last edited Dec 2, 2025
Created on Dec 1, 2025

An interactive scatter plot of board game data from a CSV dataset, visualized with D3.js and React. The visualization displays games by BGG rating and complexity, with color encoding by domain or numeric attributes, and supports filtering by game domains and mechanics through a control panel. Users can switch between scatter, sparkline, and bar chart views, while axes and labels render through custom D3 modules. The responsive canvas automatically resizes based on window dimensions, with hover effects highlighting selected categories across the visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Week 11 Board Game Visualization Schnair

This interactive scatterplot visualizes board game data from BoardGameGeek, plotting over 300 games by user ratings, complexity, rank, and other attributes across selectable axes. Users filter the five primary game domains and ten mechanics through toggle buttons, while points are color-coded by domain or numeric attributes using either standard or colorblind-safe palettes. The visualization also supports switching between scatterplot and sparkline views, with React managing the UI state and d3.js handling scales, axes, and SVG rendering through modular helper functions. Filters apply dynamic data subsetting, and hovering highlights specific game categories for comparison.

112jack812@gmail.com
91% match
Loading thumbnail…

Week 13 Board Game Visualization Schnair

This interactive scatterplot explores board game ratings and complexity, letting users filter by game domain and mechanics while switching between scatter, bar chart, and sparkline views. It supports multiple color mappings and colorblind-safe schemes. Built with React and D3 v7, it uses modules like `scaleLinear`, `scaleSequential`, `scaleOrdinal`, `interpolateRgb`, and `extent` to handle scales and color gradients, with responsive sizing and interactive axis labels. Data comes from a semicolon-delimited CSV of top board games.

112jack812@gmail.com
91% match
Loading thumbnail…

Week 12 Board Game Visualization Schnair

This interactive visualization explores a dataset of board games, showing how each game relates across user-chosen axes such as BGG rating, complexity, and play time. Users can filter games by domain and mechanics, switch between scatterplot, sparkline, and bar chart views, and toggle color schemes for categorical or sequential data. The visualization is built with React and D3 v7, using `scaleLinear`, `scaleOrdinal`, `scaleSequential`, and `axisBottom`/`axisLeft` for rendering. Data is loaded from a semicolon-delimited CSV and filtered dynamically based on user selections.

112jack812@gmail.com
91% match
Loading thumbnail…

Week 9 Board Game Visualization Schnair

This scatterplot maps board games by BGG rank and average complexity, encoding each game as a circle. Users can filter the games by selecting from lists of domains and mechanics, and hover over these lists to highlight matching games. The visualization supports coloring points by domain, with options for regular or colorblind-friendly palettes, or by numeric values such as year and playtime using sequential gradients. Built with React and D3.js (v7), it leverages D3's `dsv` parser for data loading, `scaleLinear` and `scaleOrdinal` for scaling, with `interpolateRgb` for custom color gradients.

112jack812@gmail.com
90% match
Loading thumbnail…

Week 10 Board Game Visualization Schnair

This scatterplot displays board game data from BoardGameGeek, plotting BGG rank against complexity average for games published after 1995. Users filter points by selecting game domains and mechanics, with hover effects highlighting related entries in the visualization. React manages the filtering state while D3 v7 handles rendering through scaleLinear for axes and scaleOrdinal or scaleSequential for color mapping based on the chosen color scheme. Dropdown menus allow switching the x and y axes among fields like rating, rank, users rated, and year published.

112jack812@gmail.com
89% match
Loading thumbnail…

Board Game Visualization Prototype Schnair

This interactive scatterplot visualizes the relationship between the average rating and complexity of the top 250 board games from BoardGameGeek, showing a positive correlation between the two metrics. Built with React and D3, the visualization uses d3.dsv to parse the semicolon-delimited CSV data and renders axes and labels via d3.axisBottom, d3.axisLeft, and custom SVG text elements. The chart displays each game as a point positioned by linear scales, with margins and axis styling applied to improve readability of the 2021 rankings data.

112jack812@gmail.com
89% match
Loading thumbnail…

Week 5 Board Game Visualization Schnair

This scatterplot visualizes 250 board games from BoardGameGeek, plotting BGG rank against average complexity for each title. Users filter the dataset by selecting game domains and mechanics via checkboxes, with hover interactions highlighting matching games in green. Built with React and D3.js v7, the visualization uses `scaleLinear` for axes and a data-driven join pattern in `viz.js` to render and update circle elements dynamically. The filtering logic demonstrates both conjunctive and disjunctive selection behavior, where selecting all domains overrides mechanic filters.

112jack812@gmail.com
88% match
Loading thumbnail…

Week 7 Board Game Visualization Schnair

This interactive scatterplot explores the relationship between BoardGameGeek rank and complexity for top-rated board games, using data from a CSV file that includes game mechanics and domains. Users filter the dataset by selecting from lists of five game domains and ten mechanics, with the visualization updating dynamically based on combined criteria. Hovering over a domain or mechanic highlights matching games in black while graying out others. The visualization uses D3.js version 7 with React hooks, employing `d3.scaleLinear` for scales, `d3.dsv` for data parsing, and the idempotent `.data([null]).join()` pattern for rendering. Tooltips display game names on point hover.

112jack812@gmail.com
88% match