Binomial Probability Density

binomial probability density function calculates success or failure. probability of x successes in n sucessive trials

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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>
  <script>
    var START_SUCCESS_RATE = 0.03;
    var NUMBER_SUCCESS_RATE = 2;
    var START_SAMPLE_SIZE = 30;
    var NUMBER_SAMPLE_SIZE = 4;    
    var STEP_SAMPLE_SIZE = 10;
    var NUMBER_HIRES = 3;    
    
    var margin = {top: 0, right: 0, bottom: 0, left: 0};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    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')

// calculates the probability that x or more out of a batch of n will be successful
    // i.e. if 4% of candidates make it to hired, what is that chance that 4 out of 50 will get hired
    // likelihood of hiring 10 candidates this month is 10% (we auto know what the batch size is because we know number in stage)
    // if you move 30 more people to this stage, the likelihood increases to 20$ 
    function calcChanceOfOccurence(pSuccessRate, nBatchSize, xFailureThreshold){
      // throw new Error 'The success rate must be a percentage' if failureRate > 1
      var qFailureRate = 1 - pSuccessRate;
      
      var result = 1;
      xFailureThreshold--;
      while (xFailureThreshold >= 0){
        // (n x) = n!/[(n-x)!x!]
        var nOverX = factorial(nBatchSize)/( factorial(nBatchSize - xFailureThreshold) * factorial(xFailureThreshold) );
        // p{3} = (n / x) * p^(x) * q^(n - x)
        var p = nOverX * Math.pow(pSuccessRate, xFailureThreshold) * Math.pow(qFailureRate, (nBatchSize - xFailureThreshold));
        result -= p;
        xFailureThreshold--;
      }
      return result;
    }

const yScale = d3.scaleLinear()
      .domain([0, 1])
      .range([height, 0])
    
    newData.forEach(data => {
      const color = '#'+Math.floor(Math.random()*16777215).toString(16);
      d3.select("#transformGroup").append('g')
        .selectAll("circle").data(data).enter().append('circle')
          .attr("cx", 0)
          .attr("cy", d => yScale(calcChanceOfOccurence(d.chance, d.n, d.hire)))
          .attr("r", 2)
          .attr("fill", color)
          .attr("opacity", 0.4)
          .transition().duration(1000)
          .attr("cx", d => calcChanceOfOccurence(d.chance, d.n, d.hire) * width) 
        .attr("r", 14)

d3.select("#transformGroup").append('g')
        .selectAll("text").data(data).enter().append('text')
          .text(d => Math.round(calcChanceOfOccurence(d.chance, d.n, d.hire)*1000)/10 + '% chance that ' + NUMBER_HIRES + ' hires will be made assuming '+  Math.round(d.chance*100) + '% success rate and ' +  d.n + ' applicants')
          .attr("cx", 0)
          .attr("y", d => yScale(calcChanceOfOccurence(d.chance, d.n, d.hire)))
          .attr("fill", color)
          .attr("opacity", 0.8)
          .transition().duration(1000)
          .attr("x", d => 14 + calcChanceOfOccurence(d.chance, d.n, d.hire) * width) 
    })
  </script>
</body>

https://d3js.org/d3.v4.min.js