Stacked Bar Chart Setup

_.md

[ Launch: Stacked Bar Chart Setup ] dc0855e342ab159f19c0 by delenamalan
[ Launch: Stacked Bar Chart Example ] 6264539 by lewis500
[ Launch: Stacked Bar Chart Example ] 6264512 by lewis500
No parent Inlet

config.json

{"description":"Stacked Bar Chart Setup","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","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;

svg.append("g").append("rect").attr({
  x : 5,
  y : 5,
  width: 10,
  height: 10
})
.style(fill, "#3f3f3f");

//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); }
});

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>