quilts

_.md

[ Launch: Tributary inlet ] 5971399 by jzgit

config.json

{"description":"quilts","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/kys77b4.png"}

inlet.js

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

var data =[
  [0,90,0,90],
  [180,270,180,270],
  [0,90,0,90],
  [180,270,180,270]
];

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

var colorScale = ["","#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9"];



var colors = [3,3,3,3,3,3,8,2,2,2,2,2,2];


var stroke = '#7295D3';

var rows = svg.selectAll("g")
	.data(data)
  .enter().append("g")
	.classed('row', true);


var blocks = rows.selectAll('g')
    .data(function(d) { return d; })
  .enter().append('g')
	.classed('block', true)
	.attr("transform", function(d, i, j) {
        var x = i * scale * 7;
        var y = j * scale * 7;
        return "translate(" + [x, y] + ")rotate(" + [d, scale * 3.5 , scale * 3.5] + ")";
    });


blocks.selectAll('rect')
	.data(barPattern)
  .enter().append("rect")
	.attr({
        height: function(d) {
          //console.log(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[colors[i]];
        }
      });