Tier 3

_.md

[ Launch: Tier 4 ] 5b7373c244719d902dbd by thepuzzlemaster
[ Launch: Tier 5 ] e3414adc9ff4151da46e by thepuzzlemaster
[ Launch: Tier 6 ] b534534a3eaae79bca88 by thepuzzlemaster
[ Launch: Tier 9 ] 27009fec394ff00f035c by thepuzzlemaster
[ Launch: Tier 7 ] 5724bd14d135fb659ba2 by thepuzzlemaster
[ Launch: Tier 7 ] 9be4401dd815df8c5c48 by thepuzzlemaster

config.json

{"description":"Tier 3","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/S8s8dCn.png","inline-console":false}

data.json

[
  {"x":0,"y":0,"c":1},
  {"x":1,"y":0,"c":1},
  {"x":2,"y":0,"c":1},
  {"x":3,"y":0,"c":1},
  {"x":0,"y":1,"c":1},
  {"x":1,"y":1,"c":1},
  {"x":2,"y":1,"c":1},
  {"x":3,"y":1,"c":1},
  {"x":0,"y":2,"c":1},
  {"x":1,"y":2,"c":1},
  {"x":2,"y":2,"c":1},
  {"x":3,"y":2,"c":1},
  {"x":0,"y":3,"c":1},
  {"x":1,"y":3,"c":1},
  {"x":2,"y":3,"c":1},
  {"x":3,"y":3,"c":1},
  {"x":4,"y":0,"c":0},
  {"x":5,"y":0,"c":0},
  {"x":6,"y":0,"c":0},
  {"x":7,"y":0,"c":0},
  {"x":4,"y":1,"c":0},
  {"x":5,"y":1,"c":0},
  {"x":6,"y":1,"c":0},
  {"x":7,"y":1,"c":0},
  {"x":4,"y":2,"c":0},
  {"x":5,"y":2,"c":0},
  {"x":6,"y":2,"c":0},
  {"x":7,"y":2,"c":0},
  {"x":4,"y":3,"c":0},
  {"x":5,"y":3,"c":0},
  {"x":6,"y":3,"c":0},
  {"x":7,"y":3,"c":0},
  {"x":8,"y":0,"c":1},
  {"x":9,"y":0,"c":1},
  {"x":10,"y":0,"c":1},
  {"x":11,"y":0,"c":1},
  {"x":8,"y":1,"c":1},
  {"x":9,"y":1,"c":1},
  {"x":10,"y":1,"c":1},
  {"x":11,"y":1,"c":1},
  {"x":8,"y":2,"c":1},
  {"x":9,"y":2,"c":1},
  {"x":10,"y":2,"c":1},
  {"x":11,"y":2,"c":1},
  {"x":8,"y":3,"c":1},
  {"x":9,"y":3,"c":1},
  {"x":10,"y":3,"c":1},
  {"x":11,"y":3,"c":1},
  {"x":0,"y":4,"c":0},
  {"x":1,"y":4,"c":0},
  {"x":2,"y":4,"c":0},
  {"x":3,"y":4,"c":0},
  {"x":0,"y":5,"c":0},
  {"x":1,"y":5,"c":0},
  {"x":2,"y":5,"c":0},
  {"x":3,"y":5,"c":0},
  {"x":0,"y":6,"c":0},
  {"x":1,"y":6,"c":0},
  {"x":2,"y":6,"c":0},
  {"x":3,"y":6,"c":0},
  {"x":0,"y":7,"c":0},
  {"x":1,"y":7,"c":0},
  {"x":2,"y":7,"c":0},
  {"x":3,"y":7,"c":0},
  {"x":4,"y":4,"c":1},
  {"x":5,"y":4,"c":1},
  {"x":6,"y":4,"c":1},
  {"x":7,"y":4,"c":1},
  {"x":4,"y":5,"c":1},
  {"x":5,"y":5,"c":1},
  {"x":6,"y":5,"c":1},
  {"x":7,"y":5,"c":1},
  {"x":4,"y":6,"c":1},
  {"x":5,"y":6,"c":1},
  {"x":6,"y":6,"c":1},
  {"x":7,"y":6,"c":1},
  {"x":4,"y":7,"c":1},
  {"x":5,"y":7,"c":1},
  {"x":6,"y":7,"c":1},
  {"x":7,"y":7,"c":1},
  {"x":8,"y":4,"c":0},
  {"x":9,"y":4,"c":0},
  {"x":10,"y":4,"c":0},
  {"x":11,"y":4,"c":0},
  {"x":8,"y":5,"c":0},
  {"x":9,"y":5,"c":0},
  {"x":10,"y":5,"c":0},
  {"x":11,"y":5,"c":0},
  {"x":8,"y":6,"c":0},
  {"x":9,"y":6,"c":0},
  {"x":10,"y":6,"c":0},
  {"x":11,"y":6,"c":0},
  {"x":8,"y":7,"c":0},
  {"x":9,"y":7,"c":0},
  {"x":10,"y":7,"c":0},
  {"x":11,"y":7,"c":0},
  {"x":0,"y":8,"c":1},
  {"x":1,"y":8,"c":1},
  {"x":2,"y":8,"c":1},
  {"x":3,"y":8,"c":1},
  {"x":0,"y":9,"c":1},
  {"x":1,"y":9,"c":1},
  {"x":2,"y":9,"c":1},
  {"x":3,"y":9,"c":1},
  {"x":0,"y":10,"c":1},
  {"x":1,"y":10,"c":1},
  {"x":2,"y":10,"c":1},
  {"x":3,"y":10,"c":1},
  {"x":0,"y":11,"c":1},
  {"x":1,"y":11,"c":1},
  {"x":2,"y":11,"c":1},
  {"x":3,"y":11,"c":1},
  {"x":4,"y":8,"c":0},
  {"x":5,"y":8,"c":0},
  {"x":6,"y":8,"c":0},
  {"x":7,"y":8,"c":0},
  {"x":4,"y":9,"c":0},
  {"x":5,"y":9,"c":1},
  {"x":6,"y":9,"c":0},
  {"x":7,"y":9,"c":0},
  {"x":4,"y":10,"c":0},
  {"x":5,"y":10,"c":0},
  {"x":6,"y":10,"c":1},
  {"x":7,"y":10,"c":0},
  {"x":4,"y":11,"c":0},
  {"x":5,"y":11,"c":0},
  {"x":6,"y":11,"c":0},
  {"x":7,"y":11,"c":0},
  {"x":8,"y":8,"c":1},
  {"x":9,"y":8,"c":1},
  {"x":10,"y":8,"c":1},
  {"x":11,"y":8,"c":1},
  {"x":8,"y":9,"c":1},
  {"x":9,"y":9,"c":1},
  {"x":10,"y":9,"c":1},
  {"x":11,"y":9,"c":1},
  {"x":8,"y":10,"c":1},
  {"x":9,"y":10,"c":1},
  {"x":10,"y":10,"c":1},
  {"x":11,"y":10,"c":1},
  {"x":8,"y":11,"c":1},
  {"x":9,"y":11,"c":1},
  {"x":10,"y":11,"c":1},
  {"x":11,"y":11,"c":1}
]

inlet.js

// Solution:
//[{"x":5,"y":9,"c":0},
//  {"x":6,"y":10,"c":0}]

var data = tributary.data;
var xSpacing = 12;
var ySpacing = 20;
var width = 5;

var colorMin = d3.min(data, function(item) {
  return item.c;
});

var colorMax = d3.max(data, function(item) {
  return item.c;
});

var colorScale = d3.scale.linear()
    .domain([colorMin, colorMax])
    .interpolate(d3.interpolateHcl)
    .range(['#00d8ff', '#ff1900'])
    .clamp(true);

var svg = d3.select('svg')
.attr({
  width: '100%',
  height: '100%',
  style: 'padding: 50px'
});

// Vertical grid lines
svg.append('g')
.selectAll('rect')
.data(d3.range(12))
.enter()
.append('rect')
.attr({
  y: function(d, i) {
   return i * ySpacing;
  },
  width: 3653,
  height: 1,
  fill: 'black'
});

svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return i * xSpacing;
  },
  y: function(d) {
    return 11 * ySpacing - (d.x) * ySpacing;
  },
  width: width,
  height: function(d) {
    return (d.x) * ySpacing;
  },
  fill: 'black'
});

svg.append('g')
//.attr('transform', 'translate(0, 200)')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return i * xSpacing + width;
  },
  y: function(d) {
    return 11 * ySpacing - (d.y) * ySpacing;
  },
  width: width,
  height: function(d) {
    return (d.y) * ySpacing;
  },
  fill: 'blue'
});

svg.append('g')
.attr('transform', 'translate(0, 500)')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
  cx: function(d) {
    return d.x * xSpacing;
  },
  cy: function(d) {
    return -d.y * ySpacing;
  },
  r: function(d) {
    if (d.x === 4 && d.y === 4) {
      //return 0;
    }
    return 4
  },
  fill: function(d) {
    return colorScale(d.c)
  }
})

style.css

text {
 font-size: 12px; 
}

svg {
 padding: 20px 
}

.node {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.link {
  stroke: steelblue;
  stroke-opacity: .4;
  fill: none;
}