just another inlet to tributary

_.md

[ Launch Inlet ]
Gist #3896546 [ Launch Inlet ]
Gist #3896409 [ Launch Inlet ]

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 js = tb['us1861-01_5'];
var cscale = d3.scale.category10();

var defs = svg.append('defs');
var pattern = defs.append('pattern')
    .attr({
      id: 'dotmatrix',
      patternUnits: "userSpaceOnUse",
      x: 0,
      y: 0,
      width: 6,
      height: 6
    })
    .append('circle')
	    .attr({
          r: 2.34,
          cx: 3,
          cy: 3,
          fill: 'white'
        })
    ;


var mask = defs.append('mask')
    .attr({
      id: 'mask',
      maskUnits: "objectBoundingBox",
      maskContentUnits: "ObjectBoundingBox"
    });

mask.append('rect')
    .attr({
      x: 0,
      y: 0,
      height: 1000,
      width: 1000,
      fill: 'black'
    });

mask.append('rect')
    .attr({
      x: 0,
      y: 0,
      height: 1000,
      width: 1000,
      fill: 'url(#dotmatrix)'
    })

var g = svg.append('g')
    .attr({
      mask: 'url(#mask)',
      width: 1141,
      height: 1242
    });

var xy = d3.geo.albers();
var path = d3.geo.path().projection(xy);

xy.translate([126, 76]).scale(262);


g.selectAll('path')
  .data(js.features)
  .enter().append("path")
  .attr({
    'd': path,
    'transform': 'translate(40, 60) scale(4)',
    'fill': function (d, i) {
      return cscale(d.properties.CATEGORY);
    }
  });

us1861-01_5.json