title: line chart of json data in d3
body: <p>I am learning d3. I want to make a line chart using json data. The data I am using is:</p>
  
  <pre><code>var data = [
      { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
      { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
      { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
      { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
      { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
      { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 
  </code></pre>
  
  <p>I want "at" on x axis and "value" on y axis. Also I need to parse the "at" as time only. Please provide me pointers how i will proceed further. The code till now I have implemented is below. I tried to look for documentation for this but found none.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;line chart on json&lt;/title&gt;
          &lt;script src="http://d3js.org/d3.v2.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              /* tell the SVG path to be a thin blue line without any area fill */
              path {
                  stroke: steelblue;
                  stroke-width: 1;
                  fill: none;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;script&gt;
  
      var width = 400;
      var height = 150;
  
      var data = [
      { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
      { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
      { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
      { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
      { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
      { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 
  
      var x = d3.scale.ordinal(); 
  
      var y = d3.scale.linear().range([height, 0]);
      var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
      var line = d3.svg.line()
          .x(function(d) { return x(d.at);})
          .y(function(d) { return y(d.value); })
          .interpolate("linear")
      var graph = d3.select(graph1).append("svg:svg").attr("width", "300").  attr("height", "150");
      function make_y_axis() {
          return d3.svg.axis().scale(y).orient("left").ticks(5)
      }
  
      &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>