CODEWITHSUNDEEP
datecsvd3.js
MacKenzie Alessi
MacKenzie Alessi

Reputation: 21

Parsing CSV dates not working in D3.js

The x intervals in my graph are not showing up. I believe this is likely due to the fact that my date parsing is not working. Anybody have any clue what's wrong? Thanks!

The csv file only has two columns. The latter by the name of "actionat" is the one with the dates and time. The y column seems to be working, as the intervals are showing up on the graph.

<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

    
// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");
              
// Parse the date / time
var parseDate = d3.time.format("%m-%d-%Y %H:%M").parse;

// Get the data
d3.csv("3E8 Score and Date - Sheet1.csv", function(error, data) {
    data.forEach(function(d) {
        d.actionat = parseDate(d.actionat.toString());
        d.studenttotalscore = +d.studenttotalscore;
    });
    
// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.actionat); })
    .y(function(d) { return y(d.studenttotalscore); });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.actionat; }));
    y.domain([0, d3.max(data, function(d) { return d.studenttotalscore; })]);

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

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

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

});

</script>

Upvotes: 1

Views: 1215

Answers (1)

MacKenzie Alessi
MacKenzie Alessi

Reputation: 21

So after reviewing my code a bit more, it appears it was just a syntax issue. The CSV file date is formatted as follows, e.g., 1/20/2015 19:20. I just needed to change the following line of code from:

var parseDate = d3.time.format("%m-%d-%Y %H:%M").parse;

to this:

var parseDate = d3.time.format("%m/%d/%Y %H:%M").parse;

Upvotes: 1

Related Questions