CODEWITHSUNDEEP
javascriptfilecsvd3.js
user5415677
user5415677

Reputation:

d3 retrieval of a csv file returns Nan in the javascript console

I'm just learning how to use d3. I'm having an issue when trying to retrieve a .cvs/excel file. At line 13 I get a console reading of "4 Nan", or "4 undefined, undefined". I might have the location of books.csv in the wrong location. It is located "xampp\htdocs\books.csv" along with my html file and d3.js.. The row and columns are 5 * 2. Any questions or help is much appreciated!

<!DOCTYPE html>
<html>
 <head>
  <meta charset"utf-8">
   <title> D3 example</title>
   <script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
 <body>

  <script>
        d3.csv("books.csv", function(myArrayOfObjects){
        myArrayOfObjects.forEach(function(d){
            console.log( d.x + ", " + d.y);
        });
    });
 </script>
  </body>
    <body>
        Is it Working?
    </body>
</html>

books.csv file contains: 
4, 2
5, 10
3, 2
1, 7
0, 11

Upvotes: 1

Views: 1500

Answers (3)

user316264
user316264

Reputation: 19

I ran to the same issue, my csv file looked like this:

Name,Value 
Dan, 31
Matt, 33
Mike, 29

To fix the NAN issue I had to wrap the strings with quotations:

"Name", "Value"
"Dan", 31
"Matt", 33
"Mike", 29

This fixed my issue.

Upvotes: 0

twoje
twoje

Reputation: 101

Note: While I would recommend you do add column headers to your CSV file, if that isn't something you're willing to or cannot do, keep reading.

You can parse a CSV file that doesn't contain headers, by altering the default parsing functionality of d3.csv with dsv.parseRows.

Unlike dsv.parse, this method treats the header line as a standard row, and should be used whenever DSV content does not contain a header.

You can do this by following the documentation on d3.csv, notably

The row conversion function can be changed by calling request.row on the returned instance.

I forked the plunker of the accepted answer using the following:

d3.request("wrongData.csv") .mimeType("text/csv") .response(xhr => d3.csvParseRows(xhr.responseText, d => d)) .get(data => console.log(data));

Edit: here's a working plunker https://plnkr.co/edit/hD8NiyIpIM8MEummDVxG?p=preview

Upvotes: 1

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

The problem is just the structure of your CSV:

The first line of your CSV is the header. d3.csv uses that line to create the objects. So, in a given CSV:

foo, bar
42, 12

d3.csv will create this data:

[{"foo": 42, "bar": 12}]

Right now, your CSV has numbers as headers, and this will simply not work with d.x and d.y. Javascript allows you to name an object key as numbers (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types), but in this case you have to reference it using a bracket notation:

console.log( d["4"] + ", " + d["2"]);

Once 4 and 2 are the headers.

That being said, here is an alternative CSV:

x,y
4, 2
5, 10
3, 2
1, 7
0, 11

Now, x and y are the headers.

I created a plunker to show you the difference: https://plnkr.co/edit/OipJg11P3aEvwgQ35xbh?p=preview

Your CSV is "wrongData.csv", and mine is "rightData.csv". Check the console.

Upvotes: 1

Related Questions