-
Notifications
You must be signed in to change notification settings - Fork 1
/
distrCanvas.js
86 lines (74 loc) · 2.74 KB
/
distrCanvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
var hlanameplate = document.getElementById("hlanameplate");
function drawInitDistrCanvas(state, hlastate, candidateState, canvas, ctx){
const width = canvas.width;
const height = canvas.height;
ctx.fillStyle = "white";
ctx.fillRect(0,0,width,height);
const margin = 1/10;
const xmin = width*margin;
const ymin = height*margin;
const xmax = width * (1-margin);
const ymax = height * (1-margin);
const dlen = state.distributions[0].length;
const w = (xmax-xmin)/dlen;
ctx.lineWidth = 1;
const grd = ctx.createLinearGradient(0, ymax, 0, ymin);
grd.addColorStop(0, "silver");
grd.addColorStop(1, "white");
ctx.strokeStyle = grd;
ctx.fillStyle = "black";
ctx.font = "10px sans serif";
ctx.textAlign = "center";
let xpos = xmin + w/2;
for (let i = 0; i < dlen; i++)
{
ctx.beginPath();
ctx.moveTo(xpos, ymax+4);
ctx.lineTo(xpos, ymin);
ctx.stroke();
if (i == dlen-1) ctx.fillText(i + "+", xpos+3, ymax+12);
else ctx.fillText(i, xpos, ymax+12);
xpos += w;
}
if (! (hlastate.active === -1) )
{
const name = state.populationNames[hlastate.active];
hlanameplate.innerHTML = name;
const distr = state.distributions[hlastate.active];
let p = 0;
if (!(candidateState.selected === null)) p = candidateState.selected.pvec[hlastate.active];
let distr2 = [distr[0]*(1-p)];
for (let i = 1; i < distr.length-1; i++)
{
distr2.push( (distr[i]*(1-p)) + (distr[i-1]*p) );
}
distr2.push( distr[distr.length-1] + (distr[distr.length-1]*p) )
xpos = xmin;
for (let i = 0; i < distr.length; i++){
if (!(candidateState.selected === null))
{
const h2 = distr2[i] * (ymax - ymin)
ctx.fillStyle = "silver";
ctx.fillRect(xpos+(w*0.3), ymax-h2 , w*0.6, h2);
}
const h1 = distr[i] * (ymax - ymin)
ctx.fillStyle = "black";
ctx.fillRect(xpos+(w*0.1), ymax-h1 , w*0.6, h1);
xpos += w;
}
}
else
{
hlanameplate.innerHTML = "<br\><br\><br\><br\>";
}
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(0, ymax);
ctx.lineTo(width, ymax);
ctx.stroke();
}
function initDistrCanvas(state, hlastate, candidateState, canvas, ctx){
hlastate.draw2 = () => drawInitDistrCanvas(state, hlastate, candidateState, canvas, ctx);
candidateState.draw2 = () => drawInitDistrCanvas(state, hlastate, candidateState, canvas, ctx);
drawInitDistrCanvas(state, hlastate, candidateState, canvas, ctx);
}