Fetching CSV

100%

✓ Published0🌍 Public

Last edited Jul 4, 2016

Created on May 16, 2016

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.

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.

gpl-3.0 Licensed

Similar vizzes

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…

fresh block

This example demonstrates loading two separate CSV files with D3 v5 and logging their contents to the browser console. It shows how to use promises with `d3.csv` to sequentially load multiple datasets, with each file’s data converted to JSON objects and printed for inspection. The page itself renders no visual output, serving purely as a test harness for asynchronous data fetching. It relies on the native Fetch API via the promise-polyfill and D3’s CSV parsing, and includes a minimal HTML structure with a heading and script. The data sources are `file1.csv` and `file2.csv`, each containing simple numeric columns.

GGerardoFurtado

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

78% match

Loading thumbnail…

fresh block

This example demonstrates how to load and combine multiple CSV files using D3 v5’s Promise API. It shows the parsed contents of two separate CSV files (file1.csv and file2.csv) logged to the browser console after both have loaded successfully. The code uses `d3.csv()` to fetch each file and `Promise.all()` to wait for both requests before logging the resulting arrays of objects. The page displays a simple heading and relies entirely on console output for visualization, with no graphical rendering. The data source is the two CSV files, and the approach highlights asynchronous data loading in D3.

GGerardoFurtado

77% match

Loading thumbnail…

fresh block

This example demonstrates how to load and parse two separate CSV files using D3.js v5, then combine them with a Promise.all to log their contents to the browser console. It shows the process of handling multiple asynchronous data sources and verifying their successful retrieval. The code uses `d3.csv` to fetch each file and `Promise.all` to wait for both to resolve, while also loading the Fetch API and promise polyfills for broader browser support. The visualization itself is minimal, with the output appearing solely as console messages rather than rendered graphics.

GGerardoFurtado

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

77% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using the Fetch API and D3.js. It fetches a remote CSV containing CSS named colors, parses the text into an array of objects with `d3.csvParse`, and then displays summary statistics about the dataset. The output shows the raw text size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code uses an `async/await` fetch helper to avoid nested promise callbacks.

AAnthony Ynami

76% match

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

76% match