100%

Adding Interaction to My Bar Chart

✓ Published0🌍 Public

Last edited Oct 7, 2021

Created on Oct 7, 2021

Forked from Improving a Bar Chart for 2017 Baseball Hitting

This bar chart visualizes the percentage of at bats ending in a hit by pitch for 2017 MLB players with at least 10 HBPs, sorted from highest to lowest rate. Color intensity encodes each player’s total at bats relative to peers, with a legend showing the scale from 276 to 622 at bats. The chart uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scales, `d3.interpolateOrRd` for the color ramp, and `d3.schemeOrRd` for the legend. Mouseover and mouseout events change bar fill and stroke, with a tooltip displaying raw HBP counts. Data comes from a GitHub gist CSV file.

AI-generated description

What This Shows

This bar chart shows the percentages of at bats during the 2017 MLB season that ended in a hit by pitch

What Does it Mean?

Color

The intensity of the color indicates the amount of at bats played relative to their peers, maximum at bats for this dataset is 622, minimum for the selected hitters is 276 at bats.

Name

The name of the player followed by their team. For players with multiple teams, TOT is shown

X Axis

This shows the percentage of at bats in which the hitter was hit by a pitch

Who is interesting here?

Anthony Rizzo has a high number of at bats relative to his peers for his HBP percentage, indicating that he may be more of a target to hit due to stance or personality towards pitchers or a multitude of other reasons.

Tyler Flowers, this guy just gets hit way more than his peers, a full %, OUCH

The Chicago Cubs featured 3 players with over ten HBP's

Dataset

The dataset can be found here

Amended 10/1/21

Improvements

In this iteration of the bar chart, a chromatic color scale is used, the players that get hit at a high rate over few plate appearances are now shown as more intense colors, and a legend is provided for understanding of the amount of At Bats each player has.

Citation : Code for Legend adapted from this

MIT Licensed

Similar vizzes

Loading thumbnail…

Improving a Bar Chart for 2017 Baseball Hitting

This bar chart shows the percentage of at bats ending in a hit by pitch for 2017 MLB players with at least 10 HBPs. Bar color intensity encodes total at bats, with a legend mapping ordinal ranges from 276 to 622. D3 v5 with an SVG renderer uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization, while a custom `colorLegend` function and `d3.interpolateOrRd` apply the chromatic scale. Data is loaded from a CSV using `d3.csv`.

PPatrick-Houlihan

92% match

Loading thumbnail…

Bar Chart for 2017 Baseball Hitting

This bar chart ranks 2017 MLB players by their hit-by-pitch rate, showing the percentage of at-bats ending in a hit by pitch for hitters with at least ten such events. Bar opacity encodes the player’s total at-bats relative to the dataset maximum, with darker bars indicating more playing time. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG rectangles for rendering, with data loaded via `d3.csv` from a GitHub gist. Axis labels and a title annotate the chart.

PPatrick-Houlihan

87% match

Loading thumbnail…

D3 Scatter Plot - Baseball

This D3 scatter plot visualizes the relationship between pitches faced (PA) and hit-by-pitches (HBP) for MLB players from the 2017 Standard Hitting Dataset, aiming to identify players frequently hit despite limited at-bats. The SVG rendering uses d3.csv to load remote data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks, with circle marks positioned by mapping PA and HBP values to pixel coordinates. The plot filters out players with fewer than 100 at-bats and covers the full browser window, using window.innerWidth and window.innerHeight for sizing.

PPatrick-Houlihan

81% match

Loading thumbnail…

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

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

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

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

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

71% match