Skip to main content
SimilarExport ZIP
100%

Loading and Parsing CSV Data - Olympic Medals Count Dataset

✓ Published0🌍 Public
SSitanshu Rupani
Last edited Sep 29, 2021
Created on Sep 2, 2021

This example demonstrates the size of the Olympic Medals Count dataset by displaying three summary statistics: total file size in kilobytes, number of rows, and number of columns. Using the d3.csv method, it fetches a CSV file from a GitHub gist containing medal counts for all countries from 1896 to 2018 across both summer and winter games. The code then applies d3.csvFormat to calculate the formatted data’s byte length, and reports the row count from the parsed array and column count from the data.columns property. The results appear in large text within an HTML pre element.

AI-generated description

This dataset shows how many medals each country has won in all olympic games till 2018.
Both summer and winter games are included.
The columns include gold, silver and bronze medals in both games along with the country's ranking.

Source of this data is from this gist - Olympic Games medal Dataset(from 1896 to 2018)

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Olympic Data

This example demonstrates how to load and parse Olympic medal data from a CSV file hosted on GitHub Gist. It displays a summary of the dataset—file size in kilobytes, row count, and column count—in a large text container. The visualization uses D3 v7’s `d3.csv` method to fetch and parse the data, with alternative approaches using `fetch`, async/await, and `d3.csvParse` commented out. The code highlights the simplicity of D3’s data-loading API versus manual text parsing.

RRuofan Chen
89% 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
81% match
Loading thumbnail…

Loading data - Olympic_Athletes_India.csv

This example displays loading and parsing statistics for a CSV file containing Olympic performance records for Indian athletes, showing the file size in kilobytes, row count, and column count in large text. The code uses D3 v5’s `d3.csv` to fetch and parse the data from a GitHub gist, with commented alternatives demonstrating `fetch` and `async/await` with `d3.csvParse`. The dataset originates from Kaggle’s 120 years of Olympic history, filtered to Indian athletes.

VVarun Eranki
81% match
Loading thumbnail…

Loading and parsing CSV

This example demonstrates how to load and parse a CSV file using D3.js, displaying the resulting dataset’s size in kilobytes, row count, and column count as large text on a plain HTML page. The code fetches a remote CSV file from a GitHub gist via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its size. It also reads the `data.length` and `data.columns.length` properties to report the number of rows and columns, updating the page’s `<pre>` element with `textContent`.

Nnourfahmy2003
80% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file with D3.js version 7, displaying the resulting row count, column count, and file size in kilobytes. It retrieves the data from a remote GitHub gist URL containing CSS named colors. The code uses `d3.csv()` to fetch and parse the remote CSV, then accesses the parsed data’s `.length` and `.columns` properties to extract the metadata. It also formats the data back to CSV with `d3.csvFormat()` to compute the data size, and outputs the statistics in a large `<pre>` element.

BBruno Simoes
79% match
Loading thumbnail…

Loading Parsing CSV Data

This example demonstrates how to load and parse a CSV file, displaying file size, row count, and column count on a webpage. It uses d3.csv to fetch a remote dataset from a GitHub gist raw URL, then formats the results with d3.csvFormat to calculate kilobytes. The page also includes commented-out code showing an alternative approach using fetch, async/await, and d3.csvParse. A large pre element displays the final statistics as text.

RRaphael Fogha
79% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7, displaying the dataset’s file size, row count, and column count in a large text pre element. The code fetches a CSV file of CSS named colors from a GitHub gist via `d3.csv`, then formats the parsed data with `d3.csvFormat` to calculate its kilobyte size. It also reports `data.length` for rows and `data.columns.length` for columns, providing a concise summary of the loaded dataset’s structure.

PPaul B
79% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying file size, row count, and column count in a large pre-formatted text element. The code uses `d3.csv()` to fetch and parse the dataset from a GitHub-hosted CSV file containing NYC social media usage data, then formats the statistics with `d3.csvFormat()` to calculate kilobyte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse()` for manual parsing. The example concisely shows the core workflow of retrieving and inspecting tabular data in a browser environment.

KKarenNg
79% match