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(".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]);

});

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]);

});

• javascript
• json
• d3.js

1 Answer 1

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>