Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

});
like image 872
Zaynaib Giwa Avatar asked Jan 11 '17 01:01

Zaynaib Giwa


People also ask

What is D3 time format?

d3-time-format is a JavaScript module used to parse or format dates in various locale-specific representations. The module is inspired by the strptime and strftime functions from the C standard library.

What is D3 timeParse?

Converting Strings to DatesD3 provides a method named timeParse(specifier) than can be used to convert string representations of temporal data to Date objects. The method takes a string as an argument that specifies the format of the data.

What does D3 JSON return?

The function d3. json() is an asynchronous function that directly returns (with an undefined value I assume). Only when the data is received from the backend, the callback function you passed to it will be called.

What is D3 extent?

extent() function in D3. js is used to returns the minimum and maximum value in an array from the given array using natural order. If an array is empty then it returns undefined, undefined as output.


1 Answers

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>
like image 179
Gerardo Furtado Avatar answered Sep 22 '22 01:09

Gerardo Furtado