D3 vs Taucharts curves

Comparison of D3 and Taucharts curve interpolation methods

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

body {
  background: #ddd;
  font-family: Helvetica Neue, Segoe UI, Open Sans, Ubuntu, sans-serif;
}

JavaScript

var d1 = [];
    for (var i = 0; i < 1004; i += 0.5)
        d1.push({x: i, y:Math.random(100)});
        
var datasets = {
  'Business data': d1,

  'Math data (sine)': (function() {
    var data = [];
    var src = [];
    var sin = function(x) {
      return {
        x: x,
        y: 50 + 50 * (Math.sin(x * Math.PI / 200))
      };
    };
    for (var x = 0, pt; x <= 400; x += 40) {
      if ([0, 200, 240, 400].indexOf(x) >= 0 /*x === 0 || x === 400 || Math.round(Math.random())*/ ) {
        data.push(sin(x));
      }
    }
    for (var x = 0, pt; x <= 400; x += 2) {
      src.push(sin(x));
    }
    data.src = src;
    return data;
  })(),  
  
  'Business data 2': [{
    x: 0,
    y: 50
  }, {
    x: 100,
    y: 100
  }, {
    x: 180,
    y: 0
  }, {
    x: 240,
    y: 0
  }, {
    x: 275,
    y: 20
  }, {
    x: 280,
    y: 50
  }, {
    x: 300,
    y: 100
  }, {
    x: 350,
    y: 100
  }, {
    x: 400,
    y: 50
  }],
};

var svg = d3.select(document.body)
  .append('svg')
  .attr('width', 960)
  .attr('height', 1600);

var linesCount = 0;

function drawLine(container, name, data, getPath) {
  var color = name.indexOf('Taucharts') < 0 ? '#810' : '#222'

  var g = container
    .append('g')
    .attr('transform', 'translate(10,' + (linesCount * 160 + 40) + ')');

  g.append('text')
    .text(name)
    .attr('fill', color)
    .attr('y', -10);

  if (data.src) {
    g.append('path')
      .attr('fill', 'none')
      .attr('stroke', '#bbb')
      .attr('stroke-dasharray', '4 4')
      .attr('stroke-width', 2)
      .attr('d', getPath(data.src));
  }

  g.append('path')
    .attr('fill', 'none')
    .attr('stroke', color)
    .attr('stroke-width', 2)
    .attr('d', getPath(data));

  data.forEach(function(d) {
    g.append('circle')
      .attr('cx', d.x)
      .attr('cy', d.y)
      .attr('r', 4)
      .attr('fill', 'none')
      .attr('stroke', color)
      .attr('stroke-width', 1);
  });

  linesCount++;
}

function createD3Interpolator(curve) {
  return...