Skip to main content
SimilarExport ZIP
100%

Fork of Baseball Hitting Metrics Dashboard

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

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.

AI-generated description

Baseball Hitting Metrics Dashboard

An interactive data visualization dashboard for analyzing baseball hitting performance metrics using React and D3.js.

Overview

This dashboard provides an interactive scatter plot visualization that allows analysts and coaches to explore relationships between different hitting metrics from baseball swing data. Users can dynamically select which metrics to compare on the X and Y axes to identify patterns and correlations in hitting performance.

Features

  • Interactive Scatter Plot: Visualize relationships between any two hitting metrics
  • Dynamic Metric Selection: Choose from multiple batting metrics using dropdown selectors
  • Responsive Design: Chart automatically adapts to different screen sizes
  • Hover Tooltips: Get detailed information about individual data points
  • Smooth Animations: Animated transitions when switching between metrics
  • Session Tracking: Data points are organized by practice sessions and individual swings

Available Metrics

  • Bat Speed (mph): Speed of the bat at contact with the ball
  • Exit Velocity (mph): Speed of the ball immediately after leaving the bat
  • Attack Angle (°): Angle of the bat at the moment of contact
  • Hand Speed (mph): Maximum speed of the player's hands during the swing

Data Structure

The dashboard uses CSV data with the following key fields:

  • session_swing: Unique identifier for each swing (session_swingNumber)
  • session: Practice session number
  • exit_velo_mph_x: Exit velocity measurement
  • bat_speed_mph_contact_x: Bat speed at contact
  • attack_angle_contact_x: Attack angle measurement
  • hand_speed_mag_max_x: Maximum hand speed

Technology Stack

  • React 19: Modern UI framework with hooks
  • D3.js v7: Data visualization and DOM manipulation
  • CSS3: Responsive styling with flexbox and grid
  • ES6 Modules: Modern JavaScript module system

Key Components

  • HittingMetricsChart: Main orchestrator component
  • ScatterPlot: Reusable D3 chart implementation
  • MetricSelector: Interactive dropdown controls
  • Tooltip: Hover information display
  • Custom Hooks: Data loading and responsive dimensions

Usage

  1. Select your desired X-axis metric from the first dropdown
  2. Select your desired Y-axis metric from the second dropdown
  3. The chart will automatically update with smooth animations
  4. Hover over data points to see detailed information
  5. Each point represents one swing, colored consistently across sessions

Insights

This visualization helps identify:

  • Correlations between different hitting mechanics
  • Performance consistency across sessions
  • Optimal ranges for different metrics
  • Outliers and exceptional performances
  • Training progress over time

The dashboard is designed for baseball coaches, analysts, and players to make data-driven decisions about hitting technique and training focus areas.

MIT Licensed

Similar vizzes

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
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 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
90% 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
88% 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
84% 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
80% 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
80% 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
78% match