d3.js parsing date error with csv file

Question

I have a problem with parsing dates in a csv file. Have been looking for hours online and in books and testing, without finding the solution.

Perhaps someone can help.

The code works fine for reading a file with parsing just numbers. But when parsing a file with dates I get the following error message indicating the date format is not recognised:

Problem parsing d="MNaN,268.5466377440347LNaN,117.78741865509761LNaN ...

The file looks like this:

 date,value
 11-11-13,582
 12-11-13,860
 13-11-13,940

Code: (js)

function myFunction() {
      d3.csv('data/Date.csv', draw);
}

function draw(data) {
    "use strict";
    var margin = 50,
        width = 800 - margin,
        height = 350 - margin;

    var parseDate = d3.time.format("%d-%m-%y").parse;

    var x_scale = d3.time.scale()
        .domain(d3.extent(data,function(d){return d.date}))
        .range([margin, width]);

    var y_scale = d3.scale.linear()
       .domain(d3.extent(data,function(d){return d.value}))
       .range([height, margin]);

    var x_axis = d3.svg.axis()
        .scale(x_scale)
        .orient("bottom");

    var y_axis = d3.svg.axis()
        .scale(y_scale)
        .orient("left");

    var line = d3.svg.line()
        .x(function(d){return x_scale(d.date);})
        .y(function(d){return y_scale(d.value);});

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

    d3.select("body") 
      .append("svg")
        .attr("width", width+margin)
        .attr("height", height+margin)
      .append('g')
        .attr("transform","translate(" + margin + "," + margin + ")");

    d3.select('svg')
      .append('path')
        .datum(data)
        .attr ("class","line")
        .attr('d', line);

    d3.select("svg")
      .append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(x_axis);

    d3.select("svg")
      .append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin + ",0)")
      .call(y_axis);
}

<body>
<button onclick="myFunction()">Show Graph</button>
</body>

Remark: this is written in js

user2992220
– user2992220

2013-11-14 14:50:44 +00:00
Commented Nov 14, 2013 at 14:50 — user2992220
– user2992220, Commented Nov 14, 2013 at 14:50

ZillGate · Accepted Answer · 2013-11-14 16:34:17Z

5

You should move the following code

data.forEach(function(d) {
    console.log(d.date);
    console.log(format.parse(d.date));
    d.date = format.parse(d.date);
    d.value = +d.value;
});

Just after

var format = d3.time.format("%d-%m-%y");

Your original code used the parsed date before the date is parsed:)

edited Nov 14, 2013 at 16:34

answered Nov 14, 2013 at 16:11

ZillGate

1,18312 silver badges23 bronze badges

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

Comments

Lars Kotthoff · Accepted Answer · 2013-11-14 16:13:27Z

2

You are setting the domain of your x scale before actually parsing the dates, i.e. the scale will expect strings and not dates as input. You need to move the code

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = +d.value;
});

before

var x_scale = d3.time.scale()
    .domain(d3.extent(data,function(d){return d.date}))
    .range([margin, width]);

In general, you should do any processing right at the start of the handler function.

answered Nov 14, 2013 at 16:13

Lars Kotthoff

109k16 gold badges210 silver badges210 bronze badges

1 Comment

user2992220 Over a year ago

Thank you. This is indeed the solution.

Collectives™ on Stack Overflow

d3.js parsing date error with csv file

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related