Skip to main content
SimilarExport ZIP
100%

Dimas_Dataset3_CubsData

✓ Published0🌍 Public
GGeri D.
Last edited Sep 21, 2020
Created on Sep 8, 2020

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.

AI-generated description

Chicago Cubs Stats from 1874-2016

The data can be found at Data World: Chicago Cubs Yearly Results

Data Gist

Data Description: Data on Chicago cubs yearly baseball stats. This data contains information about the number of wins, losses and GB for each of the seasons.

Questions/Related Tasks:

What is the most common place the cubs take? For the years that the Cubs were 1st how many total number of games did they win? Overtime ( as the rules of baseball have changed in the number of games played per season)-- would need to add total games per season column, what is the ratio of wins, has it increased? How has the attendence compared to thier winning/lose ratio? Has the GB(games behind) gap gotten bigger over time in comparion to their place in the league? ( looking at their place and the number of games behind in some sort of ratio for how many GB== place equivalent?)

Attributes most interesting to me:

For me the most interesting is their place in the legaue and their win/loss ratio ( which would be created if I used this dataset/in the code) this would be a quantitative type.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Table Summary

This example displays a summary of an MLB team statistics dataset from 2013–2016, sourced from Statcrunch. It shows the total number of rows, columns, and file size in kilobytes, followed by the first ten rows of data formatted as JSON. Using D3 v5, the visualization loads the CSV data with `d3.csv` and `csvFormat`, then appends the summary and preview to the page as `pre` elements. The black background and green monospaced text evoke a terminal interface.

Wwangjonathan
79% 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.
78% match
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.
76% match
Loading thumbnail…

Loading and Parsing Baseball Data

This example demonstrates loading and parsing MLB batting statistics from 1901 to 2015, displaying the dataset’s size in kilobytes, row count, and column count in large text. It uses `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to measure the raw data length. The visualization is minimal, with the parsed results rendered inside a `<pre>` element using D3.js v5.

RRobert Johnson
75% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3, displaying basic metadata about the dataset. After fetching the CSV file from a GitHub gist, it computes and presents the file size in kilobytes, the total number of rows, and the column count. The visualization uses D3's `d3.csv` method to asynchronously fetch and parse the data, followed by `d3.csvFormat` to measure the raw text length. The resulting statistics are rendered as large text in an HTML `<pre>` element, with alternative commented-out approaches using `fetch`, `async`/`await`, and `d3.csvParse`.

LLei Lei
75% 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.
75% match
Loading thumbnail…

Creating a dataset and using the dataset on webpage

This example demonstrates how to load an external CSV dataset and display basic metadata about it on a webpage. The page fetches a CSV file from a GitHub gist using D3’s `d3.csv` method, then calculates and presents the dataset’s size in kilobytes, row count, and column count in a `<pre>` element. Alongside this textual summary, a static SVG triangle is rendered as an image. The visualization relies on D3 v7’s CSV parsing and formatting APIs, with styling handled through external CSS and inline HTML.

Mmomopng
75% match
Loading thumbnail…

loading CSV Data

This example demonstrates how to load a CSV file from a GitHub Gist using D3 v7. It displays the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code uses `d3.csv` to fetch and parse the remote CSV file, then `d3.csvFormat` and `data.columns.length` to compute the metrics. The results are rendered as text in a large `<pre>` element. The data source is the CSS named colors dataset hosted as a raw Gist file.

LLainu Kuruvilla
74% match