Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

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

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.

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
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
93% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Ssharathchandrareddymuthyam
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 React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu
84% match
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
83% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays sales data over time, with a line connecting red circular markers on a steelblue stroke. The code uses the D3.js v6 API, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to load CSV data and render an SVG. It includes axis labels and a custom Share Tech font. A separate `scatterPlot.js` module defines a reusable chart function with setters for configuration.

HHariniPotla@my.unt.edu
83% match