[dot enter: 07] stacks

_.md

[ Launch: [dot enter: 07] stacks ] 6286132 by jgautsch

config.json

{"description":"[dot enter: 07] stacks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"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,"thumbnail":"http://i.imgur.com/s38yqXS.png"}

inlet.js

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1439" height="774"><g transform="translate(100,100)"><g style="fill: #1f77b4; "><rect width="30" height="108.3" x="0" y="252.7"></rect><rect width="30" height="51.57142857142857" x="40" y="309.42857142857144"></rect><rect width="30" height="51.57142857142857" x="80" y="309.42857142857144"></rect><rect width="30" height="195.97142857142856" x="120" y="165.02857142857144"></rect><rect width="30" height="103.14285714285714" x="160" y="257.8571428571429"></rect></g><g style="fill: #aec7e8; "><rect width="30" height="72.19999999999999" x="0" y="180.5"></rect><rect width="30" height="128.92857142857144" x="40" y="180.5"></rect><rect width="30" height="108.3" x="80" y="201.12857142857143"></rect><rect width="30" height="51.57142857142857" x="120" y="113.45714285714286"></rect><rect width="30" height="51.57142857142857" x="160" y="206.2857142857143"></rect></g><g style="fill: #ff7f0e; "><rect width="30" height="72.19999999999999" x="0" y="108.30000000000001"></rect><rect width="30" height="180.5" x="40" y="0"></rect><rect width="30" height="108.3" x="80" y="92.82857142857142"></rect><rect width="30" height="51.57142857142857" x="120" y="61.8857142857143"></rect><rect width="30" height="20.628571428571426" x="160" y="185.65714285714287"></rect></g></g></svg>