title: dealing with dates on d3.js axis
body: <p>How do I make my line x-axis based on date in d3.js?</p>
  
  <p>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.</p>
  
  <pre><code>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);
    });
  </code></pre>
  
  <p>JSON as printed out by my action:</p>
  
  <pre><code>[{"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"}]`
  </code></pre>