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

<svg class="tributary_svg" width="1918" height="910"><line x1="267.18701298701296" x2="267.18701298701296" y1="100" y2="320" style="stroke: #aaaaaa; "></line><g class="axis" transform="translate(0,327)"><g style="opacity: 1; " transform="translate(170.31241558441548,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">-4</text></g><g style="opacity: 1; " transform="translate(218.74971428571422,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">-2</text></g><g style="opacity: 1; " transform="translate(267.18701298701296,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">0</text></g><g style="opacity: 1; " transform="translate(315.62431168831176,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">2</text></g><g style="opacity: 1; " transform="translate(364.06161038961045,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">4</text></g><g style="opacity: 1; " transform="translate(412.49890909090925,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">6</text></g><g style="opacity: 1; " transform="translate(460.936207792208,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">8</text></g><g style="opacity: 1; " transform="translate(509.37350649350674,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">10</text></g><g style="opacity: 1; " transform="translate(557.8108051948054,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">12</text></g><g style="opacity: 1; " transform="translate(606.2481038961043,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">14</text></g><g style="opacity: 1; " transform="translate(654.685402597403,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">16</text></g><g style="opacity: 1; " transform="translate(703.1227012987017,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle" style="font-size: 14px; fill: #aaaaaa; ">18</text></g><path class="domain" d="M150,6V0H707V6" style="opacity: 0; "></path></g><line class="tickmarks" stroke="#E0E0E0" x1="170.31241558441548" x2="170.31241558441548" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="218.74971428571422" x2="218.74971428571422" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="267.18701298701296" x2="267.18701298701296" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="315.62431168831176" x2="315.62431168831176" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="364.06161038961045" x2="364.06161038961045" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="412.49890909090925" x2="412.49890909090925" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="460.936207792208" x2="460.936207792208" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="509.37350649350674" x2="509.37350649350674" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="557.8108051948054" x2="557.8108051948054" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="606.2481038961043" x2="606.2481038961043" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="654.685402597403" x2="654.685402597403" y1="100" y2="320"></line><line class="tickmarks" stroke="#E0E0E0" x1="703.1227012987017" x2="703.1227012987017" y1="100" y2="320"></line><g class="source" transform="translate(0, 104.34782608695652)"><rect x="267.18701298701296" y="0" width="439.81298701298704" height="17.391304347826086" style="fill-opacity: 0.6; fill: #0d6f1c; stroke: #0d6f1c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Workshop</text><text text-anchor="start" style="fill: #0d6f1c; font-size: 12px; font-weight: bold; " transform="translate(717,13)">+18.2%</text></g><g class="source" transform="translate(0, 126.08695652173913)"><rect x="267.18701298701296" y="0" width="142.7463203463205" height="17.391304347826086" style="fill-opacity: 0.18181818181818182; fill: #0d6f1c; stroke: #0d6f1c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Family</text><text text-anchor="start" style="fill: #0d6f1c; font-size: 12px; font-weight: bold; " transform="translate(419.93333333333345,13)">+5.9%</text></g><g class="source" transform="translate(0, 147.82608695652172)"><rect x="267.18701298701296" y="0" width="62.2103896103896" height="17.391304347826086" style="fill-opacity: 0.10909090909090909; fill: #0d6f1c; stroke: #0d6f1c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Counselor </text><text text-anchor="start" style="fill: #0d6f1c; font-size: 12px; font-weight: bold; " transform="translate(339.39740259740256,13)">+2.6%</text></g><g class="source" transform="translate(0, 169.56521739130432)"><rect x="267.18701298701296" y="0" width="41.47359307359318" height="17.391304347826086" style="fill-opacity: 0.07272727272727272; fill: #0d6f1c; stroke: #0d6f1c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Flyer</text><text text-anchor="start" style="fill: #0d6f1c; font-size: 12px; font-weight: bold; " transform="translate(318.66060606060614,13)">+1.7%</text></g><g class="source" transform="translate(0, 191.30434782608694)"><rect x="267.18701298701296" y="0" width="4.822510822510878" height="17.391304347826086" style="fill-opacity: 0.14545454545454545; fill: #0d6f1c; stroke: #0d6f1c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Street </text><text text-anchor="start" style="fill: #0d6f1c; font-size: 12px; font-weight: bold; " transform="translate(282.00952380952384,13)">+0.2%</text></g><g class="source" transform="translate(0, 213.04347826086956)"><rect x="230.5359307359308" y="0" width="36.65108225108216" height="17.391304347826086" style="fill-opacity: 0.07272727272727272; fill: #9c2600; stroke: #9c2600; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Facebook </text><text text-anchor="start" style="fill: #9c2600; font-size: 12px; font-weight: bold; " transform="translate(277.18701298701296,13)">–1.5%</text></g><g class="source" transform="translate(0, 234.78260869565213)"><rect x="153.8580086580085" y="0" width="113.32900432900448" height="17.391304347826086" style="fill-opacity: 1; fill: #9c2600; stroke: #9c2600; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Friend</text><text text-anchor="start" style="fill: #9c2600; font-size: 12px; font-weight: bold; " transform="translate(277.18701298701296,13)">–4.7%</text></g><g class="source" transform="translate(0, 256.52173913043475)"><rect x="150" y="0" width="117.18701298701296" height="17.391304347826086" style="fill-opacity: 0; fill: #9c2600; stroke: #9c2600; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Online</text><text text-anchor="start" style="fill: #9c2600; font-size: 12px; font-weight: bold; " transform="translate(277.18701298701296,13)">–4.8%</text></g><g class="source" transform="translate(0, 278.2608695652174)"><rect x="150" y="0" width="117.18701298701296" height="17.391304347826086" style="fill-opacity: 0; fill: #9c2600; stroke: #9c2600; stroke-width: 1px; stroke-opacity: 0.2; "></rect><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(129,12)">Other</text><text text-anchor="start" style="fill: #9c2600; font-size: 12px; font-weight: bold; " transform="translate(277.18701298701296,13)">–4.8%</text></g></svg>