stacks

_.md

[ Launch: stacks ] 8076488 by luckyyang

config.json

{"description":"stacks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":579,"height":573,"hide":false},"thumbnail":"http://i.imgur.com/zleU5Kw.png"}

inlet.js

var svg = d3.select("svg");
var color = d3.scale.category20();
var data = [
  [{y:21},{y:10},{y:10},{y:17},{y:11}],
  [{y:14},{y:25},{y:21},{y:10},{y:10}],
  [{y:14},{y:35},{y:20},{y:10},{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 = 361;
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)
   }
   
   })

inlet.svg