Skip to main content
SimilarExport ZIP
100%

dv2020-ep13-viz13 - Loading Data

✓ Published1🌍 Public
Zzach b.
Last edited Apr 5, 2023
Created on Mar 12, 2023

This example demonstrates how to load and inspect external CSV data in the browser console. It fetches a raw CSV file hosted on GitHub Gist and logs its contents directly to the console. The code uses the modern asynchronous `fetch` API combined with `response.text()` to retrieve the data, wrapped in an async function called `fetchText`. No visualization is rendered; the focus is purely on the data-loading step using standard browser JavaScript without any external libraries.

AI-generated description

Loads CSV data and logs it to the console.

Episode 13

MIT Licensed

Similar vizzes

Loading thumbnail…

dv.13 - Loading and Parsing CSV Data

This example demonstrates how to fetch and display raw CSV data as plain text in a web page. It uses the Fetch API to retrieve a CSS named colors dataset from a GitHub gist, then inserts the response text into a `<pre>` element. The code defines an asynchronous `fetchText` helper that reads the response body as text, and handles the promise chain by assigning the resulting string to the page’s root element, showing the comma-separated values without any parsing or visualization.

Zzach b.
83% match
Loading thumbnail…

Dataviz 2 - Loading data (Fetch)

This example demonstrates how to load external data into a web page using the JavaScript `fetch` API. It retrieves a CSV file containing CSS named colors from a GitHub Gist and logs the raw text to the browser console. The code defines an asynchronous helper function `fetchText` that requests the URL and parses the response as text using `response.text()`. A commented-out alternative shows chained promises for the same operation. The visualization itself is not rendered; the example focuses solely on the data-loading step.

RRyAlpha
82% match
Loading thumbnail…

loading and parsing CSV data

This example demonstrates the initial step of working with external data in a web visualization: fetching and logging raw CSV content. It uses the browser’s native `fetch` API to asynchronously retrieve a text file from a GitHub gist URL, then parses the response with `response.text()`. The result is printed to the browser console via `console.log`, showing the raw comma-separated data as a string. No parsing library like d3.csv or PapaParse is involved, and no visual output is rendered—only the raw text is exposed for inspection. The approach relies on plain JavaScript and a local async function, `fetchText`, to handle the request.

SSamuele Greco
82% match
Loading thumbnail…

Loading and Parsing CSV Data

This example shows the initial step of loading raw CSV data from a remote source and printing its contents to the browser console. It defines an asynchronous `fetchText` helper that uses the Fetch API to retrieve a text file from a GitHub Gist URL, then chains `.then()` to log the parsed text. The code also includes commented-out alternatives and an unfinished `fetch(url)` call. The example relies solely on native browser APIs—`fetch`, `response.text()`, and `async/await`—to handle the CSV file, without any external libraries or data parsing beyond displaying the raw string.

TTetiana Humeniuk
80% match
Loading thumbnail…

dv2020-ep15-viz15 - Parsing Data with D3 (long way)

This example demonstrates a minimal workflow for parsing fetched CSV data with D3, displaying the resulting file size, row count, and column count as plain text. It fetches a raw text file from a GitHub gist using the Fetch API, then parses it with `d3.csvParse`. The parsed data’s `length` and `columns` properties are used to compute the summary, which is rendered inside a `<pre>` element. The visualization relies on D3 v5 and highlights the distinction between raw text and structured data parsing.

Zzach b.
80% match
Loading thumbnail…

Loading data using fetch

This example demonstrates how to load external CSV data asynchronously in the browser using the Fetch API. It fetches a raw CSV file of monthly death counts from a GitHub gist, then logs the returned text to the console. The code uses a custom `fetchText` function that awaits the response and extracts plain text via `response.text()`. The visualization is minimal, with no charts or rendering—it focuses solely on the data-loading step using vanilla JavaScript within an HTML page.

RRajaeKrib
80% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the raw text output in the browser console. It uses the Fetch API’s `fetch()` method to retrieve the file from a GitHub Gist, then calls `response.text()` to convert the response into a string. The code defines an asynchronous helper function, `fetchText`, that abstracts this process, and logs the resulting CSV content—which contains CSS named colors—to the console. No data visualization or rendering occurs; the focus is purely on data acquisition and parsing fundamentals.

HHui Wang
79% 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
79% match