just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":631,"height":358,"hide":false},"endpoint":"tributary"}

inlet.js

d3.selection.prototype.moveToFront = function() { 
    return this.each(function() { 
      this.parentNode.appendChild(this); 
    }); 
  };

var height = 200;

var data = [{"Source": "Workshop","Pre": 14,"Post": 33,"Pre_%": 22.58,"Post_%": 40.74,"Difference": 18.1600955794504},
{"Source": "Family","Pre": 4,"Post": 10,"Pre_%": 6.45,"Post_%": 12.35,"Difference": 5.89406610911987},
{"Source": "Counselor ","Pre": 3,"Post": 6,"Pre_%": 4.84,"Post_%": 7.41,"Difference": 2.56869772998805},
{"Source": "Flyer","Pre": 2,"Post": 4,"Pre_%": 3.23,"Post_%": 4.94,"Difference": 1.71246515332537},
{"Source": "Street","Pre": 6,"Post": 8,"Pre_%": 9.68,"Post_%": 9.88,"Difference": 0.199123855037834},
{"Source": "Facebook","Pre": 4,"Post": 4,"Pre_%": 6.45,"Post_%": 4.94,"Difference": -1.51334129828753},
{"Source": "Friend","Pre": 45,"Post": 55,"Pre_%": 72.58,"Post_%": 67.90,"Difference": -4.67941059338909},
{"Source": "Online","Pre": 3,"Post": 0,"Pre_%": 4.84,"Post_%": 0.00,"Difference": -4.83870967741935},
{"Source": "Other","Pre": 3,"Post": 0,"Pre_%": 4.84,"Post_%": 0.00,"Difference": -4.83870967741935}];

var valuesPost = _.pluck(data, 'Post');
var valuesPre = _.pluck(data, 'Pre');

var xScaleGroups = d3.scale.ordinal()
    .domain(d3.range(valuesPost.length))
    .rangeBands([33, 534], 0.2);

var xScale = d3.scale.ordinal()
    .domain([0, 1])
    .rangeBands([0, xScaleGroups.rangeBand()], 0.1);

var yScale = d3.scale.linear()
    .domain([d3.min(valuesPost), d3.max(valuesPost)])
    .range([300, 0]);

var opacityScale = d3.scale.linear()
    .domain([d3.min(valuesPost), d3.max(valuesPost)])
    .range([0, 1]);

var colorScale = function(d, i, p) {
  return i == 0 ? "#91B82C": "#0C801E";
}
      
    
// X Axis labels
//g.append('line')
//  .attr('y1', yScale(0))
//  .attr('y2', yScale(0))
//  .attr('x1', 100)
//  .attr('x2', 100 + height + 20)
//  .style('stroke', '#AAA')
  
var axis = d3.svg.axis()
    .scale(yScale)
    .orient('left');

g.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(' + [32, 100] + ')')
  .call(axis)
  .selectAll('path')
  .style('opacity', 0);

g.selectAll('line.tickmarks')
  .data(d3.range(0, 60, 5))
  .enter().append('line')
  .attr('class', 'tickmarks')
  .attr('stroke', "#D3D3D3")
  .attr('y1', function(d, i) { return 100 + yScale(d); })
  .attr('y2', function(d, i) { return 100 + yScale(d); })
  .attr('x1', 31)
  .attr('x2', 531)
  ;

g.selectAll('.axis text')
    .style('font-size', 14)
    .style('text-style', 'italic')
  	.style('fill', "#AAA")
            
            
data.sort(function(a, b) {
	return b.Pre - a.Pre
})

    
// chart    
var sections = g.selectAll('g.source')
    .data(data)
    .enter().append('g')
    .attr('class', 'source')
    .attr('width', xScaleGroups.rangeBand())
    .attr('height', 400)
    .attr('transform', function(d, i) {
      return 'translate(' + xScaleGroups(i) + ', 0)';
    });
 
// Category Label
sections.append('text')
  .text(function(d, i) {
	return d.Source;
  })
  .attr('text-anchor', 'end')
  .attr('font-weight', 'bold')
  .style('font-size', 14)
  .attr('transform', 'translate(' + [xScaleGroups.rangeBand() / 2 + 5, 416] + ') rotate(-90)');


sections.selectAll('rect')
  .data(function(d, i) {
	return [d.Pre, d.Post];
  })
  .enter().append('rect')
  .attr({
    width: xScale.rangeBand(),
    height: function(d, i) {
      return 300 - yScale(d);
    },
	x: function(d, i) {
      return xScale(i);
    },
    y: function(d, i) {
      return 100 + yScale(d);
    }
  })
  .style({
    'fill-opacity': function(d, i) {
      return opacityScale(d.Post);
    },
    'fill': colorScale,
    'stroke': colorScale,
    'stroke-width': 1,
    'stroke-opacity': .2
  })
  .moveToFront();

inlet.svg