Loading and Parsing CSV Data exercise - Dataviz 2020 course 13 & 15

100%

Loading and Parsing CSV Data exercise - Dataviz 2020 course 13 & 15

✓ Published0🌍 Public

Last edited Jul 27, 2020

Created on Jul 6, 2020

Forked from Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v5 and the Fetch API, displaying the dataset’s basic metrics—row count, column count, and file size—in a large text block. It fetches the raw CSV from a GitHub Gist, parses it with `d3.csvParse`, and writes the results to the page. The code includes alternative commented approaches using `d3.csv` and async/await, highlighting the parsing logic. The data originates from a manually cleaned Wikipedia table on fish as food, covering edible fish categories by texture and flavor.

AI-generated description

A program that loads and parses some CSV data: Fish as food.

Reference: Wikipedia: Fish as food Data is about the categorised fish that are edible, in terms of texture and flavour. Data was from the table on the wiki page, and cleaned by myself.

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It shows a large preformatted text element displaying the CSV file’s size in kilobytes, row count, and column count, derived from a gist containing named CSS colors. The code uses `d3.csv` to fetch and parse the data, `d3.csvFormat` to measure its length, and `d3.csvParse` for manual parsing, alongside plain `fetch` calls that log the raw text to the console.

Uubik-valis

84% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading a remote CSV file and parsing it with D3.js, displaying basic dataset statistics as large text. It uses `d3.csv` to fetch and parse the data from a GitHub Gist, then reports the approximate size of the formatted output in kilobytes, the number of rows, and the number of columns. The page also includes commented-out code showing an alternative approach using the `fetch` API with `async`/`await` and `d3.csvParse` for manual text parsing, but the active path relies on D3's built-in CSV handling.

Aadante111

84% match

Loading thumbnail…

Loading and parsing CSV data wih D3

This example demonstrates how to load and parse CSV data using D3 v7. It displays the row count, column count, and file size in kilobytes as large text on the page. The code uses `d3.csv()` to fetch and parse a CSV file from a GitHub gist, then processes the resulting data array and columns. It also includes commented-out alternatives using `fetch()` with `async/await` and `d3.csvParse()` to illustrate older parsing approaches.

AAoibhinnRed

84% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API, displaying file size, row count, and column count in a large text element. It fetches a CSV file of HTML color names from a GitHub gist, then parses the text with `d3.csvParse` to extract the data structure. The visualization is minimal—just a `pre` element showing summary statistics—but the code also includes commented alternatives using `d3.csv` and a "pyramid of doom" fetch pattern for comparison. It highlights modern async/await syntax for data loading in a React context.

MMaz Hermon

84% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 5. It fetches a wildlife trade dataset from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in a large text block. The code uses d3.csv to fetch and parse the data, then accesses the resulting array and its columns property. An alternative approach using the Fetch API with async/await and d3.csvParse is also included as commented-out code.

KKarenNg

84% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It displays the file size, row count, and column count of a wildlife trade dataset pulled from a GitHub gist. The primary approach uses `d3.csv`, which fetches and parses the CSV in one step, while commented-out alternatives show `fetch` with `async`/`await` combined with `d3.csvParse`. The results appear as large text in a `pre` element, providing a simple, immediate visual summary of the dataset’s basic dimensions.

KKarenNg

84% match

Loading thumbnail…

Loading and Parsing CSV Data

KKarenNg

84% match

Loading thumbnail…

Loading and Parsing CSV Data with D3

This example demonstrates how to load and parse a CSV file using D3.js, displaying basic dataset statistics. The visualization shows the file size in kilobytes, row count, and column count within a large text element. The code fetches a CSV file containing CSS named colors from a GitHub Gist, uses `d3.csv` to retrieve and parse the data, then `d3.csvFormat` to measure its size, and finally updates the page’s pre-formatted text content. The D3 v5 API handles the asynchronous data loading and parsing.

Bbakstorage00001

84% match