Built with blockbuilder.org
forked from jonsadka's block: Binomial Probability Density
Built with blockbuilder.org
forked from jonsadka's block: Binomial Probability Density
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width: 100%; height: 100%; } | |
</style> | |
</head> | |
<body> | |
<div> | |
Ideation on conversion rate visuals. Toggle scaled count: <a onclick="toggleCount();">True</a> | |
</div> | |
<script> | |
var CONVERSION_RATES = [ | |
{conversion: 0.14, count: 4190 + 25479}, | |
{conversion: 0.51, count: 2526 + 2090}, | |
{conversion: 0.55, count: 2034 + 1325}, | |
{conversion: 0.45, count: 1281 + 1296}, | |
{conversion: 0.54, count: 35 + 23}, | |
{conversion: 0.45, count: 500 + 453}, | |
{conversion: 0.33, count: 276 + 375}, | |
{conversion: 0.30, count: 310 + 572}, | |
{conversion: 0.50, count: 3 + 37}, | |
{conversion: 0.64, count: 268 + 119} | |
]; | |
var margin = {top: 10, right: 10, bottom: 10, left: 10}; | |
var width = 960 - margin.left - margin.right; | |
var height = 500 - margin.top - margin.bottom - 30; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
.attr('id', 'transformGroup') | |
// Feel free to change or delete any of the code you see! | |
svg.append("rect") | |
.attr({x: 20, y: 10, width: width - 40, height: height - 20}) | |
.style({ stroke: 'RGBA(44, 46, 47, 1)', fill:'none'}) | |
var totalCount = CONVERSION_RATES.reduce(function(pv, cv){ | |
return pv + cv.count | |
},0) | |
CONVERSION_RATES.forEach(function(currentConversion, index){ | |
if (index === 0){ | |
CONVERSION_RATES[index].cumulCount = 0; | |
} else { | |
var prevConversion = CONVERSION_RATES[index - 1]; | |
CONVERSION_RATES[index].cumulCount = prevConversion.cumulCount + prevConversion.count | |
} | |
}) | |
// INITIAL RENDER | |
d3.select('#transformGroup').append('g').selectAll('circle').data(CONVERSION_RATES).enter().append('rect') | |
.attr({ | |
class: 'conversion-bar', | |
x: function(d){return (width - 40) * (1 - d.conversion)/2 + 20;}, | |
y: function(d){ | |
var barHeight = (height - 20) * d.cumulCount / totalCount; | |
return barHeight + 10; | |
}, | |
width: function(d){return (width - 40) * d.conversion;}, | |
height: function(d){ | |
var barHeight = (height - 20) * d.count / totalCount; | |
return barHeight; | |
}, | |
stroke: 'black', | |
'stroke-width': 1 | |
}) | |
.style({fill: '#B86782', opacity: 0.2}) | |
d3.select('#transformGroup').append('g').selectAll('text').data(CONVERSION_RATES).enter().append('text') | |
.text(function(d){return Math.round(d.conversion * 100) + '%, Count: ' + d.count;}) | |
.attr({ | |
class: 'conversion-text', | |
x: function(d){return (width - 40) * (1 - d.conversion)/2 + 20;}, | |
y: function(d){ | |
var barHeight = (height - 20) * d.cumulCount / totalCount; | |
return barHeight + 10; | |
} | |
}) | |
var scaleCount = true; | |
function toggleCount(){ | |
scaleCount = !scaleCount; | |
d3.selectAll('.conversion-bar').data(CONVERSION_RATES) | |
.transition().duration(1000) | |
.attr({ | |
y: function(d, i){ | |
if (scaleCount){ | |
var barHeight = (height - 20) * d.cumulCount / totalCount; | |
return barHeight + 10; | |
} else { | |
var barHeight = (height - 20) * i / CONVERSION_RATES.length; | |
return barHeight + 10; | |
} | |
}, | |
height: function(d){ | |
if (scaleCount){ | |
var barHeight = (height - 20) * d.count / totalCount; | |
return barHeight; | |
} else { | |
var barHeight = (height - 20) * 1 / CONVERSION_RATES.length; | |
return barHeight | |
} | |
} | |
}) | |
d3.selectAll('.conversion-text').data(CONVERSION_RATES) | |
.transition().duration(1000) | |
.attr({ | |
y: function(d, i){ | |
if (scaleCount){ | |
var barHeight = (height - 20) * d.cumulCount / totalCount; | |
return barHeight + 10; | |
} else { | |
var barHeight = (height - 20) * i / CONVERSION_RATES.length; | |
return barHeight + 10; | |
} | |
} | |
}) | |
} | |
</script> | |
</body> |