Accepted answer

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("", function(data){
<script src=""></script>


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

<script src=""></script>


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

<script src=""></script>
 d3.csv("csv/cars.csv", function(data) {

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


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.


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.


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:

//modifying code

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


You can get csv data into d3 like the following -

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

Related Query

More Query from same tag