Fetching data

100%

✓ Published0🌍 Public

Last edited Mar 13, 2022

Created on Mar 12, 2022

This example displays basic metadata about a fetched CSV file, showing its size in kilobytes, row count, and column count in large text. It loads a named CSS colors dataset from a GitHub gist using the `d3.csv` method with a Promise-based `.then()` callback, then counts rows via `txt.length` and columns through `txt.columns.length`. The text size is computed from `d3.csvFormat(txt).length`. The page uses D3 v7 and renders the resulting information inside a `<pre>` element.

AI-generated description

Web program to fetch data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fetch data with D3js

This example demonstrates how to fetch and parse CSV data with D3.js, displaying a summary message in a large preformatted text element. It loads a CSS named colors dataset from a GitHub gist using D3's `d3.csv` method, then calculates and shows the file size in kilobytes, the number of rows, and the column count. The code formats the raw CSV data with `d3.csvFormat` to measure its length, and writes the resulting metrics into the page via `textContent` within a promise handler.

Jjbruzzo

89% 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

87% match

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file with D3, displaying basic file statistics as plain text. It fetches a remote dataset of CSS named colors and reports the number of rows, columns, and file size in kilobytes. The code uses `d3.csv` with a Promise-based `.then()` callback to handle the asynchronous data loading, and `d3.csvFormat` to compute the serialized size. All output appears in an HTML `<pre>` element via standard DOM text manipulation.

CCatalina Vajiac

87% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse a CSV file using D3.js, presenting the dataset’s size, row count, and column count as large text on the page. It fetches a CSV of named CSS colors from a GitHub gist via `d3.csv()`, then uses `d3.csvFormat()` to calculate the file size in kilobytes. The code also includes a commented alternative approach using the Fetch API with async/await and `d3.csvParse()` for manual parsing. The interface is minimal, rendering the three computed metrics inside a styled `<pre>` element.

Bblackbottt

86% match

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates the basic workflow of loading and parsing external CSV data with D3.js. It fetches a CSS color dataset from a GitHub-hosted CSV file and displays the file’s size in kilobytes, row count, and column count in a large monospace `<pre>` element. The implementation uses the `d3.csv` method with a promise to parse the remote file, then accesses `data.length`, `data.columns`, and `d3.csvFormat(data)` to compute the summary statistics. An alternative approach using the Fetch API and `d3.csvParse` is commented out in the source.

Yyeeet0421

86% match

Loading thumbnail…

Data fetch

This example fetches a CSV file containing CSS named colors and displays a short summary of its size and structure in large text. It reports the number of rows, the number of columns, and the file’s size in kilobytes after formatting the data with `d3.csvFormat`. The visualization uses `fetch` and `response.text()` to retrieve the raw data, then `d3.csv` to parse it into an array of objects. The final message is written into a `<pre>` element using the DOM API, with styles applied via CSS.

TtheV1rTual

86% 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. It displays the file size, row count, and column count of a CSS Named Colors dataset from a GitHub gist. The code uses `d3.csv` with a Promise to fetch and parse the data, then formats a summary message with `d3.csvFormat`. An alternative commented-out approach uses `fetch`, `async/await`, and `d3.csvParse`. The result appears as large text in a `<pre>` element.

Llaurence beattie

86% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file in a web page, displaying the file size, row count, and column count as large text. It fetches a remote CSV of CSS named colors using the Fetch API, then parses the text with `d3.csvParse` from D3 v7. The resulting statistics are written into a `<pre>` element, with the code structured around an asynchronous `fetchText` function and a commented-out alternative using nested promises. The page uses raw HTML, CSS, and JavaScript without any framework.

MMatty Danbury

86% match