Conversion rates

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;
        }
      })

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js