Tributary inlet

_.md

[ Launch: Tributary inlet ] ca53f0cc559bc8db51ca by delenamalan

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");
var data = [
  [{y:21},{y:10},{y:10},{y:38},{y:20}],
  [{y:14},{y:25},{y:21},{y:10},{y:10}],
  [{y:14},{y:35},{y:21},{y:10},{y:4}]
];

var height = 416;

//make a color scale, stackify the data, then draw the rects on a group you can translate around
var stack = d3.layout.stack();
stack(data);

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

var x = d3.scale.ordinal()
	.domain([0, data.length])
    .rangeRoundPoints([0,20], 0.2);

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

var colorScale = d3.scale.category10();

var g = svg.append("g")
	.attr("transform", "translate(50, 50)");

var layers = d3.selectAll(".layer")
  .data(data)
  .enter()
  .append("g")
  .classed("layer")
  .style("fill", function (d, i) {
    return colorScale(i);
  });

var barWidth = 5;

var stacks = layers.selectAll("rects")
.data(function(d) {return d;})
.enter()
.append("rect")
.attr({
  "width" : barWidth,
  "height": function(d) { return y(d.y); },
  "x": function(d, i) { return x(i); },
  "y": function(d) { return  y(d.y0); }
})