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]);
});
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With