How to read in CSV with d3 v4?

Question

I'm just having a little trouble understanding the documentation for CSV Parse with D3. I currently have:

d3.parse("data.csv",function(data){
    salesData = data; 
});

But I keep on getting the error:

Uncaught TypeError: d3.parse is not a function

What is this supposed to look like? I'm just a little confused, and the only examples that I could find was something like this.

I also tried something like:

d3.dsv.parse("data.csv",function(data){
    salesData = data; 
});

and got:

Uncaught TypeError: Cannot read property 'parse' of undefined

Why is this happening? Any help would be greatly appreaciated, thanks!!

Solution 1

There is some misunderstanding here: you're confusing d3.csv, which is a request, with d3.csvParse, which parses a string (and also mixing D3 v3 syntax with D3 v4 syntax). This is the difference:

d3.csv (D3 v4)

The d3.csv function, which takes as arguments (url[[, row], callback]):

Returns a new request for the CSV file at the specified url with the default mime type text/csv. (emphasis mine)

So, as you can see, you use d3.csv when you want to request a given CSV file at a given url.

For example, the snippet below gets the CSV at the url between quotes, which looks like this...

name, parent
Level 2: A, Top Level
Top Level, null
Son of A, Level 2: A
Daughter of A, Level 2: A
Level 2: B, Top Level

... and logs the parsed CSV file, check it:

d3.csv("https://gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){
    console.log(data);
});

<script src="https://d3js.org/d3.v4.min.js"></script>

d3.csvParse

On the other hand, d3.csvParse (or d3.csv.parse in D3 v3), which takes as arguments (string[, row]):

Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of objects representing the parsed rows.

So, you use d3.csvParse when you want to parse a string.

Here is a demo, suppose you have this string:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

If you want to parse it, you'll use d3.csvParse, not d3.csv:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

var parsed = d3.csvParse(data);

console.log(parsed);

<script src="https://d3js.org/d3.v4.min.js"></script>

Solution 2

You can get csv data into d3 like the following -

// get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
      console.log(data);
      //format data if required...
      //draw chart
});

Solution 3

I also could not get the d3.csv("csv_file.csv", function(data) { //modifying code } to work.

A classmate recommended using the following, which has worked so far:

d3.csv("data.csv").then(function(data){
//modifying code
}

As noted in the comments below, this is a fix if you're running v5 instead of v4.

Solution 4

Use d3.csv("data.csv", function(data){...}) to get CSV from url and parse, or use d3.csv.parse() to parse a CSV-formatted string.

View more solutions

Comments

[Gerardo Furtado]

Since the method has the same name but different signature in D3 v5 I added "v4" in the question's title, to make it clear for future readers and avoid unnecessary mistakes: this Q/A does not apply for v5.

[tsando]

it seems the above syntax suggested for d3 v4 has now changed in v5 and the above no longer returns the data object, but rather each element of the object

[Gerardo Furtado]

@tsando, indeed, as I already answered here. I just edited the title to make this clear.

[altocumulus]

The question explicitly asked for v4, whereas your change is necessary only when using v5. Although your answer is correct for the latest version it somehow misses the question. I recommend you consider deleting it.

[ocean800]

@altocumulus while thats true, I think it's possible that someone using a later version will stumble upon my question and could use this answer. Would have been better to include this was for v5 of course, though. Thanks for the clarification.