3

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:

  1. 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

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

  3. 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?

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Alex Tao
  • 31
  • 1
  • 1
  • 3
  • 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 Apr 09 '16 at 18:09
  • 1
    I've edited the question and looked for any typos in file name and code. Haven't found any. – Alex Tao Apr 09 '16 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: http://stackoverflow.com/questions/9948350/how-to-use-d3-in-node-js-properly – Gerardo Furtado Apr 10 '16 at 13:51

1 Answers1

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.

Mohamed Ali JAMAOUI
  • 14,275
  • 14
  • 73
  • 117
  • 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. – Alex Tao Apr 09 '16 at 18:14