Skip to main content
SimilarExport ZIP
100%

Zack Hample Countdown

✓ Published0🌍 Public
335degrees
Last edited Jul 7, 2017
Created on Jul 7, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/cf63df3bb924a8bd3d6d7625639afc09'>hample1</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/9d99850e837cec52bccdb506a383b896'>hample2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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
Loading thumbnail…

Zack Hample Countdown

This D3.js v4 visualization tracks Zack Hample’s ball-collecting haul across 21 MLB stadiums from 1995 to 2017. Each vertical strip represents a ballpark, with circles sized by number of balls caught per game, colored by team, and positioned by date. The chart encodes attendance along the y-axis, with hovering revealing game-by-game details such as date, stadium, home team, and attendance. Batting-practice balls and home-run balls are marked with stars, and the tooltip includes the balls caught and whether a home-run ball was secured. Built with SVG and animation, it uses the MIT-licensed D3.js code from 35degrees.

335degrees
93% 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
68% 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
67% match
Loading thumbnail…

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.

RRobert Johnson
67% 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
67% match
Loading thumbnail…

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

RRobert Johnson
67% match
Loading thumbnail…

Multiple Axes Experiment

This visualization demonstrates how D3.js can manage multiple y-axes within a single scatter plot, where each axis represents a different baseball statistic from the Baseball.csv dataset. The experiment dynamically shows subsets of the seven available columns, with axes repositioning and resizing to accommodate the selected statistics. Using SVG and animation, the code leverages d3.axisLeft, d3.scaleLinear, and d3.scalePoint to create and update independent axes, while the gist’s render function rebuilds the layout at each interval.

CCurran Kelleher
66% match