Stacks o' money

_.md

[ Launch: Stacks o' money ] 8589344 by poezn
[ Launch: Stack o' money ] 8589266 by poezn

config.json

{"description":"Stacks o' money","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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,"thumbnail":"http://i.imgur.com/dpRUnsk.png"}

inlet.js

var num = 50,
    h = 20,
    w = 50,
    height = 400,
    padding = 100;
var data = [
  {
    "data": d3.range(num),
    "label": "Mo' Money",
    "color": "#818B73"
  },
  {
    "data": d3.range(num * Math.random()),
    "label": "Less interest",
    "color": "#75A730"
  }
];

var scale = d3.scale.ordinal() 
.domain(data[0].data)     
.rangeBands([height, padding]);

var stacks = g.selectAll("g")
.data(data) 
.enter().append("g")
.attr({
  "transform": function(d, i) {
    return "translate(" + [i * 100, 0] + ")";
  }
})
.style({
  "fill": function(d, i) {
    return d.color;
  }
});

stacks
.append("text")
.attr({
  "transform": "translate(" + (w*3/2 + 5) + ", " + (height + h + 20) + ")",
  "text-anchor": "middle"
})
.style({
  "font-size": 12
})
.text(function(d, i) {
  return d.label;
});

var bills = stacks.selectAll("rect")
.data(function(d, i) {
  return d.data;
}); 
                
bills
.enter().append("rect") 
.attr({
  "transform": function(d, i, p) {
    var ty = -h,
        tx = p === 0 ? -w : 200;
    return "translate(" + [tx, ty] + ") skewX(20) skewY(35)"
  },
  "width": 50, 
  "height": 20
})
.style({
  "stroke-width": 1,
  "stroke": "#464646",
  "transform": "skew(36deg,0deg)"
})
;
 
bills
.transition()
.delay(function(d, i) {
  return i * 12
})
.attr({
  "transform": function(d, i) {
    var ty = scale(i),
        tx = w;
    return "translate(" + [tx, ty] + ") skewX(20) skewY(0)"
  }
});