Tier 4

_.md

[ 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 4","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,"z":0},
  {"x":1,"y":0,"z":0},
  {"x":2,"y":0,"z":0},
  {"x":3,"y":0,"z":0},
  {"x":4,"y":0,"z":0},
  {"x":5,"y":0,"z":0},
  {"x":0,"y":1,"z":0},
  {"x":1,"y":1,"z":0},
  {"x":2,"y":1,"z":0},
  {"x":3,"y":1,"z":0},
  {"x":4,"y":1,"z":0},
  {"x":5,"y":1,"z":0},
  {"x":0,"y":2,"z":0},
  {"x":1,"y":2,"z":0},
  {"x":2,"y":2,"z":0},
  {"x":3,"y":2,"z":0},
  {"x":4,"y":2,"z":0},
  {"x":5,"y":2,"z":0},
  {"x":0,"y":3,"z":0},
  {"x":1,"y":3,"z":0},
  {"x":2,"y":3,"z":0},
  {"x":3,"y":3,"z":0},
  {"x":4,"y":3,"z":0},
  {"x":5,"y":3,"z":0},
  {"x":0,"y":4,"z":0},
  {"x":1,"y":4,"z":0},
  {"x":2,"y":4,"z":0},
  {"x":3,"y":4,"z":0},
  {"x":4,"y":4,"z":0},
  {"x":5,"y":4,"z":0},
  {"x":0,"y":5,"z":0},
  {"x":1,"y":5,"z":0},
  {"x":2,"y":5,"z":0},
  {"x":3,"y":5,"z":0},
  {"x":4,"y":5,"z":0},
  {"x":5,"y":5,"z":0},
  {"x":0,"y":0,"z":1},
  {"x":1,"y":0,"z":1},
  {"x":2,"y":0,"z":1},
  {"x":3,"y":0,"z":1},
  {"x":4,"y":0,"z":1},
  {"x":5,"y":0,"z":1},
  {"x":0,"y":1,"z":1},
  {"x":1,"y":1,"z":1},
  {"x":2,"y":1,"z":1},
  {"x":3,"y":1,"z":1},
  {"x":4,"y":1,"z":1},
  {"x":5,"y":1,"z":1},
  {"x":0,"y":2,"z":1},
  {"x":1,"y":2,"z":1},
  {"x":2,"y":2,"z":1},
  {"x":3,"y":2,"z":1},
  {"x":4,"y":2,"z":1},
  {"x":5,"y":2,"z":1},
  {"x":0,"y":3,"z":1},
  {"x":1,"y":3,"z":1},
  {"x":2,"y":3,"z":1},
  {"x":3,"y":3,"z":1},
  {"x":4,"y":3,"z":1},
  {"x":5,"y":3,"z":1},
  {"x":0,"y":4,"z":1},
  {"x":1,"y":4,"z":1},
  {"x":2,"y":4,"z":1},
  {"x":5,"y":4,"z":1},
  {"x":0,"y":5,"z":1},
  {"x":1,"y":5,"z":1},
  {"x":2,"y":5,"z":1},
  {"x":3,"y":5,"z":1},
  {"x":4,"y":5,"z":1},
  {"x":5,"y":5,"z":1},
  {"x":0,"y":0,"z":2},
  {"x":1,"y":0,"z":2},
  {"x":2,"y":0,"z":2},
  {"x":3,"y":0,"z":2},
  {"x":4,"y":0,"z":2},
  {"x":5,"y":0,"z":2},
  {"x":0,"y":1,"z":2},
  {"x":1,"y":1,"z":2},
  {"x":2,"y":1,"z":2},
  {"x":3,"y":1,"z":2},
  {"x":4,"y":1,"z":2},
  {"x":5,"y":1,"z":2},
  {"x":0,"y":2,"z":2},
  {"x":1,"y":2,"z":2},
  {"x":2,"y":2,"z":2},
  {"x":3,"y":2,"z":2},
  {"x":4,"y":2,"z":2},
  {"x":5,"y":2,"z":2},
  {"x":0,"y":3,"z":2},
  {"x":1,"y":3,"z":2},
  {"x":2,"y":3,"z":2},
  {"x":3,"y":3,"z":2},
  {"x":4,"y":3,"z":2},
  {"x":5,"y":3,"z":2},
  {"x":0,"y":4,"z":2},
  {"x":1,"y":4,"z":2},
  {"x":2,"y":4,"z":2},
  {"x":3,"y":4,"z":2},
  {"x":4,"y":4,"z":2},
  {"x":5,"y":4,"z":2},
  {"x":0,"y":5,"z":2},
  {"x":1,"y":5,"z":2},
  {"x":2,"y":5,"z":2},
  {"x":3,"y":5,"z":2},
  {"x":4,"y":5,"z":2},
  {"x":5,"y":5,"z":2},
  {"x":0,"y":0,"z":3},
  {"x":1,"y":0,"z":3},
  {"x":2,"y":0,"z":3},
  {"x":3,"y":0,"z":3},
  {"x":4,"y":0,"z":3},
  {"x":5,"y":0,"z":3},
  {"x":0,"y":1,"z":3},
  {"x":1,"y":1,"z":3},
  {"x":2,"y":1,"z":3},
  {"x":3,"y":1,"z":3},
  {"x":4,"y":1,"z":3},
  {"x":5,"y":1,"z":3},
  {"x":0,"y":2,"z":3},
  {"x":1,"y":2,"z":3},
  {"x":2,"y":2,"z":3},
  {"x":3,"y":2,"z":3},
  {"x":4,"y":2,"z":3},
  {"x":5,"y":2,"z":3},
  {"x":0,"y":3,"z":3},
  {"x":1,"y":3,"z":3},
  {"x":2,"y":3,"z":3},
  {"x":3,"y":3,"z":3},
  {"x":4,"y":3,"z":3},
  {"x":5,"y":3,"z":3},
  {"x":0,"y":4,"z":3},
  {"x":1,"y":4,"z":3},
  {"x":2,"y":4,"z":3},
  {"x":3,"y":4,"z":3},
  {"x":4,"y":4,"z":3},
  {"x":5,"y":4,"z":3},
  {"x":0,"y":5,"z":3},
  {"x":1,"y":5,"z":3},
  {"x":2,"y":5,"z":3},
  {"x":3,"y":5,"z":3},
  {"x":4,"y":5,"z":3},
  {"x":5,"y":5,"z":3},
  {"x":0,"y":0,"z":4},
  {"x":1,"y":0,"z":4},
  {"x":2,"y":0,"z":4},
  {"x":3,"y":0,"z":4},
  {"x":4,"y":0,"z":4},
  {"x":5,"y":0,"z":4},
  {"x":0,"y":1,"z":4},
  {"x":1,"y":1,"z":4},
  {"x":2,"y":1,"z":4},
  {"x":3,"y":1,"z":4},
  {"x":4,"y":1,"z":4},
  {"x":5,"y":1,"z":4},
  {"x":0,"y":2,"z":4},
  {"x":1,"y":2,"z":4},
  {"x":2,"y":2,"z":4},
  {"x":3,"y":2,"z":4},
  {"x":4,"y":2,"z":4},
  {"x":5,"y":2,"z":4},
  {"x":0,"y":3,"z":4},
  {"x":1,"y":3,"z":4},
  {"x":2,"y":3,"z":4},
  {"x":3,"y":3,"z":4},
  {"x":4,"y":3,"z":4},
  {"x":5,"y":3,"z":4},
  {"x":0,"y":4,"z":4},
  {"x":1,"y":4,"z":4},
  {"x":2,"y":4,"z":4},
  {"x":3,"y":4,"z":4},
  {"x":4,"y":4,"z":4},
  {"x":5,"y":4,"z":4},
  {"x":0,"y":5,"z":4},
  {"x":1,"y":5,"z":4},
  {"x":2,"y":5,"z":4},
  {"x":3,"y":5,"z":4},
  {"x":4,"y":5,"z":4},
  {"x":5,"y":5,"z":4},
  {"x":0,"y":0,"z":5},
  {"x":1,"y":0,"z":5},
  {"x":2,"y":0,"z":5},
  {"x":3,"y":0,"z":5},
  {"x":4,"y":0,"z":5},
  {"x":5,"y":0,"z":5},
  {"x":0,"y":1,"z":5},
  {"x":1,"y":1,"z":5},
  {"x":2,"y":1,"z":5},
  {"x":3,"y":1,"z":5},
  {"x":4,"y":1,"z":5},
  {"x":5,"y":1,"z":5},
  {"x":0,"y":2,"z":5},
  {"x":1,"y":2,"z":5},
  {"x":2,"y":2,"z":5},
  {"x":3,"y":2,"z":5},
  {"x":4,"y":2,"z":5},
  {"x":5,"y":2,"z":5},
  {"x":0,"y":3,"z":5},
  {"x":1,"y":3,"z":5},
  {"x":2,"y":3,"z":5},
  {"x":3,"y":3,"z":5},
  {"x":4,"y":3,"z":5},
  {"x":5,"y":3,"z":5},
  {"x":0,"y":4,"z":5},
  {"x":1,"y":4,"z":5},
  {"x":2,"y":4,"z":5},
  {"x":3,"y":4,"z":5},
  {"x":4,"y":4,"z":5},
  {"x":5,"y":4,"z":5},
  {"x":0,"y":5,"z":5},
  {"x":1,"y":5,"z":5},
  {"x":2,"y":5,"z":5},
  {"x":3,"y":5,"z":5},
  {"x":4,"y":5,"z":5},
  {"x":5,"y":5,"z":5}
]

inlet.js

// Solution: [{"x":3,"y":4,"z":1},
//  {"x":4,"y":4,"z":1}]

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

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

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

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, 600)')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
  cx: function(d) {
    return d.x * 60;
  },
  cy: function(d) {
    return -d.y * 60;
  },
  r: function(d) {
    return d.z * 6
  },
  fill: function(d) {
    return 'rgba(0, 0, 0, .2)';
  }
})

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;
}