Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active September 15, 2020 03:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/44466fb0ff73bd630172020fc66df1dc to your computer and use it in GitHub Desktop.
Save mbostock/44466fb0ff73bd630172020fc66df1dc to your computer and use it in GitHub Desktop.
Fetching CSV
license: gpl-3.0

This example demonstrates using the Fetch API and Promises, in conjunction with d3-dsv, to load a few CSV files in parallel. Compare this to using d3-queue, which also allows configurable concurrency.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
h1 {
text-align: center;
font-family: "Helvetica Neue";
font-size: 96px;
line-height: 350px;
}
</style>
<h1>1 + 2 + 3 = <span id="result">?</span></h1>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
Promise.all([
"one.csv",
"two.csv",
"three.csv"
].map(function(url) {
return fetch(url).then(function(response) {
return response.ok ? response.text() : Promise.reject(response.status);
}).then(function(text) {
return d3.csvParse(text);
});
})).then(function(value) {
var one = +value[0][0].number,
two = +value[1][0].number,
three = +value[2][0].number;
document.querySelector("#result").textContent = one + two + three;
});
</script>
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
number
1
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
number
3
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
number
2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment