Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
NNita
Last edited Jul 22, 2025
Created on Jul 22, 2025

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`.

AI-generated description

Baseball Hitting Metrics Dashboard

An interactive data visualization dashboard for analyzing baseball hitting metrics using React and D3.js. This application allows users to explore relationships between different hitting performance metrics through interactive scatter plots.

Features

  • Interactive scatter plot visualization
  • Real-time metric selection for X and Y axes
  • Responsive design that adapts to different screen sizes
  • Hover tooltips showing detailed data points
  • Smooth animations and transitions
  • Clean, modern UI design

How It's Made

Tech Stack

  • React 19 - Frontend framework for building the user interface
  • D3.js v7 - Data visualization library for creating interactive charts
  • Modern JavaScript (ES6+) - Using ES modules and modern syntax
  • CSS3 - Custom styling with responsive design
  • HTML5 - Semantic markup structure

Architecture

The application follows a modular React component architecture with custom hooks for data management and D3 integration:

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

Fork of Simple Scatter Plot

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.

ZZach Shaw
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
87% 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
82% 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
78% 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
77% match
Loading thumbnail…

Baseball Scatterplot With Menus

This interactive scatterplot, rendered with SVG, displays baseball statistics for players with at least 200 at-bats. Users change the X and Y axes via dropdown menus, choosing from quantitative stats like Batting Average and On Base Percentage, or the categorical Team variable. The visualization uses D3's `selection.join` API to efficiently update circle positions and axes with a 1000ms transition, while the menu system uses a custom `dispatch` event handler. The dataset is loaded from a GitHub Gist using `d3.csv`.

PPatrick-Houlihan
77% match