just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"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 difference = _.pluck(data, 'Difference');
var valuesPost = _.pluck(data, 'Post');

var xScale = d3.scale.linear()
    .domain([d3.min(difference), d3.max(difference)])
    .range([150, 707]);

var yScale = d3.scale.ordinal()
    .domain(d3.range(difference.length))
    .rangeBands([100, 100 + height], .2);

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

var colorScale = function(d, i) {
  return d < 0 ? "#9C2600": "#0D6F1C";
}
      
    
// Y Axis labels
g.append('line')
  .attr('x1', xScale(0))
  .attr('x2', xScale(0))
  .attr('y1', 100)
  .attr('y2', 100 + height + 20)
  .style('stroke', '#AAA')
  
var axis = d3.svg.axis()
    .scale(xScale)
    .ticks(10);

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

g.selectAll('line.tickmarks')
  .data(d3.range(-4, 20, 2))
  .enter().append('line')
  .attr('class', 'tickmarks')
  .attr('stroke', "#E0E0E0")
  .attr('x1', function(d, i) { return xScale(d); })
  .attr('x2', function(d, i) { return xScale(d); })
  .attr('y1', 100)
  .attr('y2', 320)
  ;

g.selectAll('.axis text')
    .style('font-size', 14)
    .style('text-style', 'italic')
  	.style('fill', "#AAA")
            
            
         
// chart    
var sections = g.selectAll('g.source')
    .data(data)
    .enter().append('g')
    .attr('class', 'source')
    .attr('transform', function(d, i) {
      return 'translate(0, ' + yScale(i) + ')';
    });
  

sections.append('rect')
  .attr('x', function(d, i) {
    return d.Difference < 0 ? xScale(d.Difference) : xScale(0);
  })
  .attr('y', 0)
  .attr('width', function(d, i) {
    return d.Difference < 0 ? xScale(0) -xScale(d.Difference) : xScale(d.Difference) - xScale(0);
  })
  .attr('height', yScale.rangeBand)
  .style('fill-opacity', function(d, i) {
    return opacityScale(d.Post)
  })
  .style('fill', function(d, i) {
    return colorScale(d.Difference)
  })
  .style('stroke', function(d, i) {
    return colorScale(d.Difference)
  })
  .style('stroke-width', 1)
  .style('stroke-opacity', .2)
  .moveToFront();

// 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(' + [129, 12] + ')');


//number label
sections.append('text')
  .text(function(d, i) {
    var f = d3.format('.1f');
    var diff = f(d.Difference)
	return (d.Difference > 0 ? '+' + diff : '–' + Math.abs(diff)) + '%';
  })
  .attr('text-anchor', 'start')
  .style('fill', function(d, i) {
    return colorScale(d.Difference)
  })
  .style('font-size', 12)
  .style('font-weight', 'bold')
  .attr('transform', function(d, i) {
    var x = (d.Difference < 0 ? xScale(0) : xScale(d.Difference)) + 10;
    var y = 13;
	return 'translate(' + [x, y] + ')';
  });

inlet.svg