Skip to main content
SimilarExport ZIP
100%

Fork of Loading and Parsing CSV Data

✓ Published0🌍 Public
MmayankCognitree
Last edited Mar 11, 2021
Created on Mar 11, 2021

A bar-free data-loading demo that displays the file size, row count, and column count of a CSV of CSS named colors fetched from a GitHub gist. The visualization itself is a simple text message rendered in an HTML `<pre>` element. The code demonstrates both D3’s `d3.csv` and `d3.csvParse` for parsing, alongside commented-out approaches using `fetch` with `async`/`await` and an uncommented “pyramid of doom” chain of `fetch` and `response.text()`. The final active code only logs the raw text to the console, not the metrics.

AI-generated description

A program that loads and parses some CSV data: CSS Named Colors.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads CSS named colors from a CSV file hosted on GitHub and displays a summary of the dataset as text. It uses D3 v5’s `d3.csv` method to fetch and parse the data, then reports the file size in kilobytes, the number of rows, and the number of columns. The code also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern for comparison. The rendered output is a simple `<pre>` element with large monospaced text.

Dddrake
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the basic mechanics of loading and parsing CSV data in a web browser, displaying the file size, row count, and column count of the CSS Named Colors dataset from a GitHub gist. The primary implementation uses D3 v5’s `d3.csv` method with a promise chain, while commented-out alternatives show the same task using `fetch` with `async`/`await` and `d3.csvParse`, plus a nested promise “pyramid of doom” pattern. The rendered output is plain text in a large `<pre>` element, with a React-based counterpart provided in `index.js` using the `useEffect` hook to load data asynchronously.

JJason Summercamp
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays file size, row count, and column count from a CSV file containing CSS named colors. The visualization uses D3 v5’s `d3.csv` method to load and parse the data asynchronously, then presents the statistics in a large HTML `<pre>` element. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, illustrating different approaches to handling remote data loading. The data source is a GitHub gist hosted CSV file.

Hhuashe418
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5’s `d3.csv` method, fetching a dataset of CSS named colors from a GitHub gist. The code calculates and displays the file size in kilobytes, the number of rows, and the number of columns in a large HTML `<pre>` element. It also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` to show different parsing approaches. The visualization is purely textual, with no graphical rendering, focusing on data-loading mechanics.

UUlbert Alain Odle
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the amount of CSV data loaded from a remote URL, displaying the file size, row count, and column count, then rendering these metrics as plain text within an HTML `<pre>` element. It uses D3 v5’s `d3.csv` promise-based API to fetch and parse the CSS Named Colors dataset. The visualization also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, alongside a nested promise “pyramid of doom” example. The output is minimalist, focusing solely on the parsed data’s descriptive statistics.

SSteven Pearce
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a plain-text summary of the CSS Named Colors CSV dataset loaded from a remote gist, showing its size in kilobytes, row count, and column count. It uses D3 v5’s `d3.csv` method to fetch and parse the data, then computes the formatted text with `d3.csvFormat`. The code also demonstrates alternative approaches commented out, including `fetch` with `async`/`await` and `d3.csvParse`, as well as a "pyramid of doom" pattern. The rendered output appears in a large `<pre>` element.

Llingfa
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates three core methods for loading and parsing CSV data in D3, displaying file size, row count, and column count as large, plain text. Using CSS Named Colors data from a GitHub gist, it shows the concise `d3.csv` API first, then provides commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`. The visual output is purely typographic, rendered in a `<pre>` element, emphasizing the programming workflow over chart construction. The code relies on D3's `d3.csv` and `d3.csvFormat` functions, alongside standard JavaScript fetch operations.

Jjth500
92% match
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a simple text summary of a remotely loaded CSV file, showing its size in kilobytes, row count, and column count. The visualization uses D3.js version 5 and the `d3.csv` method to fetch and parse the data from a GitHub gist containing CSS named colors. The code also includes commented-out alternatives using `fetch` with async/await and a nested promise “pyramid of doom” to illustrate different approaches to asynchronous data loading, though only the `d3.csv` path is active.

Mmrthnkwn
92% match