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); // Hello, world!
});

To load and parse a CSV file:

d3.csv("/path/to/file.csv").then(function(data) {
  console.log(data); // [{"Hello": "world"}, …]
});

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); // [{"Hello": "world"}, …]
});

</script>

Try d3-fetch in your browser.

API Reference

# d3.blob(url) <>

Fetches the binary file at the specified url as a Blob.

# d3.buffer(url) <>

Fetches the binary file at the specified url as an ArrayBuffer.

# 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), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
}

# d3.image(url[, anonymous]) <>

Fetches the image at the specified url. If anonymous is true, the cross-origin request is anonymous.

# 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), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
}