var bean_w = 44;
var bean_h = 24;
g.append("rect")
  .attr("width", tributary.sw)
  .attr("height", tributary.sh)
  .attr("fill", "#8CDF34")

var defs = g.append("defs");
var clippath = defs.append("clipPath")
    .attr("id", "bean_clip")
clippath.append("rect")
  .attr("width", 100)
  .attr("height", 10)

var beans = g.append("g").classed("beans", true)
    .attr("transform", "translate(" + [20, 20] + ")")

var nx = 20;
var beans_data = d3.range(nx*15);

//
var bean = beans.selectAll("g.bean")
    .data(beans_data)

var xspacing = bean_w;
var yspacing = bean_w;
bean.enter()
    .append("g")
  .attr("transform", function(d,i) {
    var xind = (d % nx);
    var x = xind * xspacing;
    var yind = parseInt(d / nx);
    var y = yind * yspacing;
    var rotate = (90 + -30 * yind) + (-30 * xind);
    return "translate(" + [ x, y ] + ")rotate(" + [rotate, bean_w/2, bean_h/2] + ")";
  });

bean.append("rect")
  .attr("width", bean_w)
  .attr("height", bean_h)
  .attr("rx", 50)
  .attr("ry", 17)

bean.append("rect")
  .attr("width", bean_w)
  .attr("height", bean_h)
  .attr("rx", 50)
  .attr("ry", 17)
  .attr("fill", "#ffffff")
  .attr("clip-path", "url(#bean_clip)")
bean.append("rect")
  .attr("width", bean_w - 6)
  .attr("height", bean_h - 6)
  .attr("rx", 50)
  .attr("ry", 17)
  .attr("transform", "translate(" + [3, 3] + ")")
  .attr("fill", "#BD6018")