title: Draw D3 Simple Line chart With an Array
body: <p>I am Trying to Implement this code: <a href="http://bl.ocks.org/3883245" rel="noreferrer">http://bl.ocks.org/3883245</a>, but instead of loading a TSV file, i am loading the data from an array.
  Here is how the array looks Like:       </p>
  
  <pre><code>[["2012-10-02",2],["2012-10-09", 2], ["2012-10-12", 2]]
  </code></pre>
  
  <p>and then I applied this function on it to get CSV Format: <code>var data = d3.csv.format(BigWordsDates2[ArrayIndex]);</code></p>
  
  <p>but still nothing shows up.</p>
  
  <p>Here is the whole code: I think I am not that far from getting it but I have been working on it for 3 days and still cant get it to work:</p>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = 80 - margin.left - margin.right,
          height = 80 - margin.top - margin.bottom;
  
          var data = d3.csv.format(BigWordsDates2[ArrayIndex]);
  
          var parseDate = d3.time.format("%Y-%b-%d").parse;
  
          var x = d3.time.scale()
              .range([0, width]);
  
          var y = d3.scale.linear()
              .range([height, 0]);
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");
  
          var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
  
          var line = d3.svg.line()
              .x(function(d) { return x(d.date); })
              .y(function(d) { return y(d.close); });
  
          var svg = d3.select("#Graph").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 + ")");
  
          d3.csv.parseRows(data, function(data) {
            data.forEach(function(d) {
              d.date = parseDate(d.date);
              d.close = parseInt(d.close);
            });
  
           x.domain(d3.extent(data, function(d) { return d.date; }));
           y.domain(d3.extent(data, function(d) { return d.close; }));
  
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
  
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Price ($)");
  
            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);
          });`
  </code></pre>
  
  <p>I think I am also doing something wrong with the d.date and d.close but I can't figure it out either.</p>