just another inlet to tributary

_.md

No Previous Gist

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"endpoint":"delta","public":true}

inlet.js

var txt;
var n = 51;

var colors = ["#76E4F3", "#000000"];
var size = 6.48;
var percent = 0.94464;
var corners = 3;
var data = _.map(d3.range(n), function(d,i) {
  size *= percent;
  return size;
});
tributary.loop = "pingpong";
    
tributary.init = function(g) {
  
  
  g.append("rect")
  	.attr("width", "100%")
  	.attr("height", "100%");
  var squares = g.selectAll("g.square")
    .data(data)
  	.enter().append("svg:g")
    .classed("square", true)
    .attr("transform", "translate(" + [0,0] + ")");

  squares.append("svg:rect")
    .attr("rx", corners)
    .attr("ry", corners)
    .attr("x", -12.5)
    .attr("y", -12.5)
    .attr("width", 25)
    .attr("height", 25)
    .attr("transform", function(d, i) { return "scale(" + (d) * 20 + ")"; })
    .style("fill", function(d,i) {
        return colors[i%2];
    });

	squares.map(function(d) {
  		return {center: [tributary.sw/2,tributary.sh/2], angle: 0};
	});
};
tributary.run = function(g,t) {
  var squares = g.selectAll("g.square")
  squares.attr("transform", function(d, i) {
      d.angle = d3.interpolateNumber(0, -90*i)(t);
    
    return "translate(" + d.center + ")rotate(" + d.angle + ")";
  });
};

inlet.svg

<svg id="deltasvg" class="tributary_svg" width="1440" height="800"><g id="clones"></g><g id="delta"><rect width="100%" height="100%"></rect><g class="square" transform="translate(720,400)rotate(0)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(122.42534400000002)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-32.730000000000004)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(115.64787695616003)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-65.46000000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(109.24561048786701)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-98.19000000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(103.1977734912587)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-130.92000000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(97.48474475078262)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-163.65)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(92.08798928137931)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-196.38000000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(86.98999819476215)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-229.11)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(82.17423189470013)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-261.84000000000003)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(77.62506641700953)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-294.57000000000005)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(73.3277427401639)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-327.3)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(69.26831890206843)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-360.03000000000003)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(65.43362476764992)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-392.76000000000005)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(61.811219300512825)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-425.49)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(58.38935020003643)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-458.22)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(55.15691577296242)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-490.95000000000005)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(52.10342891577122)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-523.6800000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(49.21898309099413)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-556.4100000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(46.49422018707669)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-589.1400000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(43.92030015752013)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-621.87)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(41.48887234079982)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-654.6)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(39.19204836801315)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-687.33)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(37.02237657035994)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-720.0600000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(34.97281780342482)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-752.7900000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(33.036722609827216)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-785.5200000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(31.207809646147187)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-818.2500000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(29.480145304136478)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-850.98)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(27.84812446009948)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-883.71)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(26.306452289988375)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-916.44)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(24.850127091214624)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-949.1700000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(23.47442405544498)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-981.9000000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(22.174879939735547)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1014.6300000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(20.94727858627179)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1047.3600000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(19.787637243735784)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1080.0900000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(18.692193645922572)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1112.8200000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(17.657393805684297)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1145.5500000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(16.679880484601618)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1178.2800000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(15.756482300974072)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1211.01)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(14.884203440792149)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1243.74)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(14.060213938309898)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1276.47)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(13.281840494685062)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1309.2)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(12.546557804899297)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1341.93)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(11.851980364820072)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1374.66)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(11.195854731823633)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1407.39)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(10.576052213869877)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1440.1200000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(9.990561963310041)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1472.8500000000001)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(9.437484453021197)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1505.5800000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(8.915025313701944)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1538.3100000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(8.421489512335405)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1571.0400000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(7.955275852932518)" style="fill: #76e4f3; "></rect></g><g class="square" transform="translate(720,400)rotate(-1603.7700000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(7.514871781714173)" style="fill: #000000; "></rect></g><g class="square" transform="translate(720,400)rotate(-1636.5000000000002)"><rect rx="3" ry="3" x="-12.5" y="-12.5" width="25" height="25" transform="scale(7.098848479878477)" style="fill: #76e4f3; "></rect></g></g></svg>