Iteration of Pseudo Viz with Data

100%

Iteration of Pseudo Viz with Data

✓ Published2🌍 Public

Last edited Feb 20, 2023

Created on Feb 20, 2023

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`.

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

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

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

78% 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…

Untitled

This pie chart visualizes user-vote outcomes from a small CSV dataset, mapping each user to a colored slice representing their winning choice. The chart is rendered as an SVG using D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, with the data loaded via `d3.csv`. Each slice is filled by browser color (from a fixed palette) and labeled with the user’s name, while a title reads “pie chart.” The code also includes an unused loop variable and a console log, but the visualization itself focuses on the proportional distribution of the two outcomes.

Ppeterwang6666

73% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example visualizes the distribution of wins and losses for a specific year (2022) using a pie chart, with green representing wins and red representing losses. The chart is rendered as an SVG using D3.js v7, loading data from a CSV file hosted on GitHub Gists. The code employs d3.pie and d3.arc to compute and draw the arcs, while d3.scaleOrdinal maps outcomes to colors. A legend and title are appended to clarify the categories and the year, with the data filtered by the target year before visualization.

Ppraveennayak1702@gmail.com

72% match

Loading thumbnail…

Pie chart ICE 7 Prasanth

A pie chart displays the scores of ten games from a CSV dataset, with each slice colored and labeled via a legend. The visualization uses D3 v5 methods including `d3.pie` and `d3.arc` to generate the segments, while `d3.scaleOrdinal` assigns colors to game names. Data is loaded asynchronously with `d3.csv` from a GitHub Gist, and the chart is rendered as an SVG with white text and legend values showing formatted score ticks.

PPrasanth

72% match

Loading thumbnail…

Cuisine Pie Chart - Pseudo Viz

This example transforms a five-cuisine order dataset into a pseudo pie chart. It uses `d3.pie` and `d3.arc` to compute and draw the chart’s arcs, with `d3.scaleOrdinal` assigning a categorical color scale to each cuisine. The visualization is rendered as an SVG group centered within a 900x500 canvas. While the code imports various other chart primitives (e.g., circle, rect, symbol) from separate modules, only the pie chart function is executed, producing a static, labeled donut-like chart without interactivity.

Jjjlaber

72% match