Skip to content

Instantly share code, notes, and snippets.

@poezn
Forked from anonymous/_.md
Created August 30, 2012 05:00
Show Gist options
  • Save poezn/3522544 to your computer and use it in GitHub Desktop.
Save poezn/3522544 to your computer and use it in GitHub Desktop.
just another inlet to tributary
{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"endpoint":"tributary"}
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] + ')';
});
Display the source blob
Display the rendered blob
Raw
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment