D3 interpolated line curve is janky and doubling back on itself

Question

I'm not sure quite how to describe this. The picture basically explains it:

The faded dots are the points on the curve. You can see the line doubles back on itself and overlaps. I'm just setting it to :

var lineGenerator = d3.svg.line()
    .x(function(d) {
        return xScale(d.date_spaced);
    })
    .y(function(d) {
        return yScale(d.score);
    })
    .interpolate('cardinal');

And each point is only getting plotted once. What am I doing wrong?

And with monotone:

And linear:

Answer 1

Try to increase the tension:

var lineGenerator = d3.svg.line()
    .x(function(d) {
        return xScale(d.date_spaced);
    })
    .y(function(d) {
        return yScale(d.score);
    })
    .interpolate('cardinal').tension(0.95);

Also, try other interpolations (and tension values, but just for "bundle" and "cardinal"), until you find something that fits your purposes.