Tier 2

_.md

[ Launch: Tier 3 ] ac71838372f739da296c by thepuzzlemaster
[ 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 2","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},
  {"x":0,"y":1},
  {"x":0,"y":2},
  {"x":1,"y":2},
  {"x":0,"y":3},
  {"x":1,"y":3},
  {"x":2,"y":3},
  {"x":0,"y":4},
  {"x":1,"y":4},
  {"x":2,"y":4},
  {"x":3,"y":4},
  {"x":4,"y":4},
  {"x":0,"y":5},
  {"x":1,"y":5},
  {"x":2,"y":5},
  {"x":3,"y":5},
  {"x":4,"y":5},
  {"x":5,"y":5},
  {"x":6,"y":5}
]

inlet.js

// Solution: {"x": 7, "y": 5}

var data = tributary.data;
var xSpacing = 50;
var ySpacing = 20;

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

svg.append('g')
.selectAll('rect')
.data(d3.range(8))
.enter()
.append('rect')
.attr({
  y: function(d, i) {
   return i * ySpacing;
  },
  width: 1000,
  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 7 * ySpacing - (d.x) * ySpacing;
  },
  width: 10,
  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 + 10;
  },
  y: function(d) {
    return 7 * ySpacing - (d.y) * ySpacing;
  },
  width: 10,
  height: function(d) {
    return (d.y) * ySpacing;
  },
  fill: 'blue'
});

svg.append('g')
.attr('transform', 'translate(0, 400)')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
  cx: function(d) {
    return d.x * xSpacing / 2;
  },
  cy: function(d) {
    return -d.y * ySpacing;
  },
  r: function(d) {
    if (d.x === 4 && d.y === 4) {
      //return 0;
    }
    return 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;
}