Tributary inlet

_.md

[ Launch: Tributary inlet ] 7296094 by trinary

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}

inlet.js

var data = [
  { name: "Alice", values: [{y: 2},{y: 4},{y:5},{y: 6} ,{y:7}]},
  { name: "Bob", values:  [{y: 2},{y: 4},{y:5},{y: 6} ,{y:7}]},
  { name: "Chris", values: [{y: 2},{y: 4},{y:5},{y: 6} ,{y:7}]}
 ];
var svg = d3.select("svg");

var stack = d3.layout.stack()
	.values(function(d) { return d.values;})
	.y(function(d) {return d.y});

var names = svg.selectAll(".name").data(stack(data));
var yScale = d3.scale.linear()
	.domain([0,20])
	.range([109,0]);

names.enter().append("g")
	.classed("name", true)
.attr("transform", function(d,i) { return "translate(" + [(i * 30) + 40,0] + ")";});


names.selectAll(".foo")
	.data(function(d) { return d.values;})
	.enter()
	.append("rect")
	.classed("foo", true)
	.attr({
  x: 0,
  y: function(d, i) {return yScale(d.y0) - yScale(d.y); },
  width: 20,
  height: function(d, i) { return yScale(d.y); }
});

style.css

.foo { 
  fill: none;
  stroke: #696565
}