Wiggly line (for Alan maybe? I forget) by tophtucker

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>

svg {
  overflow: visible;
}

path {
  fill: red;
  stroke: red;
  stroke-width: 3;
}

</style>

<body>
  <svg width="960" height="500"></svg>
</body>

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

var width = 960 - 40,
    height = 500 - 40;

var data = [
  [new Date(2010, 1, 1), 20],
  [new Date(2010, 1, 5), 20],
  [new Date(2010, 1, 5.1), 10],
  [new Date(2010, 1, 6), 10],
  [new Date(2010, 1, 6.1), 20],
  [new Date(2010, 1, 7), 20],
  [new Date(2010, 1, 7.1), 10],
  [new Date(2010, 1, 10), 10],
  [new Date(2010, 1, 10.1), 5],
  [new Date(2010, 1, 15), 5],
  [new Date(2010, 1, 15.1), 15],
  [new Date(2010, 1, 20), 15]
];

var x = d3.scaleTime()
  .domain(d3.extent(data.map(d => d[0])))
  .range([0, width]);

var y = d3.scaleLinear()
  .domain([0, d3.max(data.map(d => d[1]))])
  .range([height, 0]);

var area = d3.area()
  .x(function(d) { return x(d[0]); })
  .y0(function(d) { return y(d[1]) + 10; })
  .y1(function(d) { return y(d[1]) - 10; })
  .curve(d3.curveCardinal.tension(.8));

d3.select("svg").append("g")
  .attr("transform", "translate(20,20)")
  .append("path")
  .datum(data)
  .attr("d", area)

</script>