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

100%

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

✓ Published1🌍 Public

Last edited Sep 21, 2020

Created on Sep 14, 2020

Forked from Dimas_Chicago Cubs Wins and Losses Scatter 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.

AI-generated description

Showing Data on the Chicago Cubs Baseball Team.

Chicago_Cubs_Yearly_results_Dataset3

We see the wins for each of the different verison of the team names. As we expect we see the chicago cubs to have more wins because its the longest standing name and in the recent years rules have changes and there are longer season hence more change for more wins. Also we have the heatmap for the PCT.

MIT Licensed

Similar vizzes

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.

94% 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.

92% match

Loading thumbnail…

Dimas_Dataset3_CubsData

This example displays basic metadata about the Chicago Cubs yearly statistics from 1874 to 2016, loading a CSV file from a GitHub gist. It shows the file size in kilobytes, the number of rows, and the number of columns in the dataset, which includes wins, losses, and games behind. The code uses the D3 v5 library, specifically `d3.csv` and `d3.csvFormat`, to fetch and parse the data, then updates an HTML `<pre>` element with the computed summary. The visualization itself is minimal, serving as a data-loading preface rather than presenting any charts or graphs.

GGeri D.

76% match

Loading thumbnail…

Classic Cubs

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.

11wheel

75% match

Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes the distribution of wins and losses across different teams for a specific year, using a pie chart to show each team’s share of total wins. The chart is generated from a CSV dataset loaded via `d3.csv`, with data filtered for the year 2020. Using D3.js v7, the code computes win percentages per team, applies a `d3.scaleOrdinal` color scheme, and renders the arcs with `d3.pie` and `d3.arc`. A legend, built with SVG rectangles and text, identifies each team’s color, while the layout is fixed at 400x400 pixels with a responsive margin.

Ppraveennayak1702@gmail.com

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

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

67% match

Loading thumbnail…

First Viz

A scatter plot displays the historical win rate of the Boston Celtics NBA team per season, with the x-axis representing the year and the y-axis the win percentage. The visualization loads data from a local CSV file and parses it using `d3.csvParse`. It renders circular marks via `d3.select().join()` in a customized scatter plot. The code leverages `d3.scaleLinear` and `d3.extent` for scaling the axes, and states are managed with a simple `setState` mechanism.

QQingyang Wang Profolio

67% match