Skip to main content
SimilarExport ZIP
100%

Fork of Player Statics using reusable scatter plot

✓ Published0🌍 Public
Ssdarsi2404@gmail.com
Last edited Apr 2, 2025
Created on Apr 1, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Player Statics using reusable scatter plot

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.

Ssdarsi2404@gmail.com
95% 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
87% 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
86% 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…

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