https://www.dashingd3js.com/svg-paths-and-d3js

d3-paths.js

function r() {
  return Math.random() * 100;
}

var lineData = function() {
  return [
    [0, r()],
    [20, r()],
    [40, r()],
    [60, r()],
    [80, r()],
    [100, r()],
    [120, r()]
  ];
}

var svgContainer = d3.select('body').append('svg').attr({ width: '100%', height: '100%' });


var lineFx = function (interpolate) {
  return d3.svg.line()
                  .x(function(d) { return d[0] + 10; })
                  .y(function(d) { return d[1] + 10; })
                  .interpolate(interpolate);
};

var path = svgContainer.append('path')
                      .attr({ stroke: 'blue', 'stroke-width': 2, fill: 'none' });

function randomLine(interpolate) {
  var data = lineData();
  svgContainer.selectAll('circle').remove();
  svgContainer.selectAll('circle').data(data).enter()
                                          .append('circle')
                                          .attr('cx', function(d) { return d[0] + 10; })
                                          .attr('cy', function(d) { return d[1] + 10; })
                                          .attr('r', 4);
  path.attr('d', lineFx(interpolate)(data));
}

var interpolateOptions = [
  'linear', 'step-before', 'step-after', 'basis', 'basis-open', 'basis-closed',
  'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'
];

f = function() {
  randomLine(_.sample(interpolateOptions));
};

f();