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

<svg class="tributary_svg" width="1280" height="510"><g class="axis" transform="translate(32,100)"><g style="opacity: 1; " transform="translate(0,300)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">0</text></g><g style="opacity: 1; " transform="translate(0,272.72727272727275)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">5</text></g><g style="opacity: 1; " transform="translate(0,245.45454545454544)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">10</text></g><g style="opacity: 1; " transform="translate(0,218.1818181818182)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">15</text></g><g style="opacity: 1; " transform="translate(0,190.9090909090909)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">20</text></g><g style="opacity: 1; " transform="translate(0,163.63636363636365)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">25</text></g><g style="opacity: 1; " transform="translate(0,136.36363636363637)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">30</text></g><g style="opacity: 1; " transform="translate(0,109.0909090909091)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">35</text></g><g style="opacity: 1; " transform="translate(0,81.81818181818181)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">40</text></g><g style="opacity: 1; " transform="translate(0,54.54545454545456)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">45</text></g><g style="opacity: 1; " transform="translate(0,27.27272727272731)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">50</text></g><g style="opacity: 1; " transform="translate(0,0)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end" style="font-size: 14px; fill: #aaaaaa; ">55</text></g><path class="domain" d="M-6,0H0V300H-6" style="opacity: 0; "></path></g><line class="tickmarks" stroke="#D3D3D3" y1="400" y2="400" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="372.72727272727275" y2="372.72727272727275" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="345.45454545454544" y2="345.45454545454544" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="318.1818181818182" y2="318.1818181818182" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="290.9090909090909" y2="290.9090909090909" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="263.6363636363636" y2="263.6363636363636" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="236.36363636363637" y2="236.36363636363637" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="209.0909090909091" y2="209.0909090909091" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="181.8181818181818" y2="181.8181818181818" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="154.54545454545456" y2="154.54545454545456" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="127.27272727272731" y2="127.27272727272731" x1="31" x2="531"></line><line class="tickmarks" stroke="#D3D3D3" y1="100" y2="100" x1="31" x2="531"></line><g class="source" width="43.565217391304344" height="400" transform="translate(43.891304347826086, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Friend</text><rect width="18.67080745341615" height="245.45454545454544" x="2.0745341614906834" y="154.54545454545456" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="300" x="22.819875776397513" y="100" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(98.34782608695652, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Workshop</text><rect width="18.67080745341615" height="76.36363636363637" x="2.0745341614906834" y="323.6363636363636" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="180" x="22.819875776397513" y="220" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(152.80434782608694, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Street</text><rect width="18.67080745341615" height="32.72727272727275" x="2.0745341614906834" y="367.27272727272725" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="43.636363636363626" x="22.819875776397513" y="356.3636363636364" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(207.26086956521738, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Family</text><rect width="18.67080745341615" height="21.818181818181813" x="2.0745341614906834" y="378.1818181818182" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="54.54545454545456" x="22.819875776397513" y="345.45454545454544" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(261.7173913043478, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Facebook</text><rect width="18.67080745341615" height="21.818181818181813" x="2.0745341614906834" y="378.1818181818182" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="21.818181818181813" x="22.819875776397513" y="378.1818181818182" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(316.1739130434782, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Counselor </text><rect width="18.67080745341615" height="16.363636363636374" x="2.0745341614906834" y="383.6363636363636" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="32.72727272727275" x="22.819875776397513" y="367.27272727272725" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(370.63043478260863, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Online</text><rect width="18.67080745341615" height="16.363636363636374" x="2.0745341614906834" y="383.6363636363636" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="0" x="22.819875776397513" y="400" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(425.08695652173907, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Other</text><rect width="18.67080745341615" height="16.363636363636374" x="2.0745341614906834" y="383.6363636363636" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="0" x="22.819875776397513" y="400" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g><g class="source" width="43.565217391304344" height="400" transform="translate(479.5434782608695, 0)"><text text-anchor="end" font-weight="bold" style="font-size: 14px; " transform="translate(26.782608695652172,416) rotate(-90)">Flyer</text><rect width="18.67080745341615" height="10.909090909090935" x="2.0745341614906834" y="389.09090909090907" style="fill: #91b82c; stroke: #91b82c; stroke-width: 1px; stroke-opacity: 0.2; "></rect><rect width="18.67080745341615" height="21.818181818181813" x="22.819875776397513" y="378.1818181818182" style="fill: #0c801e; stroke: #0c801e; stroke-width: 1px; stroke-opacity: 0.2; "></rect></g></svg>