Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published3🌍 Public
Ssharathchandrareddymuthyam
Last edited Oct 14, 2025
Created on Oct 14, 2025
Forked from 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`.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

This scatter plot compares batting average against strike rate for a dataset of Indian cricketers parsed from a CSV file. Each circle represents a player, positioned by their average on the x-axis and strike rate on the y-axis, with hover tooltips revealing individual stats. The visualization uses D3 v7 to load the data via `d3.csv`, scale values with `d3.scaleLinear`, and render the axes and SVG circles. It also includes labeled axes and a chart title to structure the comparison.

Ssharathchandrareddymuthyam
89% match
Loading thumbnail…

Fork of HTML Starter

This bar chart displays the average runs scored by cricket players, grouped by their country of origin. Built with D3 v7, the visualization aggregates data from a CSV file using `d3.rollups` and `d3.mean` to compute country-level averages. The SVG rendering uses `d3.scaleBand` for the categorical x-axis and a sequential color scale to encode the average runs value, with interactive tooltips appearing on mouseover.

Aankitgoudpoodhari07@gmail.com
88% match
Loading thumbnail…

Fork of HTML Starter

This multi-series line chart compares the total runs and wickets of Indian cricketers against their number of matches played. The visualization uses D3.js v7 with SVG rendering, employing `d3.line` and scale functions to plot two separate paths for runs and wickets across the first 20 players. Each player is represented as a data point along the x-axis, with the y-axis scaled to accommodate both metrics. The chart includes axes with labels, a legend distinguishing the two series by color, and a title, all built using D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `append` methods. The data comes from the `ice_data_150.csv` file.

Ssharathchandrareddymuthyam
88% match
Loading thumbnail…

Fork of HTML Starter

This dark-themed visualization loads the Indian Cricketers CSV dataset via `fetch` and `d3.csvParse` with `d3.autoType`, displaying a summary card with file size, row, and column counts. Next to a mini SVG bar chart encoding Runs per Player, a decorative SVG cricket bat and ball is drawn using basic shapes like `circle` and `rect`. The chart uses D3 v7 selections such as `d3.select` for DOM manipulation, with axes and bars styled through CSS variables.

Ssharathchandrareddymuthyam
88% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot visualizes cricket player statistics from a CSV file containing attributes like runs, matches, and strike rate. It uses D3 v7 to render an SVG chart, automatically detecting numeric columns to map to X and Y axes. The visualization includes axes with labels, colored dots that represent categorical groupings when present, and an interactive tooltip that displays data values on hover. The chart uses d3.scaleLinear for axis scaling, d3.scaleOrdinal with d3.schemeTableau10 for categorical colors, and d3.axisBottom and d3.axisLeft for axis generation. Data is loaded from an external CSV URL via a Gist.

Ssharathchandrareddymuthyam
87% match