Fetching CSV

100%

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Jun 9, 2017

This example fetches three CSV files in parallel and displays the sum of their numbers in a large headline. It uses the Fetch API with Promises to load the data, then parses each file with d3-dsv’s `d3.csvParse`. The resulting values are added together and written to the page. The visualization relies on WebGL rendering for the final output, though the code itself focuses on asynchronous data loading.

AI-generated description

This example demonstrates using the Fetch API and Promises, in conjunction with d3-dsv, to load a few CSV files in parallel. Compare this to using d3-queue, which also allows configurable concurrency.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/44466fb0ff73bd630172020fc66df1dc'>Fetching CSV</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fetching CSV

This example demonstrates loading three CSV files in parallel using the Fetch API and Promises. It visually presents the result of summing the numbers from each file, updating the text “1 + 2 + 3” with the computed total. The code relies on `fetch` to retrieve each CSV and `d3.csvParse` from d3-dsv to parse the responses, then combines them with `Promise.all`. The final sum is displayed in an HTML heading, showing asynchronous data loading and aggregation.

Mmbostock

91% match

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

79% match

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

79% match

Loading thumbnail…

Parsing CSV Data with D3

This visualization demonstrates how to parse CSV data using D3.js by fetching a remote file and displaying summary statistics. The page shows the dataset’s row count, column count, and file size in kilobytes within a large text element. It uses D3’s `d3.csv()` function to load and parse the CSV from a GitHub gist, then formats the data with `d3.csvFormat()` to calculate its size. The example also includes commented-out code using `fetch()`, `async`/`await`, and `d3.csvParse()` as an alternative parsing approach.

TTetiana Humeniuk

78% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates two methods for loading and parsing CSV data from a remote URL, displaying the resulting row count, column count, and file size. It uses d3.csv with a Promise, and fetch with async/await combined with d3.csvParse to parse the raw text. The data comes from a gist-hosted CSV file containing CSS color names, and both approaches output results to the browser console and page elements. The example highlights the equivalent functionality of D3’s wrapper and native fetch with explicit parsing.

Ssheetbag

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

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

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

78% match