1

12jack812@gmail.com

@jackschnair·17 public vizzes

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.

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.

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.

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.

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.

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.

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.

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.

Loading thumbnail…

Boardgame Visualization Prototype Schnair

This prototype visualizes the distribution of board game categories across decades of publication, using a clustered bar chart to show counts for ten game domains per decade. The x-axis displays decades while each decade contains color-coded bars for domains like Strategy, Thematic, and Family Games. Data is loaded from a CSV using d3’s `dsv` parser and rendered with React and D3 v7, using `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position bars and assign colors. The visualization includes axes, labels, and a legend for domain identification.

Loading thumbnail…

Boardgame Visualization Prototype Schnair

This interactive chart visualizes board game data from BoardGameGeek, showing the distribution of game domains across decades from 1950 to 2020. The clustered bar chart displays counts for ten domain categories per decade, with color-coded bars and an interactive legend for filtering. Built with React and D3, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` for positioning and coloring, while `d3.rollup` aggregates the semicolon-delimited CSV data. Hover interactions on legend items enable user filtering of specific domains.

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.

Loading thumbnail…

Board Game Scatter Plot With Axes Schnair

A scatterplot shows the relationship between the average rating and average complexity of the top 250 board games from a BoardGameGeek dataset. The chart uses D3 v7’s `scaleLinear` and `extent` to map the data to a 960x500 SVG canvas, with axes rendered via `axisBottom` and `axisLeft`. The React app loads data from a CSV file using `dsv` and binds circles to each game with a unique ID key.

Loading thumbnail…

Board Game Scatter Plot Schnair

The scatter plot visualizes the relationship between the average rating and average complexity of the top 250 board games from a BoardGameGeek dataset. Each circle represents a game, positioned by rating on the x-axis and complexity on the y-axis, revealing a visible correlation. Built with React and D3 v7, the App.js file loads CSV data, parses numerical values, and passes it to the viz.js module which uses d3.scaleLinear and d3.extent to compute scales and render circles via selection joins.

Loading thumbnail…

Board Game Dataset Schnair

This visualization explores the top-ranked board games from the BoardGameGeek dataset, showing raw JSON data loaded from a semicolon-delimited CSV file. The code uses d3.csvParse with a custom semicolon parser to convert string values to quantitative numbers for attributes like rating, play time, and complexity. The visualization initially displays "Loading Data" before fetching and parsing the dataset, then renders the full array of game objects as formatted JSON text for inspection.

Loading thumbnail…

IMDB Dataset Schnair

This example demonstrates how to load and parse a dataset of the top 1000 highest-rated IMDB movies and TV shows using D3.js v7. It fetches a CSV file via the `fetch` API, parses it with `csvParse`, and converts numerical fields like `Released_Year`, `IMDB_Rating`, `Meta_score`, and `No_of_Votes` into numbers. The application displays the parsed data as a JSON string in a `<pre>` element, using a simple state management pattern to handle asynchronous loading. The code highlights initial data preparation steps, ready for further aggregation by genre or other visual exploration.

Loading thumbnail…

World Happiness Dataset Schnair

This example displays the raw World Happiness Report 2019 data in a simple text format. The visualization initially loads a CSV file containing happiness scores and related metrics for various countries, parsing the data into a structured format. It uses the d3.csvParse API to read the data, then displays the parsed JSON representation of each country's record. The code demonstrates a basic data-loading workflow with d3.v7, showing how fetched data transitions from an undefined state to a formatted output using select and join methods.

Loading thumbnail…

Schnair Fork of Circles with D3

This example displays two mirrored stacks of seven concentric circles, each with a distinct rainbow hue and uniform 0.7 opacity, on a green background. Using D3.js v7, the code binds an array of circle objects to SVG elements via `selectAll().data().join()`, setting each circle's position, radius, and fill color. The visualization is rendered inside a fixed full-viewport container, with dimensions derived from `container.clientWidth` and `container.clientHeight`.