xxx — VizHub

SimilarExport ZIP

100%

xxx

✓ Published1🌍 Public

Last edited Dec 13, 2021

Created on Dec 13, 2021

Forked from Making a Bar Chart

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

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.

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.

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.

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.

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.

Loading thumbnail…

Fork of xxx

This bar chart shows the total number of turns grouped by victory status, using a horizontal layout with a linear x-scale and a band y-scale. Population data from the 2018 United Nations World Population Prospects is loaded via `d3.csv`, with values converted to thousands. The visualization customizes D3 axes using `axisBottom` and `axisLeft`, removes default domain lines, and formats tick labels with `d3.format`. SVG rendering is applied through D3 v5 selections, with margins and a title added programmatically.

Loading thumbnail…

new

This bar chart displays the number of hours required to beat each game from a dataset loaded via a CSV file. The visualization uses D3.js v7 to render SVG rectangles, with bars colored steel blue that turn orange on hover. It employs d3.csv to fetch data, d3.scaleBand for the categorical x-axis, and d3.scaleLinear for the numeric y-axis. Rotated axis labels and custom fonts style the chart, with axes formatted using d3.axisBottom and d3.axisLeft. The chart’s title and axis labels are added as SVG text elements.

Rranjithkmr598@gmail.com

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.