Skip to main content
SimilarExport ZIP
100%

MLB Parks

✓ Published0🌍 Public
AArubaKLM
Last edited Jan 17, 2023
Created on Jan 16, 2023
Forked from D3 Starter

This interactive scatterplot visualizes Major League Baseball stadiums, plotting each park's opening year on the x-axis against a user-selected attribute (capacity, construction cost, or opening year) on the y-axis. Points are color-coded by roof type using a d3.scaleOrdinal and SVG circles with native tooltips. Built with React and D3 v7, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and custom React components for axes and legend rendering. A dropdown menu allows switching between different y-axis attributes.

AI-generated description

데이터 확인 : https://raw.githubusercontent.com/ArubaKLM/Viz-Practice/main/data2/mlb_stadium.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished World Map

This visualization displays Major League Baseball stadiums on a polished map of the United States, with circles sized according to stadium capacity and colored by division. Built with React and D3 v5, it uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries and interiors from US Atlas TopoJSON data. The map loads stadium coordinates, capacities, and divisions from a CSV file, applying `d3.scaleSqrt` for circle sizing. Interactive dropdown menus allow filtering by division, supported by React state management and custom axis and legend components.

AArubaKLM
77% match
Loading thumbnail…

MLB Parks

This example displays a summary of the CSS Named Colors dataset as a text message, showing its size in kilobytes, the number of rows, and the number of columns. It loads and parses a remote CSV file using `d3.csv()`, then formats the result with `d3.csvFormat()` to compute the byte size. The page uses React and D3 v5, with the parsed data rendered directly into the DOM via `textContent`.

AArubaKLM
75% 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
74% match
Loading thumbnail…

Scatter Plot with ReactiveModel

This interactive scatter plot visualizes major league baseball player statistics, mapping metrics like hits, home runs, and runs against each other for individual players across teams and leagues. The chart updates smoothly with animated transitions, as data points reposition when users change the variables being compared. Built with D3 v4 and the ReactiveModel library, the visualization uses declarative reactive programming to define chart components, including SVG rendering, responsive axes with tick marks, and linear scales that automatically compute domains from the underlying data. The Baseball.csv dataset drives the visualization, with each player represented as a point whose position reflects their performance statistics.

CCurran Kelleher
71% 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
70% match
Loading thumbnail…

Baseball Scatterplot

Baseball Scatterplot visualizes 1986 baseball player statistics from the Baseball.csv dataset, using D3.js v4 to render an SVG scatterplot. Each player is a circle positioned by at-bats (x-axis) and runs (y-axis), with the circle's radius scaled to home runs using `d3.scaleSqrt`. A categorical color scale encodes the player's team. The chart includes axis tick marks and a legend; hovering over a team in the legend fades out all other circles, highlighting only that team's players. Player names appear on hover.

AAndresAnayaIsaza
70% match
Loading thumbnail…

Baseball Scatterplot

Baseball Scatterplot visualizes 1986 baseball player statistics from the Baseball.csv dataset, using D3.js v4 to render an SVG scatterplot. Each player is a circle positioned by at-bats (x-axis) and runs (y-axis), with the circle's radius scaled to home runs using `d3.scaleSqrt`. A categorical color scale encodes the player's team. The chart includes axis tick marks and a legend; hovering over a team in the legend fades out all other circles, highlighting only that team's players. Player names appear on hover.

AAndresAnayaIsaza
70% 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
70% match