parsing csv with d3.csv

Question

I am trying to pare a csv file and I have tried several methods in js without luck. I am quite new at coding and got stuck here.

Here is my first try. I get error messages saying "Uncaught TypeError: d3.csv(...).then is not a function"

d3.csv("/data/testfile.csv").then(function(data) {
  console.log(data[0]);
});

I tried this code as well. the alert of bfile shows me correct values but I still need to parse it....

var file = document.getElementById("file input").files[0];
var reader = new FileReader();
reader.onload = function(e) {  
  bfile = e.target.result 
  alert(bfile);   // this shows bfile

  }
  reader.readAsText(file);
};

The third attempt. Here it complains and says that "then is not a function".

d3.csv("/data/cities.csv").then(function(data) {
  data.forEach(function(d) {
    d.population = +d.population;
    d["land area"] = +d["land area"];
  });
  console.log(data[0]);
});

This is what I would like to achieve after the csv pasing:

=> {city: "seattle", state: "WA", population: 652405, land area: 83.9}

Any ideas how I can solve this?

Answer 1

Issue

The version of D3 you are using, seems to not to support JavaScript's Promises . See similar question: Uncaught TypeError: d3.csv(...).then is not a function

This is how you call function in D3 prior to version 5 :

d3.csv("file.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

It uses asynchronous callbacks to load data (like the function(error, data) argument above). See also the example from the D3 v3 docs .

Since D3 version 5 instead of asynchronous callbacks the modern Promises got introduced, so the call became:

d3.csv("file.csv").then(function(data) {
  console.log(data);
});

See the release page on breaking changes in v5 :

Like commented by BallpointPen :

Only in v5 does d3.csv return a Promise, which is needed for then then() function

Solution

From expected output:

{city: "seattle", state: "WA", population: 652405, land area: 83.9}

we can suppose your CSV looks like:

city, state, population, land area
"seattle", "WA", 652405, 83.9

We need the CSV input example to reproduce.

D3

With older versions of D3 (like v3):

d3.csv("/data/testfile.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

With newer versions of D3 (like v5):

d3.csv("/data/testfile.csv").then(function(data) {
  console.log(data[0]);
});

Alternative CSV-parser

Why not use Papa Parse which claims to be:

The powerful, in-browser CSV parser for big boys and girls

Example usage:

var csv = 'city, state, population, land area\n"seattle", "WA", 652405, 83.9';

var results = Papa.parse(csv, {
    header: true  // Key data by field name instead of index/position
});

Output (copied from console):

{
  data: [
    {city: "seattle", state: "WA", population: " 652405", "land area": " 83.9"}
  ],
  errors: [],
  meta: {aborted: false, cursor: 64, delimiter: ",", fields: ["city", " state", " population", " land area"], linebreak: "↵", truncated: false}
}

or parse without header-row as simple array:

{
  data: [
    ["city", " state", " population", " land area"],
    ["seattle", " "WA"", " 652405", " 83.9"]
  ],
  errors: [],
  meta: {delimiter: ",", linebreak: "↵", aborted: false, truncated: false, cursor: 64}
}

It has a demo-page to try CSV-parsing online.