Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ssharathchandrareddymuthyam
Last edited Oct 27, 2025
Created on Oct 27, 2025
Forked from HTML Starter

This dark-themed scatter plot visualizes cricket player performance, plotting StrikeRate against Runs with points colored by player role. Built with D3 v7, it loads CSV data from a GitHub gist and renders an SVG chart with axes, legend, and interactive tooltips. The visualization uses `d3.scaleOrdinal` for role-based coloring, `d3.extent` for scale domains, and mouse event handlers to display player details on hover.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

A dark-themed D3 v7 pie chart visualizes the sum of wickets by player role (Batter, Bowler, All-Rounder, Wicketkeeper) from a CSV of 150 cricket records, mapping roles to fixed colors via `scaleOrdinal`. Slices are drawn with `pie()` and `arc()`, and labels appear inside large slices while small ones use outside callouts. The SVG is animated through a `transition()` on slice paths, with a side legend built using D3's selection API.

Ssharathchandrareddymuthyam
90% match
Loading thumbnail…

Fork of HTML Starter

This example displays summary statistics and a sample record from a CSV dataset of Indian cricketers on a dark-themed page. It visualizes the data by fetching a local `data.csv` file and using `d3.csvParse` to parse the text, then displaying the file size, row count, and column count within a styled summary card. A single row's player name, role, matches, and runs are shown in a separate sample box. The page also includes a decorative SVG illustration of a cricket bat and ball, and uses D3.js v7 methods like `d3.select` to update the HTML content dynamically.

Ssharathchandrareddymuthyam
87% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes summary statistics from a dataset of Indian cricketers, displaying file size, row count, and column count in a styled HTML card, alongside a sample player record. After fetching the CSV from a GitHub gist, the code uses D3 v7’s `d3.csvParse` to parse the text and `d3.select` to update the DOM with the computed values. An accompanying inline SVG depicts a cricket bat and ball as decorative artwork.

Ssharathchandrareddymuthyam
86% match
Loading thumbnail…

Fork of Player Statics using reusable scatter plot

This interactive scatter plot analyzes cricket player statistics, cycling through four attribute pair comparisons such as Runs versus Strike Rate and Matches Played versus Player of the Match. Built with D3.js v7, it renders SVG circles with smooth animated transitions between datasets, using `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is fetched via `d3.csvParse` from a remote gist, with a hover tooltip displaying player details.

Ssdarsi2404@gmail.com
85% 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
85% match