Skip to main content
SimilarExport ZIP
100%

Classic Cubs

✓ Published0🌍 Public
11wheel
Last edited Aug 21, 2016
Created on Nov 3, 2015

This visualization, rendered with D3 and Lodash, displays the winning percentages of eight classic National League baseball teams throughout the 1909 season. Each team's path tracks its cumulative win ratio game-by-game, revealing the fluctuating pennant race. The x-axis is a time scale using Wednesdays as tick marks, while the y-axis is a distorted scale that compresses the upper and lower ranges to emphasize the middle competition. Team labels follow their respective paths using SVG `textPath`. Data is sourced from Retrosheet game logs.

AI-generated description

Data from http://www.retrosheet.org/gamelogs/index.html

https://twitter.com/kleinmatic/status/657400344394276864

https://twitter.com/waynekamidoi/status/657359312520638464

http://archives.chicagotribune.com/1910/10/14/page/25/article/diagram-showing-daily-fluctuations-in-national-league-pennant-race

Todo

  • x axis
  • Headline
  • clip path for overflow
  • key
  • headline
  • fonts
  • week ticks
  • different strokes
  • y axis scale
  • pub

Similar vizzes

Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses by Team Name over Years with PCT_Square Vertical Plot

This visualization uses a square scatter plot to compare the historical wins and losses of the Chicago Cubs across different team names and seasons. Each square represents a year, positioned by team name on the x-axis and total wins on the y-axis, with color encoding the team’s winning percentage (PCT). The tooltip reveals the season year and games behind (GB). Built with Vega-Lite API and D3, the chart loads CSV data from a GitHub gist and applies a custom dark-themed configuration to improve readability.

GGeri D.
75% match
Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses ScatterPLot with Boxs and PCT Scale

This visualization uses a scatterplot to compare Chicago Cubs wins and losses across seasons, with the winning percentage (PCT) encoded through the color of each square mark. The plot is built with Vega-Lite API (v4) and D3 v5 for data loading via `d3.csv`, rendering the dataset from a GitHub gist. Tooltips display season year, games behind (GB), and PCT for each data point, while axes are customized through the `config` object to improve readability.

GGeri D.
73% match
Loading thumbnail…

Dimas_Chicago Cubs Wins and Losses Scatter Plot

A scatter plot visualizes Chicago Cubs season results, with wins on the x-axis and losses on the y-axis, while color encodes the team’s final place finish. Hovering reveals the season year and games behind (GB), contextualizing performance relative to division standing. The visualization uses Vega-Lite’s API and D3.js to load CSV data from a GitHub gist, rendering circles with an opacity of 0.5.

GGeri D.
71% match
Loading thumbnail…

Project

This visualization displays the cumulative number of Stanley Cup playoff wins for each of the original six NHL teams across a sliding timescale from 1918 to 2018. A donut chart updates dynamically as a slider adjusts the year cutoff, with each team’s slice colored distinctly via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.pie()` to generate arc data and `d3.arc()` to render paths, filtering and grouping the CSV data by team and year with `d3.groups`.

Sstchiang
70% match
Loading thumbnail…

Gist 1e62506e7bca2ddfbb82

This visualization maps every NBA game since 1946 onto a grid where the x-axis represents combined losses and the y-axis represents combined wins. Each cell’s color and size indicate the number of games played between teams with that specific combined win-loss record. The chart uses d3.csv, d3.nest, and d3.scale.quantile to process the game data and render the colored rectangles. The visualization also highlights the best and worst historical records with step-after lines, making it easy to compare team performance over time.

11wheel
69% match
Loading thumbnail…

Final project week 8

This scatterplot compares recent and historical season win rates for nine teams, with the x-axis showing recent win rate and the y-axis showing historical win rate. Each team appears as a colored circle using D3’s `schemeCategory10` palette, positioned via `d3.scaleLinear` scales. The visualization renders through `d3.select` and `.join()` to bind the hardcoded data array, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes that divide the plot into four performance quadrants.

QQingyang Wang Profolio
69% match
Loading thumbnail…

Transforming data of Historical NBA Performance

This example displays historical average winning percentages for NBA teams, computed from a CSV dataset and rendered as a JSON array. The visualization uses D3 v7’s `flatRollup` and `sum` functions to aggregate win percentages per team across all seasons. After fetching the data via a URL, `csvParse` converts the CSV string into objects. The computed results are output as formatted text inside a `<pre>` element, demonstrating a straightforward data-transformation pipeline without additional chart rendering.

QQingyang Wang Profolio
67% 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
67% match