D3 Stacked Area

by Jim G

HTML

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

CSS

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

JavaScript

// Date format
var format = d3.time.format("%m/%d/%y");

// Dimensions of the graph
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var graphWidth = 860 - margin.left - margin.right;

// Set the X and Y scales and axis
var x = d3.time.scale()
          .range([0, graphWidth]);

var y = d3.scale.linear()
          .range([height, 0]);

var indicators = ["SUCCESS","FAILURE"];
var z = d3.scale.ordinal().domain(indicators).range(["#A2C21D","#EF3434"]);

var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .ticks(10);

var yAxis = d3.svg.axis()
              .tickFormat(d3.format("d"))
              .scale(y)
              .orient("left");

// Create the area stack
var stack = d3.layout.stack()
              .offset("zero")
              .values(function(d) { return d.values; })
              .x(function(d) { return d.date; })
              .y(function(d) { return d.count; });

// Nest by name aka status
var nest = d3.nest()
              .key(function(d) { return d._id.buildResult; });

// Define the area
var area = d3.svg.area()
              .interpolate("basis")
              .x(function(d) { console.log(x(d.date)); return x(d.date); })
              .y0(function(d) { return y(d.y0); })
              .y1(function(d) { return y(d.y0 + d.y); });

// Define the SVG element to go in the graph div
var svg = d3.select("#graph").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 + ")");


//d3.json('data/passfail.json', function(data) {
data = getData();
// Loop through the data
data.result.forEach(function(d) {
  d.date = new Date(d._id.year, d._id.month-1, d._id.day);
});


// Create the layers
var layers =...