Stacks o' coins

_.md

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

assets.svg

<defs>
  <g id="coin" sketch:type="MSPage">
    <path d="M39,1.25242761 C17.2041723,4.93321457 0,48.4090557 0,101.5 C0,154.590944 17.2041723,198.066785 39,201.747572 L39,202 L70,202 L70,1 L39,1 L39,1.25242761 Z" id="side" sketch:type="MSShapeGroup" transform="scale(.12)"></path>
    <path d="M70,202 C93.1959606,202 112,157.00462 112,101.5 C112,75.9722485 108.022428,52.6674904 101.469382,34.9407439 C93.7742356,14.1244813 82.5276466,1 70,1 C46.8040394,1 28,45.9953799 28,101.5 C28,157.00462 46.8040394,202 70,202 Z" id="front" sketch:type="MSShapeGroup" transform="scale(.12)"></path>
   </g>
</defs>
<g id="vis">
</g>

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/obRSSpU.png"}

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] + ")"
  }
});