Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dealing with dates on d3.js axis

How do I make my line x-axis based on date in d3.js?

I am attempting to teach myself how to use d3.js. I've been looking at the examples that come with it and have been attempting to recreate the line graph using json delivered data. I'm able to feed the data into the line graph, but the x-axis is supposed to be a date instead of a number. The date format that I'm using is MM/DD/YY, but the graph plots everything at 0. My json data is coming across fine, but I'm having trouble figuring out how to plot the x coordinates. This was taken straight from the line.js that comes in the d3.js examples folder when downloaded. The date portion doesn't do the trick. I'm hoping someone can point me to an example or be able to explain how I can make it work.

d3.json('jsonChartData.action',   function (data) {     console.log(data);      var w = 450,     h = 275,     p = 30,     x = d3.scale.linear().domain([0, 100]).range([0, w]),     y = d3.scale.linear().domain([0, 100]).range([h, 0]);      var vis = d3.select("body")     .data([data])     .append("svg:svg")     .attr("width", w + p * 2)     .attr("height", h + p * 2)     .append("svg:g")     .attr("transform", "translate(" + p + "," + p + ")");      var rules = vis.selectAll("g.rule")     .data(x.ticks(5))     .enter().append("svg:g")     .attr("class", "rule");      rules.append("svg:line")     .attr("x1", x)     .attr("x2", x)     .attr("y1", 0)     .attr("y2", h - 1);      rules.append("svg:line")     .attr("class", function(d) { return d ? null : "axis"; })     .attr("y1", y)     .attr("y2", y)     .attr("x1", 0)     .attr("x2", w + 1);      rules.append("svg:text")     .attr("x", x)     .attr("y", h + 3)     .attr("dy", ".71em")     .attr("text-anchor", "middle")     .text(x.tickFormat(10));      rules.append("svg:text")     .attr("y", y)     .attr("x", -3)     .attr("dy", ".35em")     .attr("text-anchor", "end")     .text(y.tickFormat(10));      vis.append("svg:path")     .attr("class", "line")     .attr("d", d3.svg.line()     .x(function(d) { return x(d3.time.days(new Date(d.jsonDate))); })     .y(function(d) { return y(d.jsonHitCount); }));      vis.selectAll("circle.line")     .data(data)     .enter().append("svg:circle")     .attr("class", "line")     .attr("cx", function(d) { return x(d3.time.days(new Date(d.jsonDate))); })     .attr("cy", function(d) { return y(d.jsonHitCount); })     .attr("r", 3.5);   }); 

JSON as printed out by my action:

[{"jsonDate":"09\/22\/11","jsonHitCount":2,"seriesKey":"Website Usage"},`{"jsonDate":"09\/26\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/27\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/29\/11","jsonHitCount":26,"seriesKey":"Website Usage"},{"jsonDate":"09\/30\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/03\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"10\/06\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/11\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/12\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/13\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/14\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"10\/17\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/18\/11","jsonHitCount":6,"seriesKey":"Website Usage"},{"jsonDate":"10\/19\/11","jsonHitCount":8,"seriesKey":"Website Usage"},{"jsonDate":"10\/20\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/21\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"10\/24\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/27\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/01\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/02\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/03\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/04\/11","jsonHitCount":37,"seriesKey":"Website Usage"},{"jsonDate":"11\/08\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/10\/11","jsonHitCount":39,"seriesKey":"Website Usage"},{"jsonDate":"11\/11\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/14\/11","jsonHitCount":15,"seriesKey":"Website Usage"},{"jsonDate":"11\/15\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/16\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"11\/17\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"11\/21\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/22\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/23\/11","jsonHitCount":11,"seriesKey":"Website Usage"},{"jsonDate":"11\/24\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/28\/11","jsonHitCount":10,"seriesKey":"Website Usage"},{"jsonDate":"11\/29\/11","jsonHitCount":3,"seriesKey":"Website Usage"}]` 
like image 674
Risu Avatar asked Nov 28 '11 19:11

Risu


People also ask

What does D3 timeParse do?

D3 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 string contains directives that specify what types of temporal information is in the temporal data.

What is D3 js axis component?

Advertisements. D3 provides functions to draw axes. An axis is made of Lines, Ticks and Labels. An axis uses a Scale, so each axis will need to be given a scale to work with.

What is scaleBand D3?

scaleBand() function in D3. js is used to construct a new band scale with the domain specified as an array of values and the range as the minimum and maximum extents of the bands. This function splits the range into n bands where n is the number of values in the domain array.

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're trying to use d3.scale.linear() for dates, and that won't work. You need to use d3.time.scale() instead (docs):

// helper function function getDate(d) {     return new Date(d.jsonDate); }  // get max and min dates - this assumes data is sorted var minDate = getDate(data[0]),     maxDate = getDate(data[data.length-1]);  var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 

Then you don't need to deal with the time interval functions, you can just pass x a date:

.attr("d", d3.svg.line()     .x(function(d) { return x(getDate(d)) })     .y(function(d) { return y(d.jsonHitCount) }) ); 

Working fiddle here: http://jsfiddle.net/nrabinowitz/JTrnC/

like image 111
nrabinowitz Avatar answered Oct 14 '22 03:10

nrabinowitz