AI path smoothing solution graphic

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
      svg.vis{

}
      circle.point{
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var w = 800
      var h = 800
      var margin = 100
      var svg = d3.select('body').append('svg')
        .attr({
          'class' : 'vis'
          , width: w
          , height: h
        })
      var path = [[0.000, 0.000],
        [0.694, -0.361],
        [1.808, -0.123],
        [2.987, 0.085],
        [4.194, -0.109],
        [5.336, -0.376],
        [6.000, 0.000],
        [6.481, 0.855],
        [6.512, 2.189],
        [6.000, 3.000],
        [5.284, 3.352],
        [4.182, 3.118],
        [3.016, 2.916],
        [1.809, 3.110],
        [0.663, 3.375],
        [0.000, 3.000],
        [-0.474, 2.152],
        [-0.497, 0.826]]
      var x = d3.scale.linear().domain([0,6]).range([margin, w - margin * 2])
      var y = d3.scale.linear().domain([0,6]).range([margin, h - margin * 2])
      var color = d3.scale.linear()
        .domain([0, path.length])
        .range(["red", "green"])
      svg.selectAll('circle')
        .data(path)
        .enter()
        .append('circle')
          .attr('class', 'point')
          .attr('cx', function(d){ return x(d[0]) })
          .attr('r', '10')
          .attr('cy', function(d){ return y(d[1]) })
          .style('fill', function(d, i){ return color(i)})
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js