Skip to main content
SimilarExport ZIP
100%

Scatter Plot with ReactiveModel

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

This scatter plot visualizes baseball player statistics from a CSV dataset, showing relationships between attributes like hits, home runs, and salary. The visualization uses D3 v4 and the ReactiveModel library to manage state reactively, with animated transitions when scales or axes update. The SVG rendering includes labeled axes and gridlines, and the chart container resizes dynamically to fill the page.

AI-generated description

A dynamic scatter plot of Baseball data that uses ReactiveModel.

Inspired by Baseball Scatterplot.

Forked from Responsive Axes with ReactiveModel.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/aff67b589d0f775a6a7b75f94a05fb14'>Dynamic Baseball Scatter Plot</a>

mit Licensed

Similar vizzes

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
94% 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
80% 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
79% 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
79% 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
79% 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
79% match
Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization gallery explores cricket player statistics through four distinct chart types. The main scatter plot demonstrates a reusable D3 component with an animated sequence that cycles through different x-axis attributes every two seconds, using `d3.scaleLinear` for axes and `d3.interpolateBlues` for color encoding runs scored. Additional views include an area chart showing strike rate magnitude, a line chart tracking performance trends, and a pie chart displaying milestone distributions. All charts pull from a remote cricket dataset and render as SVG with D3 v6, allowing users to switch between visualizations via a navigation menu.

AArun Kumar M
78% 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
78% match