stacks

_.md

[ Launch: stacks ] 7091976 by jshumakerpruitt

config.json

{"description":"stacks","endpoint":"","display":"svg","public":true,"require":[],"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":false,"thumbnail":"http://i.imgur.com/FcI4dwS.gif","ajax-caching":true}

inlet.js

var svg = d3.select("svg");
var color = d3.scale.category20();
var data = [
  [{y:3},{y:2},{y:4},{y:6}],
  [{y:3},{y:8},{y:3},{y:3}],
  [{y:20},{y:3},{y:3},{y:8}]  
  ];

var stack = d3.layout.stack();
stack(data);

var max = d3.max(data, function(d) {
  return d3.max(d,function(v) {
    return v.y + v.y0;
  })
})

var ch = 400;
var yscale = d3.scale.linear()
	.domain([0,max])
	.range([0,ch]);
                
                


var group = svg.append("g")
	.attr("transform", "translate(" + [100,100] + ")")

var layers = group.selectAll("g")
	.data(data)
	.enter()
	.append("g")
.style({fill: function(d,i){return color(i)}});

var stacks = layers.selectAll("rect")
.data(function(d) {return d})
.enter()
.append("rect")
.attr({
  width: 30,
  height: function(d,i){
    return yscale(d.y);
  },
  x: function(d,i) {
    return i * 40;
  },
  y: function(d,i) {
    return ch - yscale(d.y0 + d.y);
  }
});