score:1

Below you find a line graph by adjusting your code. Make sure the statements end with semicolons according to the convention.

Your variable s1 was not created correctly and at the end look how the line is appended correctly.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
  body {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
  {"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
  {"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];

  var parseDate = d3.time.format("%x").parse;
  // construct the date according to the parsed format: %m/%d/%Y
  var s1 = data.map(function (d,i){return {key:parseDate((d.key[1]+1)+"/1/"+d.key[0]),value:+d.value}}); 
  console.log(s1);

  var margin = {top: 15, right: 20, bottom: 70, left: 85},
          width = 440,height = 450;

  var x = d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key}))
    .range([0,width]);

  var y = d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
    .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.key); })
         .y(function(d) { return y(d.value); })
         .interpolate("cardinal");

  var div = d3.select("body")
     .append("div")
     .attr("class", "tooltip")
     .style("opacity", 0);

  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 + ")");

  svg.append("g")
    .attr("class", "x axis x-axis")
    .attr("transform", "translate(0," + height + ")")
    .attr("fill","steelblue")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis y-axis")
    .attr("fill","steelblue")
    .call(yAxis);

  svg.append("path")
    .datum(s1)
    .attr("class", "line")
    .attr("d", line);
</script>
</body>
</html>

Related Query

More Query from same tag