just another inlet to tributary

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"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 g = svg.append('g');

var stripes = d3.range(13);
var stars = [5, 6, 5, 6, 5];

var width = 400,
    height = width/1.9;

var stripeHeight = height / stripes.length;
var starBgHeight = stripeHeight * 7;
var starBgWidth = width/1.9*0.76; //according to http://www.usflag.org/flagspecs.html

var starRowScale = d3.scale.ordinal()
    .domain(d3.range(0, stars.length))
    .rangeBands([0, starBgHeight], 0.2);

var starScale = function(max) {
	return d3.scale.ordinal()
        .domain(d3.range(0, max))
        .rangeBands([10, starBgWidth], 0.2);
};

g.selectAll('rect.stripe')
  .data(stripes)
  .enter().append('rect')
  .attr({
  	class: 'stripe',
    fill: function(d, i) {
      return i % 2 ? 'white': 'red'
    },
    width: width,
    height: stripeHeight,
    transform: function(d, i) {
	  var tx = 10,
          ty = 10 + i * stripeHeight;
      
      return 'translate(' + [tx, ty] + ')';
    }    
  });

g.append('rect')
  .attr({
  	class: 'starbg',
    fill: 'blue',
    width: starBgWidth,
    height: starBgHeight,
    transform: function(d, i) {
	  var tx = 10,
          ty = 10 + i * stripeHeight;
      return 'translate(' + [tx, ty] + ')';
    }    
  });

var starGroup = g.append('g');

var starRows = starGroup.selectAll('g.star-row')
  .data(stars)
  .enter().append('g')
  .attr({
	class: 'star-row',
    width: width,
    height: starRowScale.rangeBand(),
    transform: function(d, i) {
		return 'translate(' + [0, starRowScale(i) ]+ ')'
    }
  });
  
starRows.selectAll('text.star')
  .data(function(d, i) {
  	return d3.range(0, d);
  })
    .enter().append('text')
  .attr({
    class: 'star',
    transform: function(d, i, p) {
      console.log(p);
	  var scale = starScale(stars[p]);
      var tx = scale(i), ty = 25;
      return 'translate(' + [tx, ty] + ')'
    }
  })
  .style({
  	fill: 'white'
  })
  .text('★')