Stacked Bar Chart Example

_.md

[ Launch: Stacked Bar Chart Example ] 6264512 by lewis500
No parent Inlet

config.json

{"description":"Stacked Bar Chart Example","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(); //a color scale that d3 has built in!
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 stack = d3.layout.stack();
stack(data); //stackifying the data
   
var max = d3.max(data, function(d) {
 return d3.max(d, function(v) {
    return v.y + v.y0
 })
})
   
var height = 416;
var yscale = d3.scale.linear()
   .domain([0, max])
   .range([0, height]);
   
var group = svg.append("g") //create a group so you can move everything around together
   .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 }) //create one shape for each data point
	.enter()
   .append("rect")
   .attr({
   width: 30,
   height: function(d,i) {
     return yscale(d.y)
   },
   x: function(d,i) {
    return i * 40 //this is just a way to make the bars a certain distance apart
   },
   y: function(d,i) {
     return height - yscale(d.y0 + d.y) //subtract cause you flip it!
   }
   
   })

inlet.svg