Stacked Area with Brush

HTML

<div id="graph"></div>

CSS

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 585, right: 80, bottom: 20, left: 40},
    main_width  = 1300 - main_margin.left - main_margin.right,
    main_height = 650 - main_margin.top - main_margin.bottom,
    mini_height = 650 - mini_margin.top - mini_margin.bottom;

var axis_offset        = 275,
    legend_offset      = 195,
    legend_text_offset = {height: 518, width: 195},
    legend_rect_offset = {height: 525, width: 235},
    legend_interval    = 40;

var dateFormat = d3.time.format("%b %d");

var svg = d3.select("#graph").append("svg")
    .attr("width", main_width + main_margin.left + main_margin.right)
    .attr("height", main_height + main_margin.top + main_margin.bottom);

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

var main = svg.append("g")
    .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

var mini = svg.append("g")
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

var main_x = d3.time.scale()
    .range([0, main_width - axis_offset]);

var mini_x = d3.time.scale()
    .range([0, main_width - axis_offset]);

var main_xAxis = d3.svg.axis()
    .scale(main_x)
    .ticks(10)
    .orient("bottom");

var mini_xAxis = d3.svg.axis()
   .scale(mini_x)
   .ticks(d3.time.day, 2)
   .orient("bottom");

// Setup Y axis
var main_y = d3.scale.linear()
    .range([main_height, 0]);

var mini_y = d3.scale.linear()
    .range([mini_height, 0]);

var main_yAxis = d3.svg.axis()
    .scale(main_y)
    .tickFormat(function(d) { return d3.round(d); })
    .orient("left");

// Create the brush for the mini chart
var brush = d3.svg.brush()
    .x(mini_x)
    .on("brush", brushed);

var categories = ["ABORTED","SUCCESS","UNSTABLE","FAILURE"];
var z = d3.scale.ordinal().domain(categories).range(["#C0C0C0","#6FB200","#FCE338","#EF3434"]);

//...