MENU


d3-fetch

Fetching CSV and JSON with d3-fetch

d3.json, d3.csv, d3.tsv, d3.text, d3.xml and d3.image wrap fetch() and return promises (an optional init passes headers through). d3.csv yields strings unless a row function converts them; d3.autoType infers numbers, booleans, null and ISO dates. Serve the demo folder with python -m http.server:

load.html: fetching the JSON and the CSV from an HTTP serverHTMLLive
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script type="module">                                    // module scripts allow await
  const data = await d3.json('booknest-sales.json');
  console.log(`JSON: ${data.books.length} books, ${data.sales.length} sales rows`);
  const rows = await d3.csv('booknest-sales.csv', d3.autoType);
  console.log(`CSV: ${rows.length} rows, first:`, JSON.stringify(rows[0]));
  await d3.json('missing.json').catch(err => console.log('missing.json:', err.message));
</script>

autoType made "2025-01" a UTC Date. Unlike raw fetch, which resolves on a 404, d3-fetch rejects any response that isn't OK.