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 replaced 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.v1.min.js"></script>
<script>
d3.csv("/path/to/file.csv").then(function(data) {
console.log(data);
});
</script>
API Reference
# d3.blob(input[, init]) <>
Fetches the binary file at the specified input URL as a Blob. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields.
# d3.buffer(input[, init]) <>
Fetches the binary file at the specified input URL as an ArrayBuffer. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields.
# d3.csv(input[, init][, row]) <>
Equivalent to d3.dsv with the tab character as the delimiter.
# d3.dsv(delimiter, input[, init][, row]) <>
Fetches the DSV file at the specified input URL. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields. 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:
d3.dsv(",", "test.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1),
make: d.Make,
model: d.Model,
length: +d.Length
};
}).then(function(data) {
console.log(data);
});
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.
See also d3.csv and d3.tsv.
# d3.image(input[, init]) <>
Fetches the image at the specified input URL. If init is specified, sets any additional properties on the image before loading. For example, to enable an anonymous cross-origin request:
d3.image("https://example.com/test.png", {crossOrigin: "anonymous"}).then(function(img) {
console.log(img);
});
# d3.json(input[, init]) <>
Fetches the JSON file at the specified input URL. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields.
# d3.text(input[, init]) <>
Fetches the text file at the specified input URL. If init is specified, it is passed along to the underlying call to fetch; see RequestInit for allowed fields.
# d3.tsv(input[, init][, row]) <>
Equivalent to d3.dsv with the tab character as the delimiter.