Simple Stacked Bar Charts data 2

_.md

[ Launch: Simple(?) Stacked Bar Charts ] 5095509 by gelicia
[ Launch: Simple(?) Stacked Bar Charts ] 4945496 by gelicia

config.json

{"description":"Simple Stacked Bar Charts data 2","endpoint":"","display":"svg","public":true,"require":[{"name":"Underscore","url":"http://underscorejs.org/underscore.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

/*modified from Mike Bostock at http://bl.ocks.org/3943967 */

function getSessionCount(sessionCounts, state){
  for (var i = 0; i < sessionCounts.length; i++) {
		if (sessionCounts[i].state == state){
			return sessionCounts[i].sessionCount;
		}
	}
	return 0;
} 

var data = [
  {"key":"0", sessionCounts : [{state:'AZ', sessionCount:5}, {state:'CA', sessionCount:14}, {state:'CT', sessionCount:30}] },
  {"key":"1", sessionCounts : [{state:'AZ', sessionCount:8}, {state:'WI', sessionCount:23}, {state:'IA', sessionCount:12}] },
  {"key":"2", sessionCounts : [{state:'AZ', sessionCount:3}, {state:'CA', sessionCount:9}] }
]; 
 
var uniqueStates = [];

for (var i = 0; i < data.length; ++i) { 
  for (var j = 0; j < data[i].sessionCounts.length; ++j) { 
    uniqueStates.push(data[i].sessionCounts[j].state);
  }
}
   
uniqueStates = _.uniq(uniqueStates);

uniqueStates.sort(function(a, b){
					if (a < b){ return -1;}
					if (a > b){ return 1; }
					return 0;
				});
       
   var n = uniqueStates.length,
    m = data.length, // number of samples per layer
    stack = d3.layout.stack(),
    labels = data.map(function(d) {return d.key;});
    
    //go through each state
    //then go through each object in data and pull out that state if it exists
    //and put it into an array where x is the index and y is the number
    layers = stack(d3.range(n).map(function(d) {
   				var a = [];
   				var state = uniqueStates[d]; 
      
                for (var i = 0; i < m; ++i) { //go through each hour and look for that state
                   a[i] = {x: i, y: getSessionCount(data[i].sessionCounts, state)};
                } 
  				return a;
             })),
    
	//the largest single layer
    yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    //the largest stack
    yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 61, bottom: 20, left: 38},
    width = 526 - margin.left - margin.right,
    height = 414 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08);

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

var color = d3.scale.category20()
    .domain([0, n - 1]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(1)
    .tickPadding(6)
	.tickValues(labels)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .tickSize(1)
    .tickPadding(6)
	.tickValues([0, 25, 50])
    .orient("left");

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

var layer = svg.selectAll(".layer")
    .data(layers)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

layer.selectAll("rect")
    .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("width", x.rangeBand())
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

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

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0," + 0 + ")")
    .call(yAxis);

var legend = svg.append("g")
		.attr({
			width: 100,
			height: 100,
			transform: "translate(-20,2)"
		})
		.classed("legend", true);

legend.selectAll("rect")
		.data(layers)
		.enter()
		.append("rect")
		.attr({
			x: 468,
			y: function(d,i) { return i * 20; },
			width: 10,
			height: 10,
			fill: function(d, i) {
				return color(i);
			}
		});

legend.selectAll("text")
		.data(layers)
		.enter()
		.append("text")
		.attr({
			x : 481,
			y : function(d,i) {return i * 20 + 11;}
		})
		.text(function(d, i){
			return uniqueStates[i];
		});