Aditya - Data loading with Fetch, Promises, Async, Await

100%

Aditya - Data loading with Fetch, Promises, Async, Await

✓ Published0🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

This example demonstrates how to load and inspect a CSV dataset using JavaScript’s Fetch API with async/await, as well as D3’s `d3.csv` method. The page displays the file size in kilobytes, the number of rows, and the number of columns from the `cssNamedColors.csv` dataset hosted on GitHub. The code includes commented-out alternatives using Promises with `.then()` and a simple async/await pattern, highlighting different approaches to asynchronous data loading while logging the raw text to the console.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

LoadingData with Fetch, Promises, Async and Await Parsing CSV Data

This example demonstrates the results of loading and parsing a CSV file from a remote URL, displaying the file size, row count, and column count. It uses the D3.js v7 `d3.csv` method to fetch and parse the data. The code also includes commented-out alternatives using native JavaScript `fetch` with promises and async/await, along with `d3.csvParse`, to achieve the same result. The data comes from a gist containing CSS named colors.

DDusty

86% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API and async/await syntax in JavaScript. The code fetches a CSV file containing CSS named colors, converts the response to text, and logs the raw CSV content to the browser console. The visualization itself displays no rendered output; instead, it focuses on the data-loading workflow, contrasting this modern approach with alternatives like d3.csv and Promise chaining. The example uses the Fetch API with async/await, and references d3.csvParse for parsing capabilities.

Bbhavani44

86% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using modern JavaScript asynchronous patterns. It fetches a CSS Named Colors dataset from a GitHub gist. The program defines an async function that uses the Fetch API to retrieve the text, then chains a promise to log the contents to the browser console. No visualization or rendering occurs; the focus is purely on data ingestion. It relies on D3.js v5 for the d3.min.js library but primarily showcases native ES2017 async/await syntax with fetch.

MMorgan Worrell

86% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It displays the file size in kilobytes, the number of rows, and the number of columns from a dataset of CSS named colors. The code uses `d3.csv` for direct parsing and a commented alternative with `fetchText` and `d3.csvParse`. It highlights both the promise-based `then` pattern and the async/await approach, while avoiding the "pyramid of doom" by chaining promises.

Nnatsgeorge.ng@gmail.com

85% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors using the Fetch API with async/await syntax. The program fetches the remote CSV text and logs the raw data to the browser console, showing how to handle asynchronous data retrieval without D3’s built-in CSV parser. It uses `fetch()` with `response.text()` to access the file contents, echoing the text output directly. The code includes commented-out alternatives using `d3.csv` and `d3.csvParse`, but the active implementation purely relies on native JavaScript promises.

Yyungchiau

85% match

Loading thumbnail…

how to fetch data

This example demonstrates three different ways to load a CSV file, using both the Fetch API and D3’s built-in `d3.csv` and `d3.csvParse` functions. It fetches a CSV of CSS named colors from a GitHub gist and displays the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code contrasts asynchronous promise-based fetching with the equivalent `d3.csv` shorthand, and includes an unused `async`/`await` function. The visualization itself is purely textual, providing metadata about the loaded dataset.

Mmlscmoulika

85% match

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using both the D3.js `d3.csv` method and the native Fetch API with `async`/`await`. It displays statistics about the dataset—file size in kilobytes, row count, and column count—in a large `<pre>` element. The data source is a CSV file containing CSS named colors, hosted as a GitHub gist. The code also includes commented-out alternatives using the older Promise-based `fetch` pattern.

MMahesha999

85% match

Loading thumbnail…

Loading and Parsing CSV without fetch async and await

This example demonstrates a minimal workflow for loading and parsing a CSV file in D3 v6 without using fetch, async, or await. It displays the file size in kilobytes, row count, and column count inside a large <pre> element. The code calls d3.csv() with a URL pointing to a CSS named colors dataset hosted on GitHub Gist, then chains a .then() callback to compute the summary metrics using d3.csvFormat() and the parsed data array. The approach avoids explicit asynchronous syntax while relying on D3’s built-in promise handling.

Yyastika

85% match