Fork of Loading and Parsing CSV Data

100%

Fork of Loading and Parsing CSV Data

✓ Published0🌍 Public

Last edited Jan 4, 2022

Created on Jan 4, 2022

Forked from Loading and Parsing CSV Data

This example demonstrates the fundamentals of loading and parsing CSV data using D3.js version 5. It fetches the CSS Named Colors dataset from a GitHub Gist and displays a simple text summary of the file size in kilobytes, row count, and column count. The primary approach uses the `d3.csv` function to fetch and parse the remote CSV file, leveraging Promise-based asynchronous handling. The code also includes commented-out alternatives using native `fetch` with `async`/`await` and the `d3.csvParse` function, alongside a nested Promise "pyramid of doom" example. The output is rendered as large text within an HTML `<pre>` element.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a dataset of CSS Named Colors from a GitHub gist and displays key statistics: the file size in kilobytes, the number of rows, and the number of columns. The code primarily uses `d3.csv()` with a Promise-based `.then()` callback, though commented-out alternatives show fetching text with `fetch()` and `async/await`, plus `d3.csvParse()` for manual parsing. The output renders as plain text inside a `<pre>` element.

Hhung2606

97% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the basic mechanics of loading and parsing CSV data in D3. It fetches a dataset of CSS named colors from a GitHub gist and displays three summary statistics: file size in kilobytes, row count, and column count. The primary implementation uses D3 v5’s `d3.csv` method, which returns a promise, while commented alternatives show equivalent code using the Fetch API with `async`/`await` and `d3.csvParse`. The output is rendered as plain text inside a large `<pre>` element.

CCheng Tang

96% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

CCheng Tang

96% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSS Named Colors dataset by displaying its file size, row count, and column count as large text. It loads a CSV file from a GitHub gist using the D3.js `d3.csv` method, which returns a promise and parses the data. The code also includes commented-out alternatives that use the Fetch API with async/await and `d3.csvParse`, alongside a nested promise "pyramid of doom" pattern for comparison. Results are rendered into a `<pre>` element.

VVinayak Dandin

96% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a CSS Named Colors dataset from a GitHub gist and displays its size (in kilobytes), row count, and column count in a large text area. The primary implementation uses `d3.csv` with promise handling, while commented-out alternatives show equivalent approaches using `fetch` with `async`/`await` and `d3.csvParse`. The visualization is minimal, focusing on data loading mechanics rather than graphical representation.

Kkiranshashi

96% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 and the Fetch API. It fetches a list of CSS named colors from a GitHub Gist and displays a summary of that dataset: the file size in kilobytes, the number of rows, and the number of columns. The code highlights two approaches: using `d3.csv` to fetch and parse directly, and an alternative method that uses `fetch` with `async`/`await` alongside `d3.csvParse`. A commented-out section shows an older "pyramid of doom" pattern. The results are rendered as large text in an HTML `<pre>` element, with a font size set via CSS.

Ggzm17

96% match

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

95% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying the parsed dataset’s size in kilobytes, row count, and column count as large text. The code uses `d3.csv` with a Promise to fetch the CSS Named Colors dataset from a GitHub gist, then formats the result via `d3.csvFormat` to calculate its byte size. An alternative commented-out approach uses the Fetch API with `async`/`await` and `d3.csvParse` to achieve the same outcome, highlighting different asynchronous patterns available in modern JavaScript.

KKenji / ケンジ

95% match