Stacks o' coins

_.md

[ Launch: Stacks o' coins ] 8591176 by ptvans
[ Launch: Stacks o' coins ] 8590346 by poezn
[ Launch: Stacks o' money ] 8589344 by poezn
[ Launch: Stack o' money ] 8589266 by poezn

assets.svg

config.json

{"description":"Stacks o' coins","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},"assets.svg":{"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/ql5EqDI.png","ajax-caching":true}

inlet.js

var num = 50,
    h = 20,
    w = 50,
    width = 400,
    padding = 100
 
var g = d3.select("#vis");
var data = [
  {
    "data": d3.range(num),
    "label": "Mo' Money",
    "color-side": "#5E6850",
    "color-front": "#818B73"
  },
  {
    "data": d3.range(num * Math.random()),
    "label": "Less interest",
    "color-side": "#75A730",
    "color-front": "#9CC464"
  }
];
              
var scale = d3.scale.ordinal() 
.domain(data[0].data)     
.rangeBands([padding, width]);

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

stacks 
.append("text")
.attr({
  "transform": "translate(80, 37)",
  "text-anchor": "end"
})
.style({
  "font-size": 12
})
.text(function(d, i) {
  return d.label;
});

var coins = stacks.selectAll("g.coin")
.data(function(d, i) {
  return d.data;
}); 
                
var newCoins = coins.enter().append("g")
.attr({
  "transform": function(d, i, p) {
    var tx = 1000,
        ty = p === 0 ? -h : 100; 
    return "translate(" + [tx, ty] + ")"
  },
  "class": "coin"
});

 
newCoins.append("use")
.attr({
  "xlink:href": "#side"
})
.style({
  "fill": function(d, i, p) {   
    return data[p]["color-side"];
  }
})
;
newCoins.append("use")
.attr({
  "xlink:href": "#front"
})
.style({
  "fill": function(d, i, p) {   
    return data[p]["color-front"];
  }
})
;
 
coins
.transition()
.delay(function(d, i) {
  return i * 12
})
.attr({
  "transform": function(d, i) {
    var tx = scale(i),
        ty = h + Math.random() * 2; 
    return "translate(" + [tx, ty] + ")"
  }
});