ribbons for lau

_.md

[ Launch: ribbons for lau ] 5130962 by enjalot

config.json

{"description":"ribbons for lau","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/zR4WXbq.png"}

inlet.js

var svg = d3.select("svg");


var nrow = 8;
var rows = 4;
var rw = 106;
var rh = 50;

var colorScale = d3.scale.ordinal()
.range([
  "#56D8AE"
])

var gold = "#E7CB39";

var g = svg.append("g");
g.selectAll("g.row")
.data(d3.range(rows))
.enter()
.append("g")
.classed("row", true)
.attr("transform", function(d,i) {
  var x = 0 * i;
  var y = 142 * i;
  return "translate(" + [x, y] + ")";
})
.selectAll("rect")
.data(d3.range(nrow))
.enter()
.append("rect")
.attr({
  x: 0,
  y: 0,
  width: rw,
  height: rh,
  transform: function(d,i) {
    var j = d3.select(this.parentNode).datum();
    var x = 23 + i * (75) + (i%2) * 60;
    var y = 68
    var theta = ((i % 2)-1) * 90 + 45;
    var translate =  "translate(" + [x,y] + ")"
    var rotate = "rotate(" + [theta, rw/2, rh/2] + ")"
    var translate2 = "translate(" + [((i%2)-1) * -0.06963 + (i%2) * -20,((i%2)-1) * 2 +  (i%2) * 67] + ")";
    return translate + rotate + translate2;
  }
})
.style({
  fill: function(d,i) {
    var j = d3.select(this.parentNode).datum();
    if(j == 1) {
      return gold
    } else {
      return colorScale(i);
    }
  }
});

//g.attr("transform", "rotate(" + [90, tributary.sw/2, tributary.sh/2] + ")");