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!!

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. — Gerardo Furtado, Apr 16 '18 at 03:53

Gerardo Furtado · Accepted Answer · 2019-10-09T04:58:29.417

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>

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 — tsando, Apr 05 '18 at 16:53
@tsando, indeed, as I already answered [here](https://stackoverflow.com/a/49534634/5768908). I just edited the title to make this clear. — Gerardo Furtado, Apr 16 '18 at 03:54

score 4 · Answer 2 · edited Feb 21 '20 at 16:25

4

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
});

edited Feb 21 '20 at 16:25

e-shfiyut

3,538
2
30
31

answered Feb 16 '17 at 22:00

sparta93

3,684
5
32
63

Heather Claxton · Answer 3 · 2019-07-11T14:10:58.677

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.

edited Jul 11 '19 at 14:10

answered Jun 08 '19 at 02:04

Heather Claxton

1,001
8
11

2

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. – altocumulus Jun 08 '19 at 06:18
2

@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. – ocean800 Jul 09 '19 at 14:46

score 1 · Answer 4 · answered Feb 16 '17 at 21:59

1

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.

answered Feb 16 '17 at 21:59

surfthecity

160
2
6

score 0 · Answer 5 · answered Mar 02 '18 at 02:21

Here is the code you can use to read csv file using d3.js

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
 d3.csv("csv/cars.csv", function(data) {
 console.log(data[0]);
});
</script>

Note that, the csv file name is "cars.csv", and the file is saved in a folder called csv.

console.log(data[0])

will help you to see the data output in the browser debug window. Where, you can also find if there is any error as well.

How to read in CSV with d3 v4?

5 Answers5

d3.csv (D3 v4)

d3.csvParse

Linked