CODEWITHSUNDEEP
javascriptjsond3.js
Zaynaib Giwa
Zaynaib Giwa

Reputation: 5856

Parsing dates with d3.js v.4

I'm trying to learn how to code with the d3.js by working on my first d3 mini project based on the Free Code Camp curriculum. I am trying to make a simple bar graph with this json file. I got stuck trying to format the dates in the file. I've tried looking at the d3.js API and I am still lost. I would be very grateful for any advice that comes my way. Here is my code

    // set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//then make a function to parse the time
var parseDate = d3.timeFormat("%Y-%m-%d");

// set the ranges
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
var y = d3.scaleLinear().range([height, 0],0.5);

// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");


//setup axis


// get the data
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json").get(function(error,dataset){
  var d =dataset.data;
  d.forEach(function(datum, i) {
        d[0]=parseDate(datum[0]);
         //console.log(datum[1]);
    });
  //console.log(d[3][0]);

});

Upvotes: 8

Views: 15592

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

You want timeParse, not timeFormat:

var parseDate = d3.timeParse("%Y-%m-%d");

Using timeParse,

the returned function parses a specified string, returning the corresponding date or null if the string could not be parsed according to this format’s specifier.

And this is how your forEach function should be:

data.forEach(function(d) {
    d[0] = parseDate(d[0]);
});

Here is a demo:

var parseDate = d3.timeParse("%Y-%m-%d");

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(json) {

    var data = json.data;

    data.forEach(function(d) {
        d[0] = parseDate(d[0]);
    });
  
    console.log(data);
  
});
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 18

Related Questions