Using D3 to read csv returns html instead of csv data

Question

I have the following d3 code within script tags:

  d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
      console.log(data[0]);

      d.date = parseDate(d.date);
      d.close = +d.close;
    });
    console.log("hello2")

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    svg.append("path") // Add the valueline path.
    .attr("class", "line")
    .attr("d", valueline(data));

    svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

  });

When I check the console in my browser, the output for the console.log was Object {<!DOCTYPE html>: "</head>"}. I'm expected the output to be {"date": "1-May-12", close: "58.13"}.

Why is the callback function using my html as the data parameter rather than my CSV data? Note that I am also running a simple node server so I can read the CSV.

https://github.com/mbostock/d3/wiki/CSV#csv > If an error occurs, the callback function will instead be invoked with null. function(error, data) -> function(data) please. — David Guan, Apr 22 '16 at 05:38
`date,close 1-May-12,58.13 30-Apr-12,53.98 27-Apr-12,67.00 26-Apr-12,89.70 25-Apr-12,99.00` That is what is in my CSV @Cyril — PC3SQ, Apr 22 '16 at 05:43

score 3 · Answer 1 · edited May 23 '17 at 12:07

Let's start from the beginning ... I was trying to read the local csv data.csv from the same folder as my html containing the D3 script. That didn't work because there are built in browser security measures that prevent you from reading from your local machine. Without realizing that was what was causing an issue, I read other SO answers that led me to write my own node server to locally serve up my html and csv. That's when the bug that led me to create this SO question occurred.

The problem now was that when my D3 script was trying to read data.csv, it was reading the html file the D3 script was contained in; D3 was read in basic_chart.html instead of data.csv. That's why I was getting an object with key-value pairs describing an html file rather than a csv. I determined this had something to do with my server script but instead of rewriting the server script, I used the best answer from D3.js loading local data file from file:/// and served up my html and csv by typing python -m SimpleHTTPServer 8888 & on the command line while inside the target files' folder. It worked. Hope this helps someone else out. Thanks for your help @Cyril.

score 0 · Answer 2 · answered Apr 22 '16 at 05:55

0

Your CSV should not be a one liner

Should be like this:

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00

then you can read the csv like this

 d3.csv("data.csv", function(error, data) {
    var parseDate = d3.time.format("%d-%b-%y");
    data.forEach(function(d) {
      d.date = parseDate.parse(d.date);
      d.close = +d.close;
    });
    console.log(data)
 })

working code here

answered Apr 22 '16 at 05:55

Cyril Cherian

32,177
7
46
55

`var parseDate = d3.time.format("%d-%b-%y").parse;` was declared earlier in the code. Also, I am getting the following error as well: `d3.v3.min.js:1 Uncaught TypeError: Cannot read property 'length' of undefined` – PC3SQ Apr 22 '16 at 13:42
`var parseDate = d3.time.format("%d-%b-%y").parse;` this is not the issue the issue is with the csv you passing you can check my working plnk code and change your code accordingly. – Cyril Cherian Apr 22 '16 at 13:45
The csv was already in that format, delimited with commas and newlines. Sorry I couldn't format it correctly up top in a comment. – PC3SQ Apr 22 '16 at 21:33

Using D3 to read csv returns html instead of csv data

2 Answers2

Linked