Fork of Simple Scatter Plot

100%

Fork of Simple Scatter Plot

✓ Published2🌍 Public

Last edited Jul 22, 2025

Created on Jul 14, 2025

This interactive scatter plot visualizes baseball hitting metrics, plotting bat speed against exit velocity for individual swings. The chart cycles through different x-axis metrics every five seconds, animating the transition of points, axes, and labels. Built with React and D3 v7, it uses `d3.csv` to load the dataset, `scaleLinear` and `axisLeft`/`axisBottom` for scales and axes, and `transition` with staggered delays to smoothly move circles between positions. The SVG rendering updates in place via D3's join pattern.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Baseball Hitting Metrics Dashboard

This interactive dashboard visualizes relationships between baseball hitting metrics, including bat speed, exit velocity, attack angle, and hand speed. Users select metrics for the X and Y axes from dropdown menus, and the scatter plot updates with animated transitions using d3.transition. The React application loads CSV data with d3.csv and renders the chart as SVG, with hover tooltips displaying individual swing details such as session number and metric values. A ResizeObserver handles responsive sizing.

NNita

88% match

Loading thumbnail…

Fork of How its made step by step: Baseball Hitting Metrics Dashboard

This dashboard visualizes relationships among baseball hitting metrics, such as bat speed, exit velocity, attack angle, and hand speed, using an interactive scatter plot. Users switch axis metrics via dropdown selectors, and hovering over points reveals detailed data in a tooltip. Built with React and D3 v7, the chart uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for animated updates. Data loads from a CSV file (`poi_metrics.csv`) through a custom hook, with axes and point sizes adapting to the container using `ResizeObserver`.

NNita

87% match

Loading thumbnail…

Fork of Hello VizHub

An interactive scatter plot visualizes the relationship between baseball hitting metrics by plotting exit velocity against the selected x-axis metric. Users can switch between bat speed, attack angle, and hand speed through a dropdown menu. The React application leverages the D3 v7 library for SVG rendering and animated transitions that smoothly update circle positions when metric selection changes. The chart reads from a local CSV dataset and includes responsive resizing through a ResizeObserver hook.

NNita

86% match

Loading thumbnail…

Interactive Baseball Batting Scatterplot

This interactive scatterplot visualizes over a century of batting statistics from the Baseball Dataset (1900–2015), letting users explore relationships between offensive metrics. Dropdown menus powered by ReactDropdown dynamically select which attribute appears on each axis, with points colored by league (AL, NL, FL). The visualization uses React with D3 v5’s `scaleLinear` and `extent` for axes, rendering SVG circles via custom React components that leverage D3’s `csv` loader for data parsing.

RRobert Johnson

86% match

Loading thumbnail…

How its made step by step: Baseball Hitting Metrics Dashboard

This interactive dashboard visualizes relationships between baseball hitting metrics, with drop-down menus to select which metrics appear on the x- and y-axes of an animated scatter plot. It uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.transition to render and animate SVG circles representing individual swings. A React hook loads CSV data via d3.csv, and hovering over points shows a tooltip with swing details. The chart responds to container resizing through a ResizeObserver.

NNita

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

82% match

Loading thumbnail…

Baseball Scatter Plot, Hits and Homeruns, Iterated

This scatter plot visualizes the relationship between hits and home runs in baseball, with each dot representing a player-season. The chart displays data from three leagues—American, National, and Federal—distinguished by color and identified in a legend. Using D3.js (v6) with SVG rendering, the visualization loads a CSV dataset via `d3.csv`, then maps hits and home runs to linear scales with `scaleLinear`. Points are drawn as semi-transparent circles, and axes are generated using `axisLeft` and `axisBottom` to display the quantitative values.

RRobert Johnson

81% match

Loading thumbnail…

Scatter Plot with ReactiveModel

This interactive scatter plot visualizes major league baseball player statistics, mapping metrics like hits, home runs, and runs against each other for individual players across teams and leagues. The chart updates smoothly with animated transitions, as data points reposition when users change the variables being compared. Built with D3 v4 and the ReactiveModel library, the visualization uses declarative reactive programming to define chart components, including SVG rendering, responsive axes with tick marks, and linear scales that automatically compute domains from the underlying data. The Baseball.csv dataset drives the visualization, with each player represented as a point whose position reflects their performance statistics.

CCurran Kelleher

81% match