d3_line1.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>DOM Manipulation</title>
</head>

<style>
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
  }

</style>

<body>


  <!-- <div class="data-view"></div> -->

  <script type="text/javascript" src="d3.v2.min.js"></script>


<script>
  

 //The data for our line
var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                  { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

//This is the accessor function we talked about above
var lineFunction = d3.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .curve(d3.curveCardinalOpen.tension(0.5)); 

//d3.curveCatmullRom.alpha(0.5) d3.curveLinear d3.curveBasis(context)


//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", innerWidth)
                                    .attr("height", innerHeight);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

</script>


</body>
</html>