JSFiddle - React, Tailwind, and code Playground

HTML

<table class="small-chart">
    <tr>
        <td id="chart_str"></td>
    </tr>
</table>

CSS

path {
    stroke: black;
    stroke-width: 2;
    fill: none;
}

JavaScript

var margin = {
    top: 20,
    right: 30,
    left: 30,
    bottom: 20
}
height = 80 - margin.top - margin.bottom,
width = 150 - margin.left - margin.right;

var data =[{"x":1, "y":5},{"x":20, "y":20},
           { "x": 25,  "y": 10}, { "x": 50,  "y": 20},
           { "x": 70,  "y": 5},  { "x": 100, "y": 40},
           {"x": 120, "y":30}
		  ]
var x = d3.scale.linear()
    .domain(d3.extent(data, function (d) {
    return d.x;
}))
    .range([0, width]);

var y = d3.scale.linear()
    .domain(d3.extent(data, function (d) {
    return d.y;
}))
    .range([height, 0]);

var lineFunction = d3.svg.line()
    .x(function (d) {
    return x(d.x);
})
    .y(function (d) {
    return y(d.y);
});

var svg = d3.select('#chart_str').append('svg')
    .attr("width", width)
    .attr("height", height)

svg.append('path')
    .attr('class', 'line')
    .transition()
    .duration(3000)
    .attrTween('d', getSmoothInterpolation(data));


function getSmoothInterpolation(iData) {
    return function (d, i, a) {
        var interpolate = d3.scale.linear()
            .domain([0, 1])
            .range([0, iData.length + 1]);

        return function (t) {
            var flooredX = Math.floor(interpolate(t));
            var weight = interpolate(t) - flooredX;

            var interpolatedLine = iData.slice(0, flooredX);
            if (flooredX > 0 && flooredX < iData.length) {
                var weightedLineAverage = iData[flooredX].y * weight + iData[flooredX - 1].y * (1 - weight);
console.log(interpolate(t));
                interpolatedLine.push({
                    // Nasty hack:
                    "x": 10* (interpolate(t) - 1) + 100,
                    "y": weightedLineAverage
                });
            }
            return lineFunction(interpolatedLine);
        }
    }
}