Skip to main content
SimilarExport ZIP
100%

Week 5 Board Game Visualization Schnair

✓ Published1🌍 Public
112jack812@gmail.com
Last edited Oct 1, 2025
Created on Oct 1, 2025

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.

AI-generated description

Board Game Scatterplot

A React-based scatterplot visualization for board game data using D3.js. This project is designed to be hosted on vizub and uses CDN imports for easy deployment.

Features

  • Interactive scatterplot showing board game data
  • X-axis: BGG Rank (BoardGameGeek ranking)
  • Y-axis: Complexity Average
  • Domain and mechanics filtering with hover effects
  • Responsive design with proper margins and labels

Getting Started

Local Development

Simply open index.html in a modern web browser that supports ES modules. No build process or package manager required!

Hosting on vizub

  1. Upload all files to vizub
  2. The visualization will work immediately using CDN imports

Project Structure

  • App.js - Main React component containing the scatterplot logic
  • viz.js - D3.js visualization functions
  • axis.js - Axis rendering functions
  • axisLabels.js - Axis label rendering functions
  • data.csv - Board game dataset
  • index.html - HTML entry point with import maps
  • index.js - JavaScript entry point

Interactive Features

  • Domain Filtering: Filter games by category (Strategy, Thematic, Family, etc.)
  • Mechanics Filtering: Filter games by mechanics (Hand Management, Dice Rolling, etc.)
  • Hover Effects: Hover over checkboxes to highlight related points in green
  • "All" Toggles: Quick select/deselect all domains or mechanics
  • Visual Highlighting: Green points appear on top when hovering

Data

The visualization uses board game data from BoardGameGeek, including:

  • BGG Rank (rating-based ranking)
  • Complexity Average (game complexity rating)
  • Game domains (Strategy, Thematic, Family, etc.)
  • Game mechanics (Hand Management, Dice Rolling, etc.)

Technologies Used

  • React 19 (via CDN)
  • D3.js 7 (via CDN)
  • ES Modules
  • Import Maps for CDN dependencies

Data Source

This dataset contains data collected on board games from the BoardGameGeek (BGG) website in February 2021. The plot shows the top 250 ranked games with their BGG rank vs average complexity rating.

MIT Licensed

Similar vizzes

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
95% 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
95% 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
94% match
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
94% 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
92% 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…

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…

Final Board Game Visualization Schnair

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.

112jack812@gmail.com
88% match