function main(){ /* VARIABLE DEFINITIONS */ var IS_MOUSE_DOWN = false var PREVIOUS_XCLICK, PREVIOUS_YCLICK var UPDATING_PLOT var CANVASDIST var DISTRO_EV, DISTRO_SD var CANV_COMMANDS_ENABLED var canvas = document.getElementById('canvasID') var CTX = canvas.getContext('2d') var RECT = canvas.getBoundingClientRect() var X_LIM = canvas.width var X0_SPACE_FACTOR = 15 var X0 = Math.round(X_LIM / X0_SPACE_FACTOR) var X0B = X0 - 1 var X1 = X_LIM - X0 var X1B = X1 - 1 var Y_LIM = canvas.height var Y0_RATIO = 0.9 var Y0_LINE = Math.round(Y_LIM * Y0_RATIO) var MAX_PROB = Math.round(Y_LIM * (1 - Y0_RATIO)) var PADDING10 = 10 var PADDING4 = 4 var PRECISION = X_LIM - 2 * X0 var PRECISIONB = PRECISION - 1 let leftConfidenceInterval = 0 let rightConfidenceInterval = 1000 /* PLOTTING FUNCTIONS */ function percentiles(i, j) { const interval = CANVASDIST.reduce((total, x) => { return (total + (Y0_LINE - x[1])) }, 0) / j const negInterval = interval * -1 + 20 let startIndex = 0 let firstVisit = true let firstVisit2 = true let probRemaining = (i - 1) * interval let out CANVASDIST.forEach((x, i) => { probRemaining -= Y0_LINE - x[1] // probability mass in column if (probRemaining <= 0) { if (firstVisit) { startIndex = i firstVisit = false } if (probRemaining <= negInterval) { if (firstVisit2) { out = [startIndex, i] firstVisit2 = false } } } }) return out } function plotCanvasDist(CANVASDIST, CTX) { console.log(CANVASDIST) // clears pixels w/ new white sheet. CTX.fillStyle = '#FFF' CTX.fillRect(0, 0, X_LIM, Y_LIM) CTX.fillStyle = '#000' CTX.stroke() // number of equaprobability shaded percentiles const j = 5 for (let i = 1; i < j + 1; i++) { CTX.beginPath() const temp = percentiles(i, j) const startIndex = temp[0] const endIndex = temp[1] CTX.strokeStyle = i % 2 === 1 ? '#DDD' : '#EEE' for (let i = startIndex; i < endIndex; i++) { CTX.moveTo(X0 + CANVASDIST[i][0], Y0_LINE) CTX.lineTo(X0 + CANVASDIST[i][0], CANVASDIST[i][1]) } CTX.moveTo(X0 + CANVASDIST[endIndex][0], Y0_LINE) CTX.lineTo(X0 + CANVASDIST[endIndex][0], CANVASDIST[endIndex][1]) CTX.stroke() } // draws lines parallel to x axis + factors to help w/ precise drawing. CTX.beginPath() CTX.strokeStyle = '#CCC' CTX.lineWidth = 2.0 CTX.moveTo(X0, Y0_LINE) CTX.lineTo(X1, Y0_LINE) CTX.font = '18px Roboto' CTX.textAlign = 'left' CTX.fillText('0', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.01)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.1)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.1)) CTX.fillText('1x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.11)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.2)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.2)) CTX.fillText('2x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.21)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.3)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.3)) CTX.fillText('3x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.31)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.4)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.4)) CTX.fillText('4x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.41)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.5)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.5)) CTX.fillText('5x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.51)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.6)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.6)) CTX.fillText('6x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.61)) CTX.moveTo(X0B, Y_LIM * (Y0_RATIO - 0.7)) CTX.lineTo(X1, Y_LIM * (Y0_RATIO - 0.7)) CTX.fillText('7x', X0B + PADDING4, Y_LIM * (Y0_RATIO - 0.71)) CTX.stroke() // dashed mu line const xEV = Math.floor(CANVASDIST.reduce((total, x) => { return (total + x[0] * (Y0_LINE - x[1])) }, 0) / CANVASDIST.reduce((total, x) => { return (total + (Y0_LINE - x[1])) }, 0)) CTX.beginPath() CTX.strokeStyle = '#5680cc' CTX.setLineDash([5, 10]) CTX.moveTo(X0 + xEV, CANVASDIST[xEV][1]) CTX.lineTo(X0 + xEV, Y0_LINE) CTX.stroke() CTX.setLineDash([]) // draws blue distribution CTX.beginPath() CTX.strokeStyle = '#5680cc' CTX.lineWidth = 3 CTX.moveTo(X0 + CANVASDIST[0][0], CANVASDIST[0][1]) for (let i = 0; i < PRECISION; i++) { CTX.lineTo(X0 + CANVASDIST[i][0], CANVASDIST[i][1]) } CTX.stroke() // draws XUNITS, y units (Pr()), xVals along x-axis CTX.beginPath() CTX.strokeStyle = '#000' CTX.font = '30px Roboto' CTX.textAlign = 'right' CTX.strokeText('Pr', X0 - 1.5 * PADDING10, Y_LIM * 0.46) CTX.textAlign = 'center' CTX.strokeText('X', X_LIM * 0.5, Y_LIM * 0.985) CTX.stroke() // draws units along the x axis CTX.font = '16px Roboto' CTX.lineWidth = 2.0 for (let i = 0; i < 13; i++) { let x = Math.round(PRECISION * i / (X0_SPACE_FACTOR - 3)) if (x > PRECISIONB) { x = PRECISIONB } CTX.fillText(format(CANVASDIST[x][2]), X0 + x, Y_LIM * (Y0_RATIO + 0.036)) if (x === 0) { x = -2 } if (x === PRECISIONB) { x += 2 } CTX.moveTo(X0 + x, Y_LIM * (Y0_RATIO + 0.01)) CTX.lineTo(X0 + x, Y_LIM * (Y0_RATIO - 0.01)) } CTX.stroke() // draws rectangle around the plot CTX.lineWidth = 2.0 CTX.strokeStyle = '#000' CTX.moveTo(X1, Y0_LINE) CTX.lineTo(X0 - 2, Y0_LINE) CTX.lineTo(X0 - 2, Y_LIM * 0.1 - 1) CTX.lineTo(X1 + 1, Y_LIM * 0.1 - 1) CTX.lineTo(X1 + 1, Y0_LINE) CTX.stroke() } /* DEFINE THE INITIAL DISTRIBUTION*/ function initializeDistribution(leftConfidenceInterval, rightConfidenceInterval, confidence) { function stanNormCDF(length, zScore) { const probabilities = [] const e = Math.E const aConst = zScore * 2 / length let x, prob let temp = 0 for (let i = 0; i < length; i++) { x = i * aConst - zScore prob = 1 / (1 + e ** (0.0054 - 1.6101 * x - 0.0674 * x ** 3)) // approximation from http://web2.uwindsor.ca/math/hlynka/zogheibhlynka.pdf probabilities.push(prob - temp) temp = prob } probabilities[0] = 0 return probabilities } function genNormDistroFromCI(leftVal, rightVal, confidenceLevel, PRECISION) { function confidenceToZscore(c = 0.95) { switch (c) { case 0.8: return 0.845 case 0.9: return 1.645 case 0.95: return 1.96 case 0.98: return 2.33 case 0.99: return 2.575 case 1.0: return 3.0 default: return 1.96 } } const zScore = 3.0 const standardDeviation = (rightVal - leftVal) * 0.5 / confidenceToZscore(confidenceLevel) const leftMostX = (leftVal + rightVal) * 0.5 - zScore * standardDeviation const xConversionFactor = 2 * zScore * standardDeviation / PRECISION const probs = stanNormCDF(PRECISION, zScore) return probs.map((p, i) => { return [leftMostX + i * xConversionFactor, p] }) } function distroToCANVASDIST(distro) { const maxProb = distro.reduce((highest, x) => { return highest > x[1] ? highest : x[1] }, 0) const leftMostX = distro[0][0] const xConversionFactor = PRECISION / (distro[PRECISION - 1][0] - leftMostX) const yConversionFactor = Y_LIM / (2 * maxProb) return distro.map((x, i) => { return [Math.round(xConversionFactor * (x[0] - leftMostX) - 1), Math.round(Y0_LINE - yConversionFactor * x[1]), x[0]] }) } let distro = genNormDistroFromCI(leftConfidenceInterval, rightConfidenceInterval, confidence, PRECISION) CANVASDIST = distroToCANVASDIST(distro) plotCanvasDist(CANVASDIST, CTX) } initializeDistribution(leftConfidenceInterval, rightConfidenceInterval, 0.95) /* ADD EVENT LISTENERS*/ function updateDistWithMouseMovement(xClick, yClick, CANVASDIST, PREVIOUS_XCLICK, PREVIOUS_YCLICK) { /* The mouse moves across the screen, and we get a series of (x,y) positions. We know where the mouse last was we update everything between the last (x,y) position and the new (x,y), using linear interpolation */ xClick -= X0 PREVIOUS_XCLICK -= X0 const avgYShift = (yClick - PREVIOUS_YCLICK) / (xClick - PREVIOUS_XCLICK) let j = 1 if (xClick > PREVIOUS_XCLICK) { for (let i = PREVIOUS_XCLICK; i < xClick; i++) { CANVASDIST[i][1] = PREVIOUS_YCLICK + j * avgYShift j++ } } else { for (let i = PREVIOUS_XCLICK; i > xClick; i--) { CANVASDIST[i][1] = PREVIOUS_YCLICK - j * avgYShift j++ } } } canvas.addEventListener('mousedown', e => { // to add touch support for touch screens // basically copy, but with ~'touchdown' //displayHoverVal(e) RECT = canvas.getBoundingClientRect() // gets new coords of canvas considering user could scroll page if (e.clientX - RECT.left > X0 && e.clientX - RECT.left < X0 + PRECISION) { PREVIOUS_XCLICK = Math.round(e.clientX - RECT.left) CANV_COMMANDS_ENABLED = true } else { PREVIOUS_XCLICK = null CANV_COMMANDS_ENABLED = false } if (e.clientY - RECT.top < Y0_LINE && e.clientY - RECT.top > MAX_PROB) { PREVIOUS_YCLICK = e.clientY - RECT.top } else { PREVIOUS_YCLICK = null CANV_COMMANDS_ENABLED = false } IS_MOUSE_DOWN = true UPDATING_PLOT = window.setInterval(() => { plotCanvasDist(CANVASDIST, CTX) // updates canvas every 40ms }, 40) }) canvas.addEventListener('mousemove', e => { //displayHoverVal(e) if (IS_MOUSE_DOWN === true) { let xClick = Math.round(e.clientX - RECT.left) let yClick = e.clientY - RECT.top if (PREVIOUS_XCLICK === null) { PREVIOUS_XCLICK = xClick } if (PREVIOUS_YCLICK === null) { PREVIOUS_YCLICK = yClick } if (xClick < X0) { xClick = X0 } if (xClick > X1B) { xClick = X1B } if (yClick > Y0_LINE) { yClick = Y0_LINE } if (yClick < MAX_PROB) { yClick = MAX_PROB } updateDistWithMouseMovement(xClick, yClick, CANVASDIST, PREVIOUS_XCLICK, PREVIOUS_YCLICK) PREVIOUS_XCLICK = xClick PREVIOUS_YCLICK = yClick } }) window.addEventListener('mouseup', e => { //displayHoverVal(e) if (IS_MOUSE_DOWN === true) { IS_MOUSE_DOWN = false window.clearInterval(UPDATING_PLOT) plotCanvasDist(CANVASDIST, CTX) RECT = canvas.getBoundingClientRect() } }) /* Add event listeners for touchscreens*/ canvas.addEventListener('touchstart', e => { e.preventDefault() }) canvas.addEventListener('touchmove', e => { e.preventDefault() }) canvas.addEventListener('touchend', e => { e.preventDefault() }) canvas.addEventListener('touchcancel', e => { e.preventDefault() }) canvas.addEventListener('touchstart', e => { CANV_COMMANDS_ENABLED = true const touch = e.touches[0] const mouseEvent = new MouseEvent('mousedown', { clientX: touch.clientX, clientY: touch.clientY }) canvas.dispatchEvent(mouseEvent) }, false) canvas.addEventListener('touchend', e => { const mouseEvent = new MouseEvent('mouseup', {}) canvas.dispatchEvent(mouseEvent) }, false) canvas.addEventListener('touchmove', e => { const touch = e.touches[0] const mouseEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY }) canvas.dispatchEvent(mouseEvent) }, false) /* Event listeners for buttons */ document.getElementById('genVarBtn').addEventListener('click', function () { const left = parseFloat(document.getElementById('leftVal').value) const right = parseFloat(document.getElementById('rightVal').value) const confidence = parseFloat(document.querySelector('input[name="confidenceRadio"]:checked').value) console.log({ left, right, confidence }) initializeDistribution(left, right, confidence) plotCanvasDist(CANVASDIST, CTX) }) document.getElementById('createFromGuesstimateString').addEventListener('click', function () { const guesstimateString = document.getElementById('guesstimateString').value console.log(guesstimateString) let cdf = guesstimatorInputToCdf({ guesstimatorInput: guesstimateString, simulationSampleCount: 10000, outputSampleCount: 1000, smoothingWidth: 80 }) let pdf = cdf.toPdf() CANVASDIST = XYDistToCanvasDist(pdf) console.log("Create from Guesstimate") console.log(cdf) console.log(pdf) console.log(CANVASDIST) plotCanvasDist(CANVASDIST, CTX) }) document.getElementById('sendToForetoldButton').addEventListener('click', function () { const questionID = document.getElementById('measurableId').value const token = document.getElementById('foretoldToken').value const comment = document.getElementById('comment').value let XYDIST = canvasToXYDist(CANVASDIST); let cdf = XYDistToCdf(XYDIST) predict({ questionID, token, cdf, comment}) }) /* NUMBER FORMATTING */ function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') } function atLeast3SigFigs(number) { var formattedNumber; const nstring = number.toString() for (let i = 0; i < nstring.length; i++) { if (nstring[i] === '.') { formattedNumber = i > 3 ? Math.round(number) : Math.round((number + Number.EPSILON) * 10 ^ (3 - i)) / 10 ^ (3 - i) return formattedNumber } } return Math.round(number) } function format(number) { return numberWithCommas(atLeast3SigFigs(number)) } /*CONVERT DISTRIBUTIONS TO AND FROM FORETOLD FORMAT*/ /* The fundamental unit for the canvas is the distance vector from the (0,0) point at the upper leftmost corner of the screen The fundamental unit for a probability distribution is an x coordinate and its corresponding y probability density */ function canvasToXYDist(CANVASDIST) { let xs = [] let ys = [] for (let point of CANVASDIST) { console.log(point) xs.push(point[2]) ys.push(Y0_LINE - point[1]) } /* Note that normalization here is tricky. The code that follows doesn't quite work; we'd need to choose either StepWise or Linear interpolation, and integrate according to that interpolation.*/ let sumYs = ys.reduce((x, y) => x + y, 0); ys = ys.map(y => y / sumYs); return ({ xs, ys }) } function XYDistToCdf(XYDIST) { const cumulativeSum = (sum => value => sum += value)(0); const cdfYs = (XYDIST.ys).map(cumulativeSum); return ({ xs: XYDIST.xs, ys: cdfYs }) } function XYDistToCanvasDist(pdf){ let canvas = [] let minY = 0 let maxY = pdf.ys.reduce((a,b) => a>b?a:b, 0) let ysScaled = pdf.ys.map(x=> (x/maxY)*Y0_LINE*0.85); let ysInversed = ysScaled.map(x => Y0_LINE-x); for(let i=0; i