Zack Hample Countdown

Zack Hample Countdown

This visualization tracks the career of baseball fan Zack Hample, known for catching balls at Major League games. Built with D3 v4, it renders a countdown-style animated timeline as an SVG, charting each ball Hample snagged across different stadiums and seasons. The dataset (hamplee.csv) includes game dates, ball counts, stadium names, home teams, and attendance figures. The animation sequentially reveals his yearly totals, with visual encoding tied to ball counts and game attendance. The piece uses a clean, minimal aesthetic, letting the data and motion guide the viewer through Hample’s prolific ball-hunting history. Rendered as an animated SVG, it offers a playful but precise look at a personal sports-data collection. Licensed under MIT.

335degrees

94% match

Zack Hample Countdown

A scatterplot-style visualization maps each of baseball fan Zack Hample's game-ball catches to a stadium, encoding attendance on the y-axis and the countdown of his 1,000th career ball on the x-axis. Each point represents a game, colored by year, with a highlight marking the milestone ball. The animation reveals the sequential accumulation of balls over time, with hover interactions surfacing game details like opponent, home team, and attendance from the embedded CSV. Built with D3 v4, the piece uses SVG elements and animated transitions to tell the story of Hample's ball-hawking career across Major League stadiums.

335degrees

93% match

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.

67% match

Baseball Scatter Plot, Hits and Homeruns, Brushing Added

This scatter plot visualizes the relationship between hits and home runs for baseball players, colored by league (red for AL, blue for NL, gold for FL). Viewers can brush horizontally along the x-axis to zoom into specific ranges of hits, triggering smooth transitions that rescale the axis and reposition circles. Built with D3 v4, the example uses `d3.brushX`, `d3.scaleLinear`, and `d3.axisBottom` to implement interactive zooming over the CSV dataset. The SVG rendering includes clipping to contain brushed selections within the plot area.

67% match

Baseball Scatter Plot Showing Hits and Homeruns

A scatter plot visualizes the relationship between hits and home runs for baseball players, with each dot colored by league affiliation: red for the American League and blue for the National League. The plot uses D3's `csv` loader to fetch data from a GitHub gist, `scaleLinear` for the axes, `extent` to set domains, and SVG circles with opacity for rendering. Axis labels are added via `axisLeft` and `axisBottom`, with custom text annotations for "Hits" and "Homeruns".

Bubble chart

This bubble chart visualizes the correlation between a baseball player's batting average, home runs, and RBIs. Each bubble represents a player, with its position determined by average and home runs, while its size and color encode RBIs and player identity, respectively. The visualization uses D3 v7 with SVG rendering and includes an animated tooltip that displays player names on hover. Data is loaded from a local CSV file, and a legend with scale circles helps interpret bubble sizes. The chart also demonstrates local ES6 module imports, highlighting VizHub's capabilities for modular D3 development.

Lleftymadi

D3 Scatter Plot Baseball With Brushing

This scatter plot visualizes the relationship between plate appearances and hit-by-pitches for 2017 MLB hitters, filtering out players with fewer than 100 at-bats. The SVG rendering uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for tick marks. Each player appears as a circle positioned by d3.extent-derived domains, with brushing implied by the title but not implemented in the visible code.

PPatrick-Houlihan

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.