Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Oct 22, 2025

Created on Oct 22, 2025

This scatter plot visualizes the relationship between Runs and Strike Rate for 150 cricket data points. The visualization uses the D3.js library to render an interactive SVG chart, with a linear scale mapping runs on the x-axis and strike rate on the y-axis. Each data point is represented by a circle with a radius of 5 pixels. The chart includes labeled axes, positioned using the `margin` configuration, and styled with the Share Tech font family. The data is loaded from a CSV file using `d3.csv`, then bound to circle elements via the reusable `scatterPlot` function.

AI-generated description

MIT Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a fork of a reusable D3 scatter plot built in React with SVG rendering. It displays two scatter plots from cricket statistics: Runs versus Strike Rate and Wickets versus Balls Faced, with each point colored by match type (T20, ODI, or Test) using d3.scaleOrdinal and including interactive tooltips via appended title elements. Data is loaded as CSV using d3-fetch and processed with d3.axisBottom, d3.axisLeft, d3.extent, and d3.scaleLinear for scales and axes. The source data comes from a gist hosted on GitHub, rendered through React’s useEffect and useState hooks.

Ssdarsi2404@gmail.com

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

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

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…

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

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