Tier 5

_.md

[ 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 5","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

[
  {"a":0,"b":0,"c":0,"d":0,"e":0},
  {"a":6,"b":3,"c":4,"d":2,"e":6},
  {"a":12,"b":6,"c":8,"d":4,"e":12},
  {"a":18,"b":9,"c":12,"d":6,"e":18},
  {"a":24,"b":12,"c":16,"d":8,"e":24},
  {"a":30,"b":15,"c":20,"d":10,"e":30},
  {"a":36,"b":18,"c":24,"d":12,"e":36},
  {"a":42,"b":21,"c":28,"d":12,"e":42},
  {"a":48,"b":24,"c":32,"d":16,"e":48}
]

inlet.js

//Solution: [{"a":42,"b":21,"c":28,"d":14,"e":42}]
// Had to be submitted as an array :(

var data = tributary.data;
var xSpacing = 12;
var ySpacing = 72;
var width = 8;

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([0, 5])
    .interpolate(d3.interpolateHcl)
    .range(['#00d8ff', '#ff1900'])
    .clamp(true);

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

// A
svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return 0;
  },
  y: function(d, i) {
    return ySpacing * 0 + i * width;
  },
  width: function(d) {
    return d.a * width;
  },
  height: function(d) {
    return 8;
  },
  fill: function(d, i) {
    return colorScale(0);
  }
});

// B
svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return 0;
  },
  y: function(d, i) {
    return ySpacing * 1 + i * width;
  },
  width: function(d) {
    return d.b * width;
  },
  height: function(d) {
    return 8;
  },
  fill: function(d, i) {
    return colorScale(1);
  }
});

// C
svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return 0;
  },
  y: function(d, i) {
    return ySpacing * 2 + i * width;
  },
  width: function(d) {
    return d.c * width;
  },
  height: function(d) {
    return 8;
  },
  fill: function(d, i) {
    return colorScale(2);
  }
});

// D
svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return 0;
  },
  y: function(d, i) {
    return ySpacing * 3 + i * width;
  },
  width: function(d) {
    return d.d * width;
  },
  height: function(d) {
    return 8;
  },
  fill: function(d, i) {
    return colorScale(3);
  }
});

// E
svg.append('g')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
  x: function(d, i) {
   return 0;
  },
  y: function(d, i) {
    return ySpacing * 4 + i * width;
  },
  width: function(d) {
    return d.e * width;
  },
  height: function(d) {
    return 8;
  },
  fill: function(d, i) {
    return colorScale(4);
  }
});

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