Fetching CSV

100%

✓ Published0🌍 Public

Last edited Jun 22, 2016

Created on Jun 22, 2016

This example shows how to load and parse three CSV files in parallel, then displays the sum of their `number` fields in a large heading. It uses the Fetch API and Promises to request the files, and d3-dsv’s `d3_dsv.csvParse` to convert each response text into an array of objects. After all three fetches complete via `Promise.all`, the code reads the first row’s `number` value from each parsed dataset, adds them together, and updates the page’s result span. The data sources are three local CSV files, each containing a single numeric value.

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

94% match

Loading thumbnail…

Fetching CSV

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.

TTerrySmithDC

92% 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…

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…

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…

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

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

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

76% match