title: Prevent d3.js area chart from dropping below 0 or x-Axis
body: <p>What would be causing this chart to have a value appear below the x-axis (0:00)?</p>
  
  <p>My data looks like this (no values less than zero):</p>
  
  <pre><code>[{"x":1341806400,"y":4},
   {"x":1342411200,"y":0},
   {"x":1343016000,"y":0},
   {"x":1343620800,"y":7},
   {"x":1344225600,"y":6},
   {"x":1344830400,"y":73},
   {"x":1345435200,"y":328},
   {"x":1346040000,"y":0},
   {"x":1346644800,"y":0},
   {"x":1347249600,"y":0},
   {"x":1347854400,"y":0},
   {"x":1348459200,"y":11},
   {"x":1349064000,"y":17},
   {"x":1349668800,"y":0},
   {"x":1350273600,"y":0}]
  </code></pre>
  
  <p><strong>Rendered Chart</strong>
  <img src="https://i.stack.imgur.com/RzDwk.png" alt="Sample Area/Line Chart"></p>
  
  <p>The above chart is rendered via:</p>
  
  <pre><code>var margin = {top: 20, right: 30, bottom: 30, left: 40};
  var width = max_width - margin.left - margin.right;
  var height = 300; // + margin.top + margin.bottom;
  var height_offset = 100;
  
  var x = d3.time.scale()
      .range([0, width]);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var z = d3.scale.category20c();
  
  var ticks_interval;
  switch(this.period_type){
    case "day":
      ticks_interval = d3.time.days;
      break;
    case "week":
      ticks_interval = d3.time.weeks;
      break;
    case "month":
      ticks_interval = d3.time.months;
      break;
    case "year":
      ticks_interval = d3.time.years;
      break;
  }
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(ticks_interval);
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .tickFormat(function(d){ 
         return numeral(d).format("00:00").replace(/^0:/,""); })
      .orient("left");
  
  var stack = d3.layout.stack()
      .offset("zero")
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.value; });
  
  var nest = d3.nest()
      .key(function(d) { return d.key; });
  
  var area = d3.svg.area()
      .interpolate("cardinal")
      .x(function(d) { return x(d.date); })
      .y0(function(d) {return y(d.y0);})
      .y1(function(d) { return y(d.y0 + d.y); });
  
  var svg = d3.select(chart_dom_el)
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + height_offset)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  var layers = stack(nest.entries(data));
  
  x.domain(d3.extent(data, function(d){ return d.date; }));
  y.domain([0,d3.max(data,function(d){
    return d.y0+ d.y;
  })]);
  
  //  re-map for formatted date
  data = _.map(data,function(d){
    return {date: d.date.format("MM/D"),value:d.value};
  });
  
  svg.selectAll(".layer")
      .data(layers)
      .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return z(i); });
  
  var x_axis_options = {x: 4, y: 9, rotate: 0};
  if(data.length &gt; 20){
    x_axis_options = {x: -27, y: 8, rotate: -45};
  }else if(data.length &gt; 13){
    x_axis_options = {y: -5, x: 27, rotate: 90};
  }
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .attr("y", x_axis_options.y)
      .attr("x", x_axis_options.x)
      .attr("transform", "rotate("+(x_axis_options.rotate)+")");
  
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  </code></pre>