Tributary inlet

_.md

[ Launch: Tributary inlet ] 7035470 by jzgit
[ Launch: Tributary inlet ] 7018290 by jzgit

config.json

{"description":"Tributary inlet","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/zCkxgla.png"}

inlet.js

var svg = d3.select("svg");
var colorScale = d3.scale.category20c();

var stroke: '#EED9DD';

var data = [
  {x: 0, y: 0, h: 1, w: 7, color: 3},
  {x: 0, y: 1, h: 6, w: 1, color: 3},
  {x: 1, y: 1, h: 1, w: 5, color: 3},
  {x: 1, y: 2, h: 4, w: 1, color: 3},
  {x: 2, y: 2, h: 1, w: 3, color: 3},
  {x: 2, y: 3, h: 2, w: 1, color: 3},
  {x: 3, y: 3, h: 1, w: 1, color: 8},
  {x: 4, y: 3, h: 1, w: 1, color: 2},
  {x: 3, y: 4, h: 1, w: 2, color: 2},
  {x: 5, y: 2, h: 3, w: 1, color: 2},
  {x: 2, y: 5, h: 1, w: 4, color: 2},
  {x: 6, y: 1, h: 5, w: 1, color: 2},
  {x: 1, y: 6, h: 1, w: 6, color: 2}
];


var scale = 39;

var squares = [
  {x: 0, y: 0},
  {x: 1, y: 0},
  {x: 2, y: 0}
];

var g1 = svg.append('g');
var g2 = svg.append('g');

var groups = svg.selectAll('g');

var fabric = d3.scale.ordinal()
  .range([3,3,3,3,3,3,8,2,2,2,2,2,2])

var rotation = d3.scale.ordinal()
  .range([180, 90]);

g1.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
      .attr({
        height: function(d) {
          return d.h * scale;
        },
        width: function(d) {
          return d.w * scale;
        },
        x: function(d) {
          return d.x * scale;
        },
        y: function(d) {
          return d.y * scale;
        },
        stroke: stroke,
        fill: function(d, i){
          return colorScale(fabric(i));

        }
      })
  .attr("transform", function(d,i) {
      var x = 0;
      var y = 50;
      return "translate(" + [x, y] + ")rotate(" + [0, scale * 3.5 , scale * 3.5] + ")";
  });

g2.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
      .attr({
        height: function(d) {
          return d.h * scale;
        },
        width: function(d) {
          return d.w * scale;
        },
        x: function(d) {
          return d.x * scale;
        },
        y: function(d) {
          return d.y * scale;
        },
        stroke: '#EED9DD',
        fill: function(d, i){
          //return colorScale(d.color);
          return colorScale(fabric(i));
        }
      })
  .attr("transform", function(d,i) {
      var x = scale * 7;
      var y = 50;
      return "translate(" + [x, y] + ")rotate(" + [0, scale * 3.5 , scale * 3.5] + ")";
  });