Pseudo Viz with Data

100%

Pseudo Viz with Data

✓ Published2🌍 Public

Last edited Feb 20, 2023

Created on Feb 13, 2023

A stacked bar chart displays chess game outcomes for white, black, and draw categories, broken down by victory type: mate, resign, and out-of-time, with draws shown as a single segment. Green represents wins from time expiry, yellow shows resignations, and red indicates checkmate. The visualization uses d3.stack() to layer the bars, d3.scaleBand for x-axis positioning, and d3.scaleLinear for the y-axis. Data comes from a CSV loaded via fetch and parsed with d3.csvParse, with aggregates computed through a manual loop over game records.

AI-generated description

Pseudo viz for the chess dataset that shows the number of wins and draws for total games played based on the color. Green represents games won from the other player running out of time, yellow represents resign, and red represents a check mate. Ideally, I wanted to make this a donut chart but was having trouble so I started with a bar chart. One thing I would like to add is labels on the bar chart.

Source: http://using-d3js.com/05_06_stacks.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Viz

This visualization displays a stacked bar chart breaking down chess game outcomes by piece color: white, black, and draw. Red segments indicate checkmates, yellow represents resignations, green shows wins from timeouts, and blue marks drawn games. The chart uses d3.stack() to layer the outcome data vertically and d3.scaleOrdinal() for the categorical color mapping. d3.scaleBand positions the bars along the x-axis while d3.scaleLinear maps the y-axis to game counts. The data consisted of 1000 white games, 1200 black games, and 500 draws.

MMartha Cash

93% match

Loading thumbnail…

Iteration of Pseudo Viz with Data

This visualization presents a pie chart of chess game outcomes, showing the total wins for white, black, and draws. The chart breaks down win counts by victory type—mate, resignation, or out of time—though only total wins are displayed on the arcs, with a legend identifying each piece color. Built with D3 v7, the code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the donut chart from a CSV of chess game data loaded via `fetch` and parsed with `d3.csvParse`.

MMartha Cash

83% match

Loading thumbnail…

xxx

This bar chart displays the number of turns taken in chess games, broken down by victory status (mate, resign, draw, or out of time), using data loaded from a CSV file. The visualization uses d3.scaleLinear and d3.scaleBand to map turns and statuses, with d3.axisBottom and d3.axisLeft for labeled axes. Titles and axis labels are added as SVG text elements, and the bars are styled with a steelblue fill. The chart’s x-axis tick format converts large numbers into abbreviated notation using d3.format.

Ppeterwang6666

81% match

Loading thumbnail…

Chess Game Dataset Barchart Viz

This interactive bar chart explores a chess game dataset, allowing users to view distributions of wins by color, game termination type (such as checkmate or resignation), and opening move sequences via a dropdown menu. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` for axes, `flatRollup` to aggregate counts, and `schemeDark2` for bar colors. Data is fetched as a CSV and parsed with `csvParse`, with axes and menu components built using custom D3 modules.

MMartha Cash

81% match

Loading thumbnail…

Exploratory Data Analysis w/ Chess Dataset

This visualization explores a chess game dataset to determine which color piece wins more often. It presents the results as a simple bar chart, showing the count of games won by white versus black pieces. The code loads the data from a GitHub-hosted CSV file, processes it using D3's `flatRollup` function to aggregate win counts by winner, and then renders the summary as JSON text in a `<pre>` element. The visualization uses D3 v7 and demonstrates a basic exploratory data analysis workflow with a minimal, functional interface.

MMartha Cash

77% match

Loading thumbnail…

Fork of CS 360 A2 bar chart

This bar chart visualizes the distribution of chess game outcomes from a CSV dataset loaded via p5.js’s `loadTable`. It shows counts for four victory statuses—mate, resign, draw, and out of time—with bars drawn using p5.js `rect` calls on a 500×500 canvas. The code iterates through the table’s rows in `setup()` to tally occurrences, then renders vertical bars in `draw()`, including a small decorative ellipse. The data is sourced from a GitHub-hosted CSV file, and the visualization uses only p5.js core APIs for loading and drawing.

AAlark Joshi

76% match

Loading thumbnail…

Chess Game Dataset Histogram Viz

Three interactive histograms visualize a chess game dataset, showing the distribution of average player ratings, the absolute rating difference between players, and the number of turns per game. Each plot uses `d3.histogram` with adjustable bin counts via HTML number inputs, and bars transition smoothly using `transition.attrTween` and `d3.axisLeft` for updated scales. Data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`. The visualizations render as SVG with a shared axes module for consistent labeling.

MMartha Cash

73% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the victory status of chess matches, plotting population values against country names. Built with D3 v5, it uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axes rendered via `axisBottom` and `axisLeft`. The data is loaded from a CSV file using `csv`, with population values multiplied by 1000. The chart features customized axes, including a tick format that abbreviates large numbers, and applies a steelblue fill to the rectangles via CSS.

Ppeterwang6666

71% match