T20 Cricket Player Performance Analysis

100%

T20 Cricket Player Performance Analysis

✓ Published0🌍 Public

Last edited Mar 1, 2026

Created on Mar 1, 2026

This interactive scatterplot visualizes T20 cricket player performance data loaded from a local CSV file. Each circle represents a player positioned by two numerical attributes, with clicking a circle highlighting it in white. The visualization is built with React and D3 v7, using the `csv` parser to load data and `scaleLinear` functions to map coordinates. A ResizeObserver in a custom hook tracks container dimensions, and SVG circles are rendered with click handlers that update the selected state.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This React-based visualization displays two D3 scatter plots comparing cricket player statistics—Runs versus Strike Rate and Wickets versus Balls Faced—with color-coded points by match type (T20, ODI, Test) and tooltips showing player names. It loads CSV data via `d3-fetch`’s `csv` function, transforms numeric fields with JavaScript’s unary plus operator, and renders SVG circles using `d3-scale`’s `scaleLinear` and `scaleOrdinal` for axes and color encoding. Axes are generated with `d3-axis`’s `axisBottom` and `axisLeft`, with the reusable `plotScatter` function invoked twice in a `useEffect` hook.

Ssdarsi2404@gmail.com

81% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes cricket player statistics, comparing runs against strike rate or wickets against balls faced. Users toggle between the two views via buttons. Built with React and D3, the chart uses d3.csv to load remote data, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom/d3.axisLeft for axes. Circles are colored by match type (T20, ODI, Test) with hover tooltips, rendered as SVG with a legend.

Ssdarsi2404@gmail.com

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

79% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes T20I cricket batting leaders, plotting total runs against batting average for individual players. The component groups players into low, medium, and high run-scoring tertiles, which are distinguished using an ordinal color scale based on `d3.schemePuBu`. The code loads remote CSV data via `d3.csv`, applies custom row parsing to extract player countries, and implements a configurable chart component with settable accessors for dimensions, margins, and data values. The plot renders as SVG with axes generated through `d3.axisLeft` and `d3.axisBottom`.

AArun Kumar M

79% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization displays T20I cricket batting statistics as a scatter plot, with points colored by tertile groups of total runs scored using a sequential PuBu color scale. A cycling animation updates both axes every three seconds, showing different statistical pairings like Runs versus Batting Average, Strike Rate, Centuries, Fifties, and Sixes. The code imports data from a CSV file, uses the reusable scatterPlot module with D3’s scaleLinear, axisLeft, and axisBottom APIs, and applies ordinal color scaling with d3.scaleOrdinal and d3.schemePuBu.

AArun Kumar M

78% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization gallery explores cricket player statistics through four distinct chart types. The main scatter plot demonstrates a reusable D3 component with an animated sequence that cycles through different x-axis attributes every two seconds, using `d3.scaleLinear` for axes and `d3.interpolateBlues` for color encoding runs scored. Additional views include an area chart showing strike rate magnitude, a line chart tracking performance trends, and a pie chart displaying milestone distributions. All charts pull from a remote cricket dataset and render as SVG with D3 v6, allowing users to switch between visualizations via a navigation menu.

AArun Kumar M

77% match

Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000

77% match

Loading thumbnail…

Activity6_Question3

A scatter plot displays cricket player statistics, showing matches played on the x-axis and total runs on the y-axis. Each circle represents a player, with colors assigned based on country using `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization loads CSV data via `d3.csv`, uses `d3.scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and renders circles as SVG elements with fill opacity for readability.

Ddandudivya98@gmail.com

77% match