fetch exrecise

100%

fetch exrecise

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 4, 2021

This example demonstrates the Fetch API and D3’s CSV parsing by displaying a short statistical summary of a remote dataset. It fetches a raw CSV file from a GitHub gist using `fetch`, then parses it with `d3.csv`. The resulting text reports the file size in kilobytes, the number of rows, and the number of columns, shown in large monospaced text. The visualization is entirely textual, with no charts or graphics, focusing on the mechanics of asynchronous data loading and basic dataset inspection.

AI-generated description

Fetch api exercise

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading data with fetch

This example demonstrates how to load and parse a CSV file asynchronously in D3, displaying the file size and row count. Using the Fetch API, it retrieves a raw CSV from a GitHub gist, then leverages d3.csv and d3.csvFormat to parse and measure the data. The code also includes commented alternatives using async/await and the d3-fetch module. A large pre element presents the resulting statistics, with the page built on D3 v5 and vanilla JavaScript.

Ssxtnxy

84% match

Loading thumbnail…

CSV Fetch and Parse

This example demonstrates a minimal workflow for fetching and parsing remote CSV data with D3. It shows the resulting dataset’s size in kilobytes, row count, and column count in large text on the page. The code uses `d3.csv` to load a CSV file from a GitHub gist and `d3.csvFormat` to measure its string length, while also logging the parsed array to the console. A commented-out alternative shows manual fetching via the Fetch API and parsing with `d3.csvParse`.

AAndres de la Garza

84% match

Loading thumbnail…

Data Fetching

This example demonstrates a minimal data-fetching workflow using D3 v7. It loads a CSV file from a GitHub gist via `d3.csv` and displays three summary metrics in large text: file size in kilobytes, row count, and column count. The visualization is purely typographic, with a `<pre>` element presenting the statistics. The code also includes a commented-out alternative using the Fetch API with `d3.csvParse`, showing two equivalent approaches to loading and parsing tabular data.

DDaniel

83% match

Loading thumbnail…

loading and parsing csv data/d3/fetch

This example demonstrates how to load and parse a remote CSV file using D3 v7 and the Fetch API. It fetches a dataset of CSS named colors from a GitHub gist and uses `d3.csv` to parse the data, then displays summary statistics including the file size in kilobytes, the number of rows, and the number of columns in a large, monospaced preformatted text element. The code also includes a commented-out alternative using `fetch` with `async` and `await` and `d3.csvParse`, showing a manual two-step approach.

Llaplantalaplanta

82% match

Loading thumbnail…

Loading data with Fetch

This example demonstrates how to load external data using the Fetch API and parse it with D3’s `d3.csvParse`. It fetches the Anscombe tidy dataset from a GitHub gist, then displays the file size in kilobytes, row count, and column count in large text. The code defines an async `fetchText` helper to retrieve the raw CSV and uses a promise chain to update the page’s content. The visualization is minimal, focusing on data-loading mechanics rather than graphical representation, with styling applied via a `<pre>` element.

Rrvdv

82% match

Loading thumbnail…

Fetch CSV DATA

This example demonstrates loading a remote CSV file with D3 and displaying basic dataset metrics—file size in kilobytes, row count, and column count—in large, styled text. The visualization relies on `d3.csv` from d3-fetch to parse the data, then uses `d3.csvFormat` to measure the formatted output length and accesses `data.length` and `data.columns` for row and column tallies. The result updates a `<pre>` element via React’s production build, though the core data fetching and parsing use D3 v4 and v7 APIs alongside native `fetch` in commented alternatives.

Mmartfhill

82% match

Loading thumbnail…

Fetch and csv

This example demonstrates fetching a CSV file over the network and parsing it with D3. The page uses the Fetch API to request a gist containing CSS named colors, then parses the raw text using `d3.csvParse`. It logs the number of rows, columns, file size in kilobytes, and the full parsed data array to the browser console. The HTML includes minimal styling with a large font size, and the script relies on the D3 v7 library loaded from a CDN.

VValentin Kebat

82% match

Loading thumbnail…

parsing CSV data using fetch

This example demonstrates how to fetch and parse a CSV file using the browser's Fetch API, loading the data from a remote GitHub gist. The page also showcases modular ES6 imports with D3 v5, using `select` from `d3` to update the text of a `#message` div with a greeting from a local module. A separate stylesheet styles the message. The CSV parsing itself is initiated via an asynchronous `fetchText` function that requests the raw datasheet URL, though the fetched text is merely logged to the console and not further processed or visualized.

TToonysg

81% match