-
Notifications
You must be signed in to change notification settings - Fork 1
/
histogramTutorual.html
347 lines (254 loc) · 13.6 KB
/
histogramTutorual.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<html> <head>
<script src="Histo.js"></script>
<script src="Func.js"></script>
<script src="Vector.js"></script>
<script src="Matrix.js"></script>
<script src="distributions.js"></script>
<script src="Plot.js"></script>
<script src="FillTextures.js"></script>
</head> <body>
<script type="text/JavaScript">
/*-----Intro to Clairvoyant Histo class-----------------------------
One of the core objects in Clairvoyant is the Histo class of objects.
Histo(grams) allow users to collect and bin data in a format
familiar and convenient for doing statistics on. Veterans of CERN's
ROOT package will find a lot of this familiar; however, Clairvoyant
will attempt in the future to improve on usability over ROOT by having
a single, unified histogram class in arbitrary dimensions - current
implementation is for 1D histograms only.
-----------------------------------------------------------------*/
//-----The Constructor---------------------------------------------
//Histo(<nbins>,<min>,<max>)
// <nbins> number of bins in the histogram
// <min> lower edge of first bin (included)
// <max> upper edge of last bin (excluded)
//Declare a new Histo like so:
var firstHist = new Histo(10,0,10);
var anotherHist = new Histo(10,0,10);
//firstHist has 10 bins, [0,1),[1,2)...[9,10). Notice that bins
//include their lower edge, and exclude their upper edge!
//-----------------------------------------------------------------
//-----dump Method---------------------------------------------
//dump() - no arguments
//Return type: 0 on successful exit
document.write('</br>/////////////////// .dump examples //////////////////////////////////</br>');
//dump writes out the name of the histo, and the index and value
//of each bin in this histo, from first to last, as index:value
document.write('firstHist:</br>');
firstHist.dump();
document.write('Notice firstHist has all bins initialized to 0 by default.');
document.write('</br>Important! Notice there is an extra bin at the end, entry 10 : 0');
document.write('</br>All Histo objects end with an empty bin, to indicate the end of the histogram.');
//-----increment Method---------------------------------------------
//increment(<value>,<amount>)
// <value> unbinned quantity to be incremented in the histo.
// <amount> (optional)amount by which to increment the bin that <value> falls into; default 1.
//Return type: 0 on successful exit.
document.write('</br></br>/////////////////// .increment examples //////////////////////////////////</br>');
//The increment method allows function bins to be incremented by
//a user-defined weight. Let's fill firstHist with some random
//points:
for(var i=0;i<1000; i++){
firstHist.increment(10*Math.random());
anotherHist.increment(10*Math.random());
}
document.write('firstHist:</br>');
firstHist.dump();
document.write('</br>And if we increment the histo at 0 by 3 and at 10 by 7:</br>');
firstHist.increment(0,3);
firstHist.increment(10,7);
document.write('firstHist:</br>');
firstHist.dump();
document.write('</br>Notice the 0 bin got incremented by 3 since 0 is included, but incrementing 10 by 7 did nothing since 10 (the upper bound of the histo) is excluded.');
//-----lowerTail Method----------------------------------------
//lwerTail(<CL>)
// <CL> fraction of the distribution to leave in the lower tail
//Return type: number indicating the cut in x below which <CL> of the distribution sits, linearly interpolated between bin boundaries.
document.write('</br></br>/////////////////// .lowerTail examples //////////////////////////////////</br>');
document.write('Bottom 5% of firstHist is below x = ');
document.write(firstHist.lowerTail(0.05));
//-----upperTail Method----------------------------------------
//upperTail(<CL>)
// <CL> fraction of the distribution to leave in the upper tail
//Return type: number indicating the cut in x above which <CL> of the distribution sits, linearly interpolated between bin boundaries.
document.write('</br></br>/////////////////// .upperTail examples //////////////////////////////////</br>');
document.write('Top 5% of firstHist is above x = ');
document.write(firstHist.upperTail(0.05));
//-----draw Method---------------------------------------------
//draw(<canvas>,<ymin>, <ymax>, <title>, <xtitle>, <ytitle>)
// <canvas> An HTML5 canvas to draw this Histo in.
// <ymin> Minimum of the vertical scale
// <ymax> Max of the vertical scale
// <title> Plot title
// <xtitle> x-axis title
// <ytitle> y-axis title
//Return type: 0 on successful exit.
document.write('</br></br>/////////////////// .draw examples //////////////////////////////////</br>');
//draw creates a Plot() object for this Histogram, and draws it in the indicated HTML5 canvas.
//note that if <ymax> = <ymin>, the function will set ymin to 0 and y max to 110% of the highest
//weight currently stored in the Histo.
</script>
<canvas id="canvas1" width="600" height="450"></canvas>
<canvas id="canvas2" width="600" height="450"></canvas>
<canvas id="canvas3" width="600" height="450"></canvas>
<script type="text/JavaScript">
firstHist.draw('canvas1', 80,120,'firstHist - controlled vertical range','derps','counts / derp');
firstHist.draw('canvas2', 0,0,'firstHist - auto vertical range','derps','counts / derp');
//use PlotStyle objects to style your histos:
var histoStyle1 = new PlotStyle();
histoStyle1.fill = 'leftCrosshatch';
histoStyle1.color = 'blue'
histoStyle1.titleNudgeX = -40;
var histoStyle2 = new PlotStyle();
histoStyle2.color = "black";
histoStyle2.fill = "green";
histoStyle2.opacity = 0.5;
histoStyle2.suppress = 1;
histoStyle2.lineWidth = 3;
firstHist.draw('canvas3', 80,150,'Styled Histos','derps','counts / derp', histoStyle1);
anotherHist.draw('canvas3', 80,130,'theseLabels','turnedOffBy','PlotStyle', histoStyle2);
//add a legend:
var legend = new Legend('canvas3', 500,50,100);
legend.add('firstHist', histoStyle1);
legend.add('anotherHist', histoStyle2);
legend.draw();
//-----integrate Method---------------------------------------------
//integrate(<min>,<max>)
// <min> lower bound of integration range
// <max> upper bound of integration range
//Return type: float on successful exit.
document.write('</br></br>/////////////////// .integrate examples //////////////////////////////////</br>');
//integrate approximates the integral of the histo from <min> to <max>
//by adding up the weights of all bins completely included in the range,
//and approximating the contribution of fractionally included bins by
//assuming their weight is distributed flat across them. If no arguments
//are given, the entire histogram range is integrated:
document.write('</br>Integral of firstHist from 0 to 10 = '+firstHist.integrate());
document.write('</br>(Thats 1000 random pulls, plus 3 from when we incremented 0 with a weight of 3.)');
//Or we can integrate a given sub-range:
document.write('</br></br>Integral of firstHist from 2 to 4 = '+firstHist.integrate(2,4));
document.write('</br>So bins 2 and 3, corresponding to the ranges [2,3) + [3,4), got addded up and returned.');
//If the given sub-range has bounds that do not coincide with bin boundaries, then
//the bin's weight is included in the same fraction as the bin's range:
document.write('</br></br>Integral of firstHist from 2 to 3.5 = '+firstHist.integrate(2,3.5));
document.write('</br>So all of [2,3) and half of [3,4) were added and returned.');
//-----normalize Method---------------------------------------------
//normalize(<factor>)
// <factor> (optional)Noramalize this histogram to this total weight. Default=1
//Return type: 0 on successful exit.
document.write('</br></br>/////////////////// .normalize examples //////////////////////////////////</br>');
//normalize multiplies every bin in the histo by a factor such that
//the resulting integral over the histo range will equal the user-defined
//normalization factor (1 by default).
firstHist.normalize(7);
document.write('</br></br>firstHist normalized to 7:</br>');
firstHist.dump();
document.write('firstHist integral is now: '+firstHist.integrate());
//Had the argument 7 not been provided, the histogram would have
//been normalized to 1 (like for prob. density functions).
//-----add Method---------------------------------------------
//normalize(<histo>,<scale1>,<scale2>)
// <histo> the histogram to add to this one.
// <scale1> (optional) scale to multiply this histo by before adding (default 1).
// <scale2> (optional) scale to multiply <histo> by before adding (default 1).
//Return type: Histo on success.
document.write('</br></br>/////////////////// .add examples //////////////////////////////////</br>');
//The add method allows you to add two histograms, possibly after multiplying them
//by some scale factor:
var histA = new Histo(10,0,10);
var histB = new Histo(10,0,10);
for(i=0;i<100;i++){
histA.increment(10*Math.random());
histB.increment(10*Math.random());
}
document.write('histA:</br>');
histA.dump();
document.write('histB:</br>');
histB.dump();
var sumHist = histA.add(histB);
document.write('</br>Sum of histA+histB:</br>');
sumHist.dump();
//Or, if we define some scale factors:
document.write('</br>Sum of 2*histA + 3*histB:</br>')
sumHist = histA.add(histB,2,3);
sumHist.dump();
//-----getMean Method---------------------------------------------
//getMean() - no arguments
//Return type: float on success.
document.write('</br></br>/////////////////// .getMean examples //////////////////////////////////</br>');
//getMean returns the weighted average of the histogram bins, *where the
//weight is attributed to the low edge of the bin!*
var meanHist = new Histo(5,0,5);
for(i=0;i<10;i++){
meanHist.increment(5*Math.random());
}
document.write('meanHist:</br>');
meanHist.dump();
document.write('mean of meanHist = '+meanHist.getMean());
//-----getVariance Method---------------------------------------------
//getVariance() - no arguments
//Return type: float on success.
document.write('</br></br>/////////////////// .getVariance examples //////////////////////////////////</br>');
//getVariance returns the variance of the histogram, *where the
//weight of each bin is attributed to the low edge of the bin!*
document.write('</br>variance of meanHist = '+meanHist.getVariance());
//-----getCDF Method---------------------------------------------
//getCDF() - no arguments
//Return type: Histo on success.
document.write('</br></br>/////////////////// .getCDF examples //////////////////////////////////</br>');
//getCDF returns the cumulative distribution function for this histogram:
var CDF = meanHist.getCDF();
document.write('CDF of meanHist:</br>');
CDF.dump();
document.write('Notice the nth bin of the CDF includes all the weight of the nth bin of the original histogram.')
//-----ksTest Method---------------------------------------------
//ksTest(<target>)
// <target> Histo to compare this Histo with in a Kolmogorov-Smirnov test.
//Return type: float on success.
document.write('</br></br>/////////////////// .ksTest examples //////////////////////////////////</br>');
//ksTest performs a Kolmogorov-Smirnov test on this histo and the histo
//passed to it as an argument, and returns the probability that these
//histos came from the same parent distribution:
var flatHisto1 = new Histo(10,0,10);
var flatHisto2 = new Histo(10,0,10);
for(i=0;i<10000;i++){
flatHisto1.increment(10*Math.random());
flatHisto2.increment(10*Math.random());
}
document.write('flatHisto1:</br>');
flatHisto1.dump();
document.write('flatHisto2:</br>');
flatHisto2.dump();
document.write('</br>flatHisto1 and flatHisto2 come from the same parent with probability = '+flatHisto1.ksTest(flatHisto2)+', a high probability.</br>');
//Now if we compare a histogram that definitely doesn't come from a flat distribution:
var spike = new Histo(10,0,10);
spike.increment(0,10000);
document.write('spike:</br>');
spike.dump();
document.write('Probability that flatHisto1 and spike come from the same parent: '+flatHisto1.ksTest(spike)+', a very low probability.</br>');
//Recall an important feature of KS matching: it makes weaker statements if there aren't many hits in one of the histograms!
spike = new Histo(10,0,10);
spike.increment(0,1);
document.write('spike:</br>');
spike.dump();
document.write('Probability that flatHisto1 and spike come from the same parent when spike has only one count: '+flatHisto1.ksTest(spike)+', higher than when we knew more about spike!');
//-----sample Method---------------------------------------------
//sample(<nSamples>,<source>)
// <nSamples> Number of samples to take.
// <source> a Func object to draw
//Return type: 0 on success.
document.write('</br></br>/////////////////// .sample examples //////////////////////////////////</br>');
//The sample method populates this histogram with random pulls
//from a Func object, within the histogram range:
var pbla = function (x, par) {
return x*x
}
var parabola = new Func(pbla);
var parabolaSample = new Histo(20,-10,10);
parabolaSample.sample(10000,parabola);
</script>
<canvas id="canvas4" width="600" height="450"></canvas>
<script type="text/JavaScript">
parabolaSample.draw('canvas4', 0,0,'random sample from x^2','x','pulls / bin');
</script>
</body> </html>