d3-fetch module overview
d3-fetch provides convenience methods on top of the Fetch API for loading data. It includes functions for fetching blob, buffer, CSV, DSV, HTML, image, JSON, SVG, text, TSV, and XML files.
d3-fetch
13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
d3.blob() signature and behavior
d3.blob(input, init) fetches the binary file at the specified input URL as a Blob. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. Example: const blob = await d3.blob("example.db");
d3.buffer() signature and behavior
d3.buffer(input, init) fetches the binary file at the specified input URL as an ArrayBuffer. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. Example: const buffer = await d3.buffer("example.db");
d3.csv() signature and behavior
d3.csv(input, init, row) fetches a CSV file at the specified input URL. It is equivalent to d3.dsv with the comma character as the delimiter. The init parameter is optional and passed to fetch. The row parameter is an optional conversion function. Example: const data = await d3.csv("example.csv");
d3.dsv() signature and behavior
d3.dsv(delimiter, input, init, row) fetches a DSV file at the specified input URL with the specified delimiter character. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. An optional row conversion function may be specified to map and filter row objects. If only one of init and row is specified, it is interpreted as the row conversion function if it is a function, and otherwise an init object. Example: const data = await d3.dsv(",", "example.csv");
d3.dsv() row conversion example
The row parameter of d3.dsv allows converting row objects. Example: const data = await d3.dsv(",", "example.csv", (d) => { return { year: new Date(+d.Year, 0, 1), make: d.Make, model: d.Model, length: +d.Length }; });
d3.image() signature and behavior
d3.image(input, init) fetches the image at the specified input URL. The init parameter is optional and sets any additional properties on the image before loading. Example: const image = await d3.image("example.png"); To enable an anonymous cross-origin request: const image = await d3.image("https://example.com/image.png", {crossOrigin: "anonymous"});
d3.json() signature and behavior
d3.json(input, init) fetches the JSON file at the specified input URL. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. If the server returns a status code of 204 No Content or 205 Reset Content, the promise resolves to undefined. Example: const data = await d3.json("example.json");
d3.svg() signature and behavior
d3.svg(input, init) fetches the file at the specified input URL as text and then parses it as SVG using DOMParser. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. Example: const document = await d3.svg("example.svg");
d3.text() signature and behavior
d3.text(input, init) fetches the text file at the specified input URL. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. Example: const text = await d3.text("example.txt");
d3.tsv() signature and behavior
d3.tsv(input, init, row) fetches a TSV file at the specified input URL. It is equivalent to d3.dsv with the tab character as the delimiter. The init parameter is optional and passed to fetch. The row parameter is an optional conversion function. Example: const data = await d3.tsv("example.tsv");
d3.xml() signature and behavior
d3.xml(input, init) fetches the file at the specified input URL as text and then parses it as XML using DOMParser. The init parameter is optional and is passed along to the underlying fetch call; see RequestInit for allowed fields. Example: const document = await d3.xml("example.xml");
d3-fetch module overview
The d3-fetch module provides convenient parsing on top of the Fetch API. It has built-in support for parsing JSON, CSV, and TSV. Additional formats can be parsed by using d3.text directly. This module replaced d3-request.