SPIN
/
CertainTrustSDK


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>CertainTrust with Multinomial Opinion Representation</title>

	<script type="text/javascript" src="CertainTrust.js"></script>
	<script type="text/javascript" src="certainTrustHTI.js"></script>
	<link rel="stylesheet" type="text/css" href="certainTrustHTI.css"/>
	<style type="text/css">
body {
	text-align: center;
}
table {
	margin-left:auto;
	margin-right:auto;
}
th:after {
	content: ":";
}
tr#splitpoints > th:after {
	content: "";
}
tr#frequentist-mles > td:after, tr#posterior-mles > td:after {
	content: " %";
}
input {
	width: 5em;
}

ul#graph {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

ul#graph li {
	border: 1px solid #000;
	bottom: 0;
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
}

	</style>
</head>
<body>
<script type="text/javascript">
var ctObject = new CertainTrust(50);
var hti = new CertainTrustHTI(ctObject, { readonly: true, confidence: { width: 1 }  } );

var CATEGORIES = new Array(1, 5, 14, 8, 4);
var PRIORS = new Array(1, 1, 1, 1, 1);
var DEFAULT_CATEGORY = 4;
var GRAPH_HEIGHT = 300;
var GRAPH_BAR_WIDTH = 60;

if (CATEGORIES.length !== PRIORS.length)
	alert("Count of Categories and Prior do not match! Expect bogus output…");

function _experiencesChangedKeyPress(e) {
	if (e.keyCode != 13)
		return;
	_experiencesChangedBlur();
}
function _experiencesChangedBlur() {
	var split = _findSplitPoint();
	_betaAlphaRangeChanged(split);
}

function _findSplitPoint() {
	var splits = document.getElementsByName('splitpoints');
	for (var i = 0; i < splits.length; ++i)
		if (splits[i].checked == true)
			return i;
	return DEFAULT_CATEGORY - 1;
}

// rounds numbers to at most 3 decimal places
function _formatNumber(number) {
	return Math.round(number * 1000) / 1000;
}

function _betaAlphaRangeChanged(split) {
	// calculate amount of positive and negative experiences and a maximum
	var alpha = 0, beta = 0, maxv = 0;
	for (var i = 0; i < split; ++i) {
		var v = parseInt(document.getElementById('experience-' + i).value);
		var p = parseFloat(document.getElementById('prior-' + i).value);
		beta += v;
		maxv = Math.max(v + p, maxv);
	}
	for (var i = split; i < CATEGORIES.length; ++i) {
		var v = parseInt(document.getElementById('experience-' + i).value);
		var p = parseFloat(document.getElementById('prior-' + i).value);
		alpha += v;
		maxv = Math.max(v + p, maxv);
	}
	// update HTI
	ctObject.setRS(alpha, beta);
	// delete the current bar chart
	var graph = document.getElementById('graph');
	graph.setAttribute('style', 'height: ' + GRAPH_HEIGHT + 'px;width: ' + (GRAPH_BAR_WIDTH * CATEGORIES.length) + 'px;');
	while (graph.lastChild !== null)
		graph.removeChild(graph.lastChild);

	var all = alpha + beta;
	++maxv;
	var scale = GRAPH_HEIGHT / maxv;

	// add up all priors
	var postall = all;
	for (var i = 0; i < PRIORS.length; ++i)
		postall += PRIORS[i];

	for (var i = 0; i < CATEGORIES.length; ++i) {
		var a = parseInt(document.getElementById('experience-' + i).value);
		var prior = parseFloat(document.getElementById('prior-' + i).value);
		// calculate and set the three table fields
		var freq = (100 * a) / all;
		document.getElementById('frequentist-mle-' + i).firstChild.nodeValue = _formatNumber(freq);
		var post = (100 * (a + prior)) / postall;
		document.getElementById('posterior-mle-' + i).firstChild.nodeValue = _formatNumber(post);
		var K = 7.87; // FIXME: Magic number
		var n = all;
		var p = a/n;
		var goodman = hti.intervalCertainty(K, a, n, p, 1);
		var estimate = 1 - (goodman.upper - goodman.lower);
		document.getElementById('certainty-' + i).firstChild.nodeValue = _formatNumber(estimate);

		// draw the bar chart
		var element = document.createTextNode(_formatNumber(estimate));
		var bar = document.createElement('li');
		bar.appendChild(element);
		var grey = document.createElement('li');
		var styling = 'left: ' + (i * GRAPH_BAR_WIDTH) + 'px;';
		styling += 'width: ' + (GRAPH_BAR_WIDTH - 1) + 'px;';
		grey.setAttribute('style', styling + 'background-color: grey;height: ' + Math.round(scale * prior) + 'px;');
		styling += 'height: ' + Math.round(scale * (a + prior)) + 'px;';
		// gradient is from red → yellow → green (adding green → substracting red)
		var colorpos = Math.round(((255 * 2) / (CATEGORIES.length - 1)) * i);
		if (colorpos < 255)
			styling += 'background-color: rgb(255, ' + colorpos + ', 0);';
		else
			styling += 'background-color: rgb(' + (510 - colorpos) + ', 255, 0);';
		bar.setAttribute('style', styling);
		graph.appendChild(bar);
		graph.appendChild(grey);
	}
}

function _categorySplitClicked() {
	_betaAlphaRangeChanged(parseInt(this.value));
}
</script>
<div><ul id="graph"></ul></div>
<table>
<tr id="frequentist-mles"><th>Frequentist MLE</th></tr>
<tr id="posterior-mles"><th>Posterior MLE</th></tr>
<tr id="certainties"><th>Certainty</th></tr>
<tr id="experiences"><th>Experience</th></tr>
<tr id="priors"><th>Prior</th></tr>
<tr id="splitpoints"><th>&gt;=</th></tr>
</table>

<script>
function _addCell(id, element) {
	var cell = document.createElement('td');
	cell.appendChild(element);
	document.getElementById(id).appendChild(cell);
}

function _addTextCell(id, textid, value) {
	var element = document.createTextNode(value);
	var cell = document.createElement('td');
	cell.setAttribute('id', textid);
	cell.appendChild(element);
	document.getElementById(id).appendChild(cell);
}

function _addInput(parentid, base, nr, value) {
	var input = document.createElement('input');
	input.setAttribute('type', 'text');
	input.setAttribute('id', base + '-' + nr);
	input.setAttribute('value', value);
	input.addEventListener('keypress', _experiencesChangedKeyPress, false);
	input.addEventListener('blur', _experiencesChangedBlur, false);
	_addCell(parentid, input);
}

for (var i = 0; i < CATEGORIES.length; ++i) {
	_addTextCell('frequentist-mles', 'frequentist-mle-' + i, '0');
	_addTextCell('posterior-mles', 'posterior-mle-' + i, '0');
	_addTextCell('certainties', 'certainty-' + i, '0.0');

	_addInput('experiences', 'experience', i, CATEGORIES[i]);
	_addInput('priors', 'prior', i, PRIORS[i]);

	var splitpoint = document.createElement('input');
	splitpoint.setAttribute('type', 'radio');
	splitpoint.setAttribute('id', 'splitpoint-' + i);
	splitpoint.setAttribute('name', 'splitpoints');
	splitpoint.setAttribute('value', i);
	splitpoint.addEventListener('click', _categorySplitClicked, false);
	_addCell('splitpoints', splitpoint);
}
document.getElementById('splitpoint-' + (DEFAULT_CATEGORY - 1)).setAttribute('checked', 'checked');
</script>
<div>

</div>
<script>_betaAlphaRangeChanged(_findSplitPoint());</script>
</body>
</html>