Fork of Simple Bar Chart

100%

Fork of Simple Bar Chart

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This polished bar chart displays categorical data from a CSV of Indian players, encoding values through bar height and a teal color gradient. Built with D3 v7, it uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for gridlines. Bars render as SVG rectangles with hover effects that trigger a tooltip showing the category and value. The chart includes axis labels and a clean, shadowed design, with data loaded asynchronously via `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example combines a bar chart and a line chart in a single SVG view to compare the total runs and batting average of the top 15 Indian cricketers from a CSV dataset. The bars, rendered with `d3.scaleBand` and `d3.scaleLinear`, show runs on the left axis, while a crimson line, plotted with `d3.line`, overlays average values on a right axis. D3 v7 axes, gridlines, and hover tooltips supplement the visualization, which loads data asynchronously via `d3.csv`.

Ssharathchandrareddymuthyam

84% match

Loading thumbnail…

Fork of HTML Starter

This example presents three linked SVG charts built with D3 v7 that visualize an Indian players dataset, loaded from a remote CSV URL. It shows a vertical bar chart of player runs, a scatter plot comparing matches played against runs scored, and a multi-series chart that combines bars for runs with a red line for batting average. The implementation uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `d3.curveMonotoneX`.

Aankitgoudpoodhari07@gmail.com

83% match

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the top 10 scores by Indian batsmen, with runs scored on the x-axis and player names on the y-axis, sourced from a CSV file embedded in the code. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for axes, `axisBottom` and `axisLeft` for tick generation, and custom formatting via `format('.3s')`. The SVG rendering applies extensive styling through CSS, including large green tick labels, red axis labels, and a green title, demonstrating axis customization.

Nnagamaheswar

81% match

Loading thumbnail…

Fork of HTML Starter

A bar chart from the D3.js visualization library shows the top 20 Indian cricketers ranked by their total runs scored, using data loaded from a CSV file. The visualization employs a categorical x-axis for player names and a linear y-axis for run counts, with data sorted in descending order and styled as steelblue bars. Built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the chart includes rotated player-name labels for readability and hover effects that change bar colors to darkorange.

Ssharathchandrareddymuthyam

80% match

Loading thumbnail…

Fork of HTML Starter

This bar chart displays categorical values from a remote CSV file hosted on GitHub. The visualization uses D3.js v7 to load the data with `d3.csv` and renders it as an SVG. The chart's y-axis is scaled linearly with `d3.scaleLinear` and includes nice tick marks, while the x-axis uses `d3.scaleBand` for categorical spacing. The code appends steelblue rectangles, rotates x-axis labels, and adds a title, with margins and axes positioned via SVG transforms.

Yyazneshpara2@gmail.com

80% match

Loading thumbnail…

Fork of Simple Bar Chart

This example shows the distribution of products across categories in a furniture dataset, using a bar chart to compare category counts. It fetches CSV data from a remote URL, parses it with `d3.csvParse`, and aggregates counts with `d3.rollup`. The visualization renders bars with `d3.scaleBand` and `d3.scaleLinear`, styled in steelblue, and includes axes via `d3.axisBottom` and `d3.axisLeft`. The SVG is created dynamically with `d3.create` and appended to the document body.

Ttejasviteegala@my.unt.edu

80% match

Loading thumbnail…

Fork of HTML Starter

This bar chart displays the value of each category, sorted in descending order. Built with D3 v7, it loads data from a CSV file via a Gist URL using `d3.csv` and `d3.autoType`. The visualization uses a band scale for categories, a linear scale for values, grid lines, rotated axis labels, and a tooltip that appears on mouseover.

SSYAM TEJ

80% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows total runs scored by individual Indian cricket players as a bar chart, with player names on the x-axis and run totals on the y-axis. The code loads data from a CSV file using d3.csv, then encodes the values through bar height and position using d3.scaleBand and d3.scaleLinear. Rectangles are drawn into an SVG container with a blue fill, and axes are rendered with d3.axisBottom and d3.axisLeft, with rotated player labels for readability.

Aankitgoudpoodhari07@gmail.com

80% match