D3.csv not loading the csv file

Question

For some reason, I am not able to load any .csv file with the d3.csv(...) function. What I do is that I load a csv file using the function above and print out the data directly to the console.

This is what what I do:

I create a file called irisData.csv using notepad. It includes some data from the iris dataset from https://archive.ics.uci.edu/ml/datasets/Iris

sepal_length,sepal_width,petal_length,petal_width,species
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa

I write this code in my irisTest.html, to print out the data into the console, checking if it works correctly.
```
...
d3.csv("irisData.csv", type, function(error, data){
    console.log(data);
});
...
```

Not sure if this is relevant, but I will put it up anyway: In order to run my html, I use Node.js to run a server. This is the code for the server, server.html:

     var http = require('http');
     fs = require('fs');
     http.createServer(function(req, res){
        fs.readFile('./irisTest.html', function(err, data){
           if(err){
              res.writeHead(500, {'Content-type': 'text/plain'});
              res.end('500 - Internal Error');
           }else{
              res.writeHead(200, {'Content-type': 'text/html'});
              res.end(data);
           }
        });
     }).listen(3000);

So what I would expect is that the console prints out an object consisting of the data from the csv file. Something like this:

[
  {data...}
  {data...}
  {data...}
  ...
]

However what I get is the code of my irisTest.html (which is the html code itself) wrapped into objects. I realize that it doesn't matter what I put instead of "irisData.cvs" as the path in d3.csv("irisData.csv", ...), it always outputs my own code such as below. So I thought it might be a problem with the path to the csv file, but there shouldn't be. All files are in the same folder.

 [    
    ...
    {<!DOCTYPE html>: "d3.csv("irisData.csv", type, function(error, data){"}
    {<!DOCTYPE html>: "console.log(data);"}
    {<!DOCTYPE html>: "});}"}
    ...
 ]

Does anyone know what is going on?

Yeah, there are still some cvs in the question that should be edited (click edit in the small links below your question) if that is not the issue. Maybe, maybe you should also search for cvs in your code or data file directory to see if a typo is the issue. — Paul
– Paul, Commented Apr 9, 2016 at 18:09
I've edited the question and looked for any typos in file name and code. Haven't found any. — Alex Tao
– Alex Tao, Commented Apr 9, 2016 at 18:21
Are you using D3 within Node correctly? I can't see the var d3 = require("d3");. Please, have a look at this answer: stackoverflow.com/questions/9948350/… — Gerardo Furtado
– Gerardo Furtado, Commented Apr 10, 2016 at 13:51

Mohamed Ali JAMAOUI · Accepted Answer · 2016-04-09 18:07:04Z

2

As specified in the documentation here, the anonymous function is expected instead of type. I quote the example from the doc:

d3.csv("example.csv", function(d) {
  return {
    year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
}, function(error, rows) {
  console.log(rows);
});

So, in your case, reading the csv file should be done this way:

d3.csv("irisData.csv",function(data){
    console.log(data);
},function(error, rows){
   console.log(rows); 
});

Here is a working example in gist, check the console to see the data object.

edited Apr 9, 2016 at 18:07

answered Apr 9, 2016 at 18:00

Mohamed Ali JAMAOUI

14.8k14 gold badges79 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Tao Over a year ago

I was following a tutorial at youtube called "Introduction to D3", d3.cvs("irisData.csv", type, function(data){..}); should work. However, I did try your way. It still outputs the same thing as before, nothing has changed.

Collectives™ on Stack Overflow

D3.csv not loading the csv file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related