Skip to main content
SimilarExport ZIP
100%

Historgram V1

✓ Published0🌍 Public
MMartha Cash
Last edited Apr 19, 2023
Created on Apr 4, 2023

This interactive histogram visualizes chess game statistics from a CSV dataset, showing the distribution of average ratings, rating differences, game lengths, or turn counts based on a dropdown selection. A bar chart encodes the frequency of values across bins, with the y-axis labeled according to the chosen metric. The visualization uses D3.js v7, employing `d3.scaleLinear` for axes, `d3.histogram` for binning data, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded via `csvParse` and rendered dynamically through a custom `densityPlot` function.

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 Density: https://d3-graph-gallery.com/graph/density_basic.html

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
77% 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…

Histogram

This histogram displays the distribution of a numeric variable (price) from a CSV dataset loaded from a GitHub repository. The visualization uses D3.js v7 with an SVG rendering approach, where the `d3.histogram()` API computes the binning and thresholds, and axis scales are created with `d3.scaleLinear()`. Bars are appended as SVG rectangles, and the chart is responsive, redrawing on window resize with a debounce function. The design uses a dark background with steelblue bars.

DDattatrayPatil73076
74% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of horsepower values from a CSV dataset, with counts binned across a linear scale. The chart uses D3 v6 to implement the visualization, employing `d3.histogram()` to generate bins and `d3.scaleLinear` for both axes. Each bar is rendered as an SVG `rect`, and interactive tooltips appear on hover, displaying the bin’s range. The chart includes a titled SVG output and left-aligned axis labels, with bars filled in a solid blue color.

Pprateekvasi
74% match
Loading thumbnail…

Fork of Histogram

This interactive histogram visualizes the distribution of price data from a CSV file hosted on GitHub. The chart is rendered as SVG and automatically resizes with the browser window. The code uses `d3.histogram()` to bin the numeric values, `d3.scaleLinear()` for the x and y axes, and `d3.csv()` to load the dataset. Bars are drawn with SVG `rect` elements, colored steelblue, with a debounced resize handler that rebuilds the visualization on window changes.

RRavi Teja Bonam
73% match
Loading thumbnail…

histogram

An interactive histogram displays aggregate survey data grouped by student subject preference, with bars representing selectable metrics like average height, stress, or expense. Using D3 v5, a dropdown menu generated from the data fields triggers a selection change, updating the y-axis scale and re-rendering bar positions and heights via attribute updates. The visualization uses `d3.nest()` and `d3.rollup` to compute averages and sums from the JSON source, with axes created using `d3.axisBottom` and `d3.axisLeft`.

CChaeHyun-Kim
73% match
Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

AAbhishek Kumar
73% match