Visualization of http://evanmiller.org/how-not-to-sort-by-average-rating.html

by val2048

HTML

<script src="http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/excanvas.js"></script>
<script src="http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/SurfacePlot.js"></script>
<script src="http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/ColourGradient.js"></script>
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id='surfurfacePlot'>
        <!-- Soes here... -->
            
      </div>

JavaScript

google.load("visualization", "1");
google.setOnLoadCallback(function()
                         {
                             window.setTimeout(setUp, 1000);
                         });

function confidence(ups, downs) {
    var n = ups + downs;
    if (n == 0) return 0;
    var z = 1.0;
    var phat = ups / n;
    return Math.sqrt(phat + z * z / (2 * n) - z * ((phat * (1 - phat) + z * z / (4 * n)) / n)) / (1 + z * z / n);
}

function isIE() {
    return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
}
var origGradient = greg.ross.visualisation.ColourGradient;

greg.ross.visualisation.ColourGradient = function(a,b,c)
{
    var g = new origGradient(a,b,c);
    var orig = g.getColour;
    g.getColour= function(v)
    {
        return orig.apply(g, [Math.round(v * 10)/10]);
    };
    return g;
}
function setUp() {

    var numRows = 25;
    var numCols = 25;

    var tooltipStrings = new Array();
    var data = new google.visualization.DataTable();

    for (var i = 0; i < numCols; i++) {
        data.addColumn('number', 'col' + i);
    }

    data.addRows(numRows);
    var d = 360 / numRows;
    var idx = 0;

    for (var i = 0; i < numRows; i++) {
        for (var j = 0; j < numCols; j++) {
            var value = confidence(i, j)
            data.setValue(i, j, value);

            tooltipStrings[idx] = "p:" + i + ", n:" + j + ", rating: " + Math.round(value * 10);
            idx++;
        }
    }

    var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));

    // Don't fill polygons in IE. It's too slow.
    var fillPly = !isIE();

    // Define a colour gradient.
    var colour1 = {
        red: 0,
        green: 0,
        blue: 255
    };
    var colour2 = {
        red: 0,
        green: 255,
        blue: 255
    };
    var colour3 = {
        red: 0,
        green: 255,
        blue: 0
    };
    var colour4 = {
        red: 255,
        green: 255,
        blue: 0
    };
   ...