Another Inlet

_.md

Gist #4103577
Gist #4103562
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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}

inlet.js

var svg = d3.select("svg");
var size = 28;
var x = size;
var y = size;
dataset = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
var rects = svg.selectAll('rect').data(dataset).enter()
    .append('rect')

var circles = svg.selectAll('circle').data(dataset).enter()
    .append('circle')
    
rects
  .attr('width', size)
  .attr('height', size)
  .attr('x', function(d) {
   if(d < 10)
     return d * x 
   else
     return d * x -50
  })
  .attr('y', function(d) {
   if(d < 10)
     return (dataset.length - d) * y
   else 
     return d * y - 200
  })
  .attr('fill', '#A73333')
  
circles
  .attr('r', function(d) {
   if (d > 14)
     return d * size / 35
   else if(d > 7)
     return d * size / 20
   else
    return d * size / 14
  })
  .attr('cx', function(d) {
    return d * x + 200
  })
  .attr('cy', function(d) {
    return d * y
  })
  .attr('fill', '#563492')