What is d3-fetch?
The d3-fetch module provides a convenient way to fetch resources asynchronously, such as text files, JSON data, and binary files, using promises. It is part of the D3.js library, which is widely used for data visualization. d3-fetch simplifies the process of loading external data into your web applications, making it easier to integrate and manipulate this data within your D3 visualizations.
What are d3-fetch's main functionalities?
Fetching Text Files
This feature allows you to fetch and read text files. The code sample demonstrates how to load a text file and log its contents to the console.
d3.text('path/to/your/file.txt').then(function(data) { console.log(data); });
Fetching JSON Data
This feature enables you to fetch and parse JSON data. The code sample shows how to load JSON data and log it to the console, making it easy to integrate into your visualizations or data processing logic.
d3.json('path/to/your/data.json').then(function(data) { console.log(data); });
Fetching Binary Files
This feature is used for fetching binary files, such as images or other binary data. The code sample demonstrates how to load a binary file and log the Blob object to the console.
d3.blob('path/to/your/file.bin').then(function(blob) { console.log(blob); });
Other packages similar to d3-fetch
axios
Axios is a popular HTTP client for the browser and node.js. It provides a simple to use API for making XMLHttpRequests from the browser or HTTP requests from node.js. Compared to d3-fetch, axios offers a wider range of features, including intercepting requests and responses, transforming request and response data, and automatic transforms for JSON data. However, it is not specifically designed for integrating with D3 visualizations.
fetch-json
fetch-json is a lightweight wrapper around the Fetch API, designed to simplify fetching and posting JSON data. It provides a more focused API for JSON operations compared to d3-fetch, but lacks the broader file type support found in d3-fetch, such as text and binary file fetching.
d3-fetch
This module provides convenient parsing on top of Fetch. For example, to load a text file:
d3.text("/path/to/file.txt").then(function(text) {
console.log(text);
});
To load and parse a CSV file:
d3.csv("/path/to/file.csv").then(function(data) {
console.log(data);
});
This module has built-in support for parsing JSON, CSV, and TSV. You can parse additional formats by using text directly. This module is intended to replace d3-request.
Installing
If you use NPM, npm install d3-fetch
. Otherwise, download the latest release. You can also load directly from d3js.org as a standalone library. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3
global is exported:
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v0.min.js"></script>
<script>
d3.csv("/path/to/file.csv").then(function(data) {
console.log(data);
});
</script>
Try d3-fetch in your browser.
API Reference
# d3.csv(url[, row])
Fetches the CSV file at the specified url. An optional row conversion function may be specified to map and filter row objects to a more-specific representation; see dsv.parse for details. For example:
function row(d) {
return {
year: new Date(+d.Year, 0, 1),
make: d.Make,
model: d.Model,
length: +d.Length
};
}
# d3.json(url)
Fetches the JSON file at the specified url.
# d3.text(url)
Fetches the text file at the specified url.
# d3.tsv(url[, row])
Fetches the TSV file at the specified url. An optional row conversion function may be specified to map and filter row objects to a more-specific representation; see dsv.parse for details. For example:
function row(d) {
return {
year: new Date(+d.Year, 0, 1),
make: d.Make,
model: d.Model,
length: +d.Length
};
}