wiggly chart

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html, body {
    background: #ffffff;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}

path {
    fill: none;
    stroke: #343434;
}
.result {
    fill: none;
    stroke: #343434;
    stroke-width: 4px;
}

h1,h2,h3 {
    padding-left: 200px;
    padding-top: 10px;
}
</style>
</head>
<body>

<h3>New Users</h3>
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink= "https://www.w3.org/1999/xlink" height=300 width=850>
    <defs>
        <filter id="filter-wavy" color-interpolation-filters="sRGB">
            <feTurbulence result="result91" baseFrequency="0.04" type="turbulence" seed="0" numOctaves="3" id="feTurbulence5437" />
            <feDisplacementMap in2="result91" scale="6.6" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" id="feDisplacementMap5439" />    
        </filter>
    </defs>
</svg>

var height = 300;
var width = 850;
var margin = {top: 20, right: 140, bottom: 60, left: 90};

var svg = d3.select("svg").attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    });

var chart = svg.append("g")
    .attr({
        transform: "translate(" + margin.left + "," + margin.top + ")"
    });

// setup groups
var axesGroup = chart.append('g').attr({ 'class': 'axes' });
var xAxisGroup = axesGroup.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")");
var yAxisGroup = axesGroup.append("g")
    .attr("class", "y axis");

// setup data and labels
var serverData = [
"1501632000000",
"3",
"1501718400000",
"540",
"1501804800000",
"1417",
"1502928000000",
"5703",
"1501891200000",
"5824",
"1502841600000",
"15597",
"1502668800000",
"15631",
"1502582400000",
"15807",
"1502496000000",
"15867",
"1502755200000",
"16537",
"1502150400000",
"18841",
"1502409600000",
"21105",
"1502236800000",
"26292",
"1502323200000",
"27667",
"1501977600000",
"28215",
"1502064000000",
"33833"
]

var data = []; var labels = [];
dataSorted.forEach((d) => { data.push(d[0]); labels.push(new Date(d[1]).toDateString()); })

// Setup scales
var xScale = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangePoints([0, width], 0.5)

var yScale = d3.scale.linear()
    .domain([ 0, (d3.max(data) + 5) ])
    .range([height, 0]);

// Setup axes
var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(5)
    .tickFormat(function(d,i){
        return labels[i];
    })
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .orient("left");

// Draw labels on axes
yAxisGroup.call(yAxis)
    .append("text")
        .attr({
            "class": "axisLabel",
            "transform": "translate(" + [
                -70, (height - (margin.top + margin.bottom) + 50) / 2
            ] + ") rotate(-90)",
            "y": 6,
            "dy": ".71em"
        })
        .style({
            "text-anchor": "middle"
        })
        .text("Data");

xAxisGroup.call(xAxis)
    .append("text")
        .attr({
            "class": "axisLabel",
            "transform": "translate(" + [width / 2.3, 36] + ")",
            "y": 6,
            "dy": ".71em"
        })
        .style("text-anchor", "begin")
        .text("Time");

// setup the line
var line = d3.svg.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d) { return yScale(d); })
    // use a basis interpolation to add a little ambiguity 
    .interpolate("basis");

// Draw the line
chart.append("path")
    .datum(data)
    .attr({
        'class': 'result',
        'd': line,
        // To apply a filter, just give the element a filter property
        filter: 'url(#filter-wavy)'
    });

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js