Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

Ssharathchandrareddymuthyam

90% match

Loading thumbnail…

Fork of D3 Starter

This pie chart visualizes the distribution of runs scored by individual cricket players, with each slice labeled by player name and colored via an ordinal scale. The chart is rendered as an SVG using D3.js v7, fetching CSV data from a GitHub Gist and parsing it with `d3.csvParse`. A `d3.pie` layout computes slice angles, while `d3.arc` generates the path geometry, and an interactive tooltip appears on hover for additional detail.

Ssdarsi2404@gmail.com

87% 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

86% 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

85% 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

83% 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

83% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive pie chart visualizes country-level data for 2022, loading CSV data from a GitHub gist via the `d3.csv` API. It uses D3 v7’s `pie()` and `arc()` generators to compute and draw SVG paths for each slice, with colors assigned by `scaleOrdinal` and `schemeCategory10`. Hovering over a slice or label changes its fill to orange, providing immediate feedback. The chart is rendered inside a static SVG container, with text labels positioned at arc centroids using `arcGenerator.centroid()`.

Mmukundakrishna.r@gmail.com

82% match

Loading thumbnail…

Fork of HTML Starter

A pie chart displays the distribution of 110 students across five grade categories (A through E), with labeled slices showing category counts and a legend describing letter-grade ranges. Built with D3.js v7, the visualization loads a CSV file, uses `d3.rollup` to aggregate student counts by category, and employs `d3.pie` and `d3.arc` to generate SVG paths. A color scale colors each slice, while labels and legends are added programmatically to the SVG.

Mmadalahyndavi123@gmail.com

82% match