D3 Block-a-Day: Day 22, January 22nd, 2017

100%

D3 Block-a-Day: Day 22, January 22nd, 2017

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This interactive scatter plot shows the relationship between a Major League Baseball team’s win total in one year and its win total in the previous year, with a correlation value displayed for each season. A draggable slider lets viewers animate through years from 2016 back to 1902, updating the dots and their tooltips. The visualization uses D3 v4’s `d3.json`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, along with SVG elements and a custom year-tween timer for smooth transitions. Data comes from a JSON file listing team wins per season.

AI-generated description

D3 Block-a-Day: Day 22, January, 22th 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 22. This example reduces the size of the January 20th baseball wins scatter plot. Like previously, the correlation is supplied in the data set which is JSON.

forked from <a href='http://bl.ocks.org/dbetebenner/'>dbetebenner</a>'s block: <a href='http://bl.ocks.org/dbetebenner/f76af3a47b93b6e1b2acacc378f48df2'>D3 Block-a-Day: January 22nd, 2017</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Task_8_Activity_3_Question_3

This scatter plot visualizes the relationship between MLB run differentials and winning percentages for teams from 2010 to 2022. It uses color-coded circles to represent different league divisions (NL West, AL East, etc.), with each point positioned by its run differential (x-axis) and win percentage (y-axis). The visualization is built with D3 v6, loading CSV data from a GitHub repository and rendering SVG circles. The code uses D3's scaleLinear, extent, axisLeft, and axisBottom APIs alongside custom color-mapping logic to distinguish league divisions.

Jjordanwolfe2@my.untdallas.edu

77% match

Loading thumbnail…

Fork of Fork of Random Squares and circles

This scatter plot visualizes the relationship between Year 1 and Year 2 wins for different teams, with each point representing a team’s performance across two consecutive years. The chart uses D3 v7 to load CSV data from a remote gist and render circles with steelblue fill at reduced opacity, allowing overlapping points to be distinguished. Axes are generated using D3’s `axisBottom` and `axisLeft`, with labels added via SVG text elements. The plot highlights outliers and patterns in team consistency over time, as described in the accompanying analysis text.

Ppraveennayak1702@gmail.com

76% match

Loading thumbnail…

Task_8_Activity_4_Question_4

This bubble chart visualizes the correlation between win percentage, run differential, and home runs for 2022 MLB teams, with each circle representing a team. The x-axis shows run differential, the y-axis win percentage, and circle size scales with home run totals, while colors distinguish league divisions. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with d3.interpolateTurbo for color encoding. Interactive tooltips appear on mouseover, and the chart includes size and color legends rendered as SVG elements.

Jjordanwolfe2@my.untdallas.edu

75% match

Loading thumbnail…

Final Project

This interactive NBA visualization compares team winning percentages from 2010 to 2022 using two switchable chart types. A line chart displays seasonal win rates for all teams, highlighting a selected team in black, while a scatter plot shows the relationship between a team’s historical average win rate and its performance in a selected season using team logos as points. Users toggle between charts via buttons, select teams or seasons from dropdown menus, and hover over scatter plot logos for detailed tooltips. The visualization is built with D3 v7, using CSV data parsed and aggregated with `csvParse` and `flatRollup`.

QQingyang Wang Profolio

75% match

Loading thumbnail…

Baseball Scatterplot Matrix II

This example shows a scatterplot matrix of 1986 baseball statistics, plotting pairs of traits like hits, home runs, and RBIs to reveal correlations. A slider controls the fill opacity of the SVG circles, allowing users to adjust point visibility. Built with D3 v4, it uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleCategory20` for color encoding by position. Data comes from the R package Visualizing Categorical Data.

深深度碎片

74% 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…

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

74% match

Loading thumbnail…

EDAV Interactive

This interactive bar chart displays the 2019 NBA win totals for all 30 teams, ordered from highest to lowest, with tooltips revealing exact values on hover. Built with the D3.js v5 framework (via APIs like `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`), the visualization uses SVG rects for bars and animated hover effects—highlighting the bar in green and showing a tooltip—to emphasize the gap between top teams like Milwaukee (56 wins) and bottom teams like Golden State (15 wins). The underlying data is loaded from a CSV file, and the styling uses SCSS variables for consistent theming.

Iiyengarakshay00

74% match