D3 Load a CSV file with Promises
Loading a CSV file in D3 with Promises. Also load CSV, JSON, DSV, and TSV files in D3.
More about D3 and Incompatible Versions.
D3 version 5 uses a feature called Promises
. Use this syntax:
d3.csv("file.csv").then(function(dataset) {
console.log(dataset);
});
The console shows this:
Promise {<pending>}
(4) [{…}, {…}, {…}, {…}, columns: Array(2)]
0: {year: "1950", population: "5"}
1: {year: "1951", population: "10"}
2: {year: "1955", population: "15"}
3: {year: "1959", population: "20"}
columns: (2) ["year", "population"]
length: 4
__proto__: Array(0)
Or use this syntax, it shows the same console output:
var mydata = d3.csv("file.csv")
mydata.then(function(dataset) {
console.log(dataset);
});
Or you can load multiple datasets in D3 and Promises like this:
var data1 = d3.csv("file1.csv")
var data2 = d3.csv("file2.csv")
Promise.all([data1, data2]).then(someFunction)
function someFunction(values) {
somethingFunHere(values);
}
More about D3 Promises in the Observable blog and this blog post.
Loading data with CSV, DSV, TSV or JSON
There are a few methods to load data in D3:
d3.dsv
this meansdelimiter separated values
d3.csv
d3.tsv
d3.json
You can use d3.dsv
like this and explicitly define the separator:
d3.dsv(",", "file.csv").then(function(dataset) {
console.log(dataset);
});
Console shows:
Promise {<pending>}
(4) [{…}, {…}, {…}, {…}, columns: Array(2)]
0: {year: "1950", population: "5"}
1: {year: "1951", population: "10"}
2: {year: "1955", population: "15"}
3: {year: "1959", population: "20"}
columns: (2) ["year", "population"]
length: 4
__proto__: Array(0)
Or use d3.csv
as I have shown before:
d3.csv("file.csv").then(function(dataset) {
console.log(dataset);
});
Or use d3.json
like this. Let’s create a data.json
and add this:
[
{
"year": 1950,
"population": 5
},
{
"year": 1951,
"population": 10
},
{
"year": 1955,
"population": 15
},
{
"year": 1959,
"population": 20
}
]
Then load the data:
d3.json("data.json").then(function(dataset) {
console.log(dataset);
});
Console shows the same output:
Promise {<pending>}
(4) [{…}, {…}, {…}, {…}]
0: {year: 1950, population: 5}
1: {year: 1951, population: 10}
2: {year: 1955, population: 15}
3: {year: 1959, population: 20}
length: 4
__proto__: Array(0)
Next: D3 Creating a Bar Chart