Fork of CS 360 A2 bar chart

100%

Fork of CS 360 A2 bar chart

✓ Published0🌍 Public

Last edited Sep 5, 2022

Created on Sep 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

77% match

Loading thumbnail…

Pseudo Viz with Data

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.

MMartha Cash

76% 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

75% 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

75% match

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

72% 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

72% 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

71% match

Loading thumbnail…

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

70% match