Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Jul 22, 2025

Created on Jul 22, 2025

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.

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

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

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

82% match

Loading thumbnail…

Fork of Hello VizHub

This interactive scatterplot lets users explore the relationship between any pair of numeric variables from the auto-mpg dataset. Two dropdown menus, built with the custom `dropdownMenu` function, independently select the x and y axes. The chart updates dynamically using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering. The `scatterPlot` module reuses enter/merge patterns to efficiently update circles and axis labels. Data loads via `d3.csv` and appears as semi-transparent red circles.

PPiotr Paszek

81% match

Loading thumbnail…

Fork of Fork of Hello VizHub(Activity6)

This chart visualizes population data from a CSV file hosted on GitHub for the year 2020, rendering 30 rows as bars. The example shows a React application that combines D3.js utilities, including `d3.csv` for data loading and custom axis components that leverage `xScale.ticks()` to generate tick marks. The implementation imports D3 directly from UNPKG and uses local ES6 modules for the axes and data-fetching hooks. The visualization uses green bar marks with styled CSS for tick lines and labels, demonstrating integration of D3 transforms and React rendering in a static visualization.

KKavyaEti

80% match

Loading thumbnail…

Fork of Hello VizHub

This example displays a scatter plot of penguin measurements, showing flipper length on the x-axis and body mass on the y-axis, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). It uses D3 v5 and renders to SVG within a React environment. The code loads data from a CSV file hosted on GitHub, parses numeric fields, and applies d3.scaleLinear for positioning. Axes are generated with d3.axisLeft and d3.axisBottom, while circles are joined to the data using the join method.

Ssusarlasruthi2000@gmail.com

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