draw2Sample

the interface for graphical sampling in order to generate values following an empirical distribution, with img/canvas tag on Firefox.
https://github.com/YujiSODE/draw2Sample

Copyright (c) 2016 Yuji SODE <[email protected]>
This software is released under the MIT License.
See LICENSE or http://opensource.org/licenses/mit-license.php

---

Concept

Figure 1. Concept of graphical sampling. f (x) is a graph drawn on graphical data (W x H px).

The sample (Sp) as a result of graphical sampling with graphical data: W x H px (Figure 1) can be expressed as follows:
let graphical heights of f (x1) and f (x2) be a1 px and a2 px respectively,
(1) Sp = x0, ..., x1, ..., x1, x2, ..., x2, ..., xn
and
(2) Sp = x0 * a0, x1 * a1, x2 * a2, ..., xn * an
RGBA color value in a pixel is available in order to recognize the shape of the graph.
The alpha value is used in this program; a pixel where alpha > 0 is regarded as graph.

Script

• draw2Sample.js
• [v1.2+] pValue.js

How to generating values following a given distribution

1. "Sample (Sp)": "Rnd" in the result output of "draw2Sample.js"
2. Generating target values; the target values are obtained with bootstrap Method (Efron,1979) via Sp.
3. (Optional [v1.2+]) Estimating p-value; p-value is estimated with "pValue.js" via Sp.

How to use

• call "draw2Sample()" in a html file with img/canvas tag.
• (Optional [v1.2+]) call "_pValue()" of "pValue.js", in order to estimate p-value; (see Estimating p-value for details of prameters).

1. Selecting some target images
   Target tag; here target images can be selected.

2. Draw graph
   Drawing; a graph can be drawn on the newly created canvas tag freehand or with script (see "Example with the standard normal distribution").
   "canvas id": the id of canvas tag to draw graph.
   "Size": size of the selecting canvas tag, expressed with Width (W) and Height (H).

3. Sampling
   The sampling from the given graph (2.) is run with "Run sampling" button, and the result output is shown in "Result".

   Inputs and buttons

   • "Target width": the target sampling area, expressed with left side x coordinate (x0) and width (w), shown in red.
   • "Sampling interval"; it sets how many times the given graph (2.) is sampled in a given target area, starting with x0.
   • "Range of values": the true x-coordinate values in the target sampling area, expressed with left side (v0) and right side (v).
   • "Clear image" button; it clears the selected image (1.), which is shown under the drawing layer.
   • "Show sampling line" button; it shows "Sampling interval" as vertical lines.
   • "Clear sampling line" button; it clears "Sampling interval" shown by "Show sampling line" button.
   • "Clear drawing" button; it clears drawn graph (2.).
   • "Run sampling" button; it runs sampling and outputs results into "Result".
   • "Close" button; it closes this interface.
   • "Result"; where results are output, and additional comments are also available here.
   • "Clear result" button; it clears output results in "Result".
   • "Email address": email address used outputting "Result" as email format.
   • "Output as email" button; it saves the "Result" as email to given address.

   Output data

   • dataLog: csv formatted values expressed as n@y for a n-th sampling result: y with top left corner as origin.
   • x@f(x): csv formatted values expressed as x@f (x) for a value of f (x) at x with bottom left as origin.
   • Rnd: csv formatted values estimated as results of a sampling.

---

[v1.2+] Estimating p-value

"pValue.js"

• Probability estimator with given numerical data and bootstrap Method (Efron,1979) on Firefox.
  _pValue(data,x,sampleSize,simulation)
/*
*===<parameter>===
* data: numerical data as csv formatted text e.g., '1,2,3,...'
*===<optional parameters>===
* x: numerical value; the upper 25% of a given values as default
* sampleSize: numerical positive integer; 100 as default
* simulation: numerical positive integer; 10 as default
*/
  p-value is estimated as probability on v-axis: P(x) = P(v >= x).
  The estimation is based on resampled data with size (sampleSize) for n-time (simulation) simulations.

Examples

Script 1: _pValue('1,2'); the result: {"p":0.504,"x":1.75,"sampleSize":100,"simulation":10}
Script 2: _pValue('1,2,3'); the result: {"p":0.323,"x":2.5,"sampleSize":100,"simulation":10}
Script 3: _pValue('1,2,3',1.1); the result: {"p":0.676,"x":1.1,"sampleSize":100,"simulation":10}
Script 4: _pValue('1,2,3',2,10,1); the result: {"p":0.6,"x":2,"sampleSize":10,"simulation":1}

---

Example with the standard normal distribution

Script used for drawing graph

• stdNormDist100pt.js

Sampling parameters

/*Fri_Sep_09_2016_17:01:16_GMT+0900_(JST),Sampling interval:20,Size: W x H = 400 x 400 px*/

Figure 2. Sampling example with the standard normal distribution by script. Blue and red lines show a graph
of the standard normal distribution by script and a recognized distribution respectively. Vertical lines show where
sampled from blue graph.

1-sample t-test

The sampled size by "draw2Sample.js": <Sample size:2527>

1. [Resampled size:100;Given mean:0;Simulation:100times;Significance level:0.025]
   Result: Rejection rate:0
2. [Resampled size:10;Given mean:0.0;Simulation:10000times;Significance level:0.025]
   Result: Rejection rate:0.0163
3. [Resampled size:20;Given mean:0;Simulation:10000times;Significance level:0.025]
   Result: Rejection rate:0.0146

p-value estimation

The sampled size by "draw2Sample.js": <Sample size:2527>
p-value was estimated as probability on v-axis: P(x) = P(v >= x).

1. P(the upper 25% of given data): {"p":0.035,"x":1.7000000000000002,"sampleSize":100,"simulation":10}
2. P(0): {"p":0.554,"x":0,"sampleSize":100,"simulation":10}
3. P(-1.96): {"p":0.966,"x":-1.96,"sampleSize":100,"simulation":10}
4. P(1.96): {"p":0.028,"x":1.96,"sampleSize":100,"simulation":10}

---

Reference

• Efron, B. 1979. Bootstrap Methods: Another Look at the Jackknife. Ann. Statist. vol. 7, no. 1, p. 1-26.

[1.2+] Library list

• bootstrapEst-2.1/bootstrapMdl.js (Yuji SODE,2016): the MIT License; https://github.com/YujiSODE/bootstrapEst