Skip to content

Instantly share code, notes, and snippets.

@jonsadka

jonsadka/README.md

Last active November 13, 2015 21:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jonsadka/00e6248efe5605c1fa5c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jonsadka/00e6248efe5605c1fa5c to your computer and use it in GitHub Desktop.
Download ZIP
Conversion rates
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment