Animate path

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
  #line{
    width: 700px;
    margin: 20px 0;
    height: 300px;
    background: #eee;
  }
  button {
    margin: 20px 0 0 20px;
  }
</style>
</head>
<body>
  <div id="line"></div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
  <script type="text/javascript">
    var w = 700;
    var h = 300;

var svg = d3.select("#line")
      .append("svg")
      .attr("width", w)
      .attr("height", h)
      .attr("id", "visualization")
      .attr("xmlns", "https://www.w3.org/2000/svg");

var background = svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", w)
      .attr("height", h)

var path = svg.append("path")
      .attr("d", line(data))
      .attr("stroke", "steelblue")
      .attr("stroke-width", "1")
      .attr("fill", "none");

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.5.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.5.0