Area chart not filling up

I have a chart that I've been building, but for some reason, it isn't displaying as an area chart - at least, not smoothly. It's very spikey, and doesn't look very good. My data points are rather strange, but is there any way to have them transition more smoothly?

You can view what the chart looks like at http://ift.tt/15VEFyI

I want it to look more like this chart: http://ift.tt/1cCa3Ov (and I copied a large portion of this code to do so, so I'm not sure why it is displaying in this odd way.)

Thanks!

Here is the full code below. For reference, there are data points at every point in time (which is every 3 hours).

function InitChart() {

  var lineData = [];
  for (i = 0; i < Math.round(totaltime / interval); i++)
  {
    lineData[i] = {
      "timeinterval": Date.now() - (i * interval * 1000),
      "reactionrate": reactionratebyinterval[i],
      "reach": reachbyinterval[i],
      "engagement": engagementbyinterval[i]
    };
  }

  var margin = {top: 10, right: 10, bottom: 100, left: 40},
      margin2 = {top: 430, right: 10, bottom: 20, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom,
      height2 = 500 - margin2.top - margin2.bottom;

  var parseDate = d3.time.format("%b %Y").parse;

  var x = d3.time.scale().range([0, width]),
      x2 = d3.time.scale().range([0, width]),
      y = d3.scale.linear().range([height, 0]),
      y2 = d3.scale.linear().range([height2, 0]);

  var xAxis = d3.svg.axis().scale(x).orient("bottom"),
      xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
      yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

  var brush = d3.svg.brush()
      .x(x2)
      .on("brush", brushed);

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("defs").append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height);

  var focus = svg.append("g")
      .attr("class", "focus")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var context = svg.append("g")
      .attr("class", "context")
      .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

  var data = lineData;

  var areareach = d3.svg.area()
      .x(function(d) { return x(d.timeinterval); })
      .y0(height)
      .y1(function(d) { return y(d.reach); })
      .interpolate("monotone");

  var areaengagement = d3.svg.area()
      .x(function(d) { return x(d.timeinterval); })
      .y0(height)
      .y1(function(d) { return y(d.engagement); })
      .interpolate("monotone");

  var areareachbrush = d3.svg.area()
      .x(function(d) { return x2(d.timeinterval); })
      .y0(height2)
      .y1(function(d) { return y2(d.reach); })
      .interpolate("monotone");

  var areaengagementbrush = d3.svg.area()
      .x(function(d) { return x2(d.timeinterval); })
      .y0(height2)
      .y1(function(d) { return y2(d.engagement); })
      .interpolate("monotone");

  x.domain(d3.extent(data.map(function(d) { return d.timeinterval; })));
  y.domain([0, d3.max(data.map(function(d) { return d.reach; }))]);
  x2.domain(x.domain());
  y2.domain(y.domain());

  focus.append("path")
      .datum(data)
      .attr("class", "areareach")
      .attr("d", areareach);  

  focus.append("path")
      .datum(data)
      .attr("class", "areaengagement")
      .attr("d", areaengagement);

  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  context.append("path")
      .datum(data)
      .attr("class", "areareach")
      .attr("d", areareachbrush);

  context.append("path")
      .datum(data)
      .attr("class", "areaengagement")
      .attr("d", areaengagementbrush);

  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height2 + ")")
      .call(xAxis2);

  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", height2 + 7);

  function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".areareach").attr("d", areareach);
    focus.select(".areaengagement").attr("d", areaengagement);
    focus.select(".x.axis").call(xAxis);
  }
}