Fork of Player Statics using reusable scatter plot

100%

Fork of Player Statics using reusable scatter plot

✓ Published1🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This example presents an animated, reusable scatter plot for cricket player analysis, cycling through four attribute comparisons such as Runs versus Strike Rate and Matches Played versus Player of the Match. It fetches CSV data via the Fetch API and uses d3.csvParse, then builds the chart with D3 v7 scales, axes, and SVG elements. Each plot disappears and redraws with a new attribute pair, while a tooltip provides hover details and axis labels and titles clarify the current view.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

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

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

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 line chart of player Statics

A fork of a line chart visualizing a cricket player's runs scored versus match number. The data is loaded from a remote CSV file and rendered as an orange line using the D3.js v7 `d3.line()` generator with linear scales. Red circular markers highlight each data point, and labeled axes for "Match Number" and "Runs Scored" are drawn using `d3.axisBottom` and `d3.axisLeft`. The SVG output includes margins and a fixed chart size of 700 by 450 pixels.

Ssdarsi2404@gmail.com

85% match

Loading thumbnail…

Fork of ICE-7 Scatter plot

A reusable scatter plot animated with D3 v6 cycles through Runs, Average, Strike Rate, and Innings on the x-axis every three seconds. It visualizes Test Cricket player records from a CSV file, using d3.scaleLinear for axes, d3.scaleOrdinal with symbol types to distinguish player roles, and color to encode country. The SVG renders dynamically via d3.csv loading and a custom scatterPlot module.

Nnagasai.mandalapu@gmail.com

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 chart animates cycles through four columns of a cricket dataset, plotting balls, match, age, and score against the x-axis while score remains on the y-axis. Using the `scaleLinear` API for axes and `selection.join` for idempotent circle updates, the scatter plot updates every two seconds via `setInterval`, re-computing domains from the new data extent. It renders as an SVG with large Share Tech font labels, drawing from a CSV loaded with `d3.csv`.

Ccharanchand9

84% match

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

84% match