Difference between revisions of "SOCR Resampling HTML5 Project"

From SOCR
Jump to: navigation, search
m (→‎Exemplary tools that can be employed)
(→‎See also)
 
(8 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
===Project goals===
 
===Project goals===
−
The goal of this project is to design a new, modern and portable SOCR web-app that demonstrates the concepts of statistical resampling, randomization and probabilistic simulation, which is purely based on [http://en.wikipedia.org/wiki/HTML5 HTML5], [http://www.w3schools.com/css3 CSS3] and [http://www.w3schools.com/js/ JavaScript] framework.
+
The goal of this project is to design a new, modern and portable SOCR web-app that demonstrates the concepts of statistical resampling, randomization and probabilistic simulation, which is purely based on [http://en.wikipedia.org/wiki/HTML5 HTML5], [http://www.w3schools.com/css3 CSS3] and [http://www.w3schools.com/js/ JavaScript] framework. The implementation of this project demands platform portability, computational efficiency, usability (complete functionality via user-friendly modern interface), extensibility and ease of documentation, support and servicing to the entire community.
  
 
===Project specification===
 
===Project specification===
Line 8: Line 8:
 
   
 
   
 
The two basic directions for Sampling/Resampling-based Inference are:
 
The two basic directions for Sampling/Resampling-based Inference are:
−
# '''Simulation-Driven''': We have several experiments ([http://socr.ucla.edu/htmls/exp/ dies, coins, cards], etc.) generate 1, or many, sample(s). First, we need to replicate 3+ of these simulations in HTML5. Then we can show the sample (user controls the sample size, N), animate resampling from the sample K times (K defaults to 10,000, but generally in the range [10:100,000]), present the bootstrap distribution and show the resampling based inference (e.g., the outcomes may be H/T, Die<3, or 5-card-hand has a pair).  
+
# '''Simulation-Driven''': We have several experiments ([http://socr.ucla.edu/htmls/exp/ dice, coins, cards], etc.) generate 1, or many, sample(s). First, we need to replicate 3+ of these simulations in HTML5. Then we can show the sample (user controls the sample size, N), animate resampling from the sample K times (K defaults to 10,000, but generally in the range [10:100,000]), present the bootstrap distribution and show the resampling based inference (e.g., the outcomes may be H/T, Die<3, or 5-card-hand has a pair).  
 
# '''Data-Driven''':  User provides their own dataset and postulates a hypothesis. We show the data graphically and animate K (K defaults to 10,000, but generally in the range [10:100,000]) resamples with repetition, then make the bootstrap-based inference, as in the simulation-driven case (1).
 
# '''Data-Driven''':  User provides their own dataset and postulates a hypothesis. We show the data graphically and animate K (K defaults to 10,000, but generally in the range [10:100,000]) resamples with repetition, then make the bootstrap-based inference, as in the simulation-driven case (1).
 
   
 
   
Line 36: Line 36:
 
### All samples KxM (columns = contain the random samples within one resampling step, column-size=M; rows = contain the simulations for all resamples, row-size is K)
 
### All samples KxM (columns = contain the random samples within one resampling step, column-size=M; rows = contain the simulations for all resamples, row-size is K)
 
### Boot-strap-based inference (responding to the user hypothesis) just like we do in the [http://socr.ucla.edu/htmls/exp/Confidence_Interval_Experiment_General.html SOCR General CI applet (bootstrap estimation)].
 
### Boot-strap-based inference (responding to the user hypothesis) just like we do in the [http://socr.ucla.edu/htmls/exp/Confidence_Interval_Experiment_General.html SOCR General CI applet (bootstrap estimation)].
 +
 +
===Social networking/sharing===
 +
The SOCR HTML5 Randomization and Resampling webapp should allow users that have online data to share the state of their entire web-app (in playable format) with any other user using unique URL's. For example:
 +
 +
: http://SOCR.ucla.edu/htmls/HTML5/ResamplingSimulation/WebApp.php?http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_010309_HousingPriceIndex&cell_start=(0,0)&cell_end=(20,15)&K=10000&M=100&play=true
 +
This unique URL web-app play format uses the following components:
 +
* Main Applet URL: ''http://SOCR.ucla.edu/htmls/HTML5/ResamplingSimulation/''
 +
* PHP script that harvests the tabular data from URL: [[File:Jnlp_writer_php.zip|WebApp.php]] (WebApp.php)
 +
* Reference to an online Dataset (tabular format required): ''?http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_010309_HousingPriceIndex''
 +
* Variable Mapping Syntax: ''&cell_start=(0,0)&cell_end=(20,15)&K=10000&M=100''
 +
* Load-only or Play/Run action: ''&play=true''
 +
 +
See this example using [http://pipeline.loni.ucla.edu/explore/library-navigator/ similar invocation protocol] for the Pipeline environment (http://ucla.in/xIL1E8).
  
 
===See also===
 
===See also===
 
The links below provide some interesting examples of Java code for dynamic animations. These may be useful for the new SOCR Resampling/Simulation Experiment when we get to illustrating the random sampling/resampling/drawing of data (or SOCR Experiments objects) and depicting this via animation. Some of these have very clever image warping/Bezier/path function representations which may be applicable for our coins, cards, dice.
 
The links below provide some interesting examples of Java code for dynamic animations. These may be useful for the new SOCR Resampling/Simulation Experiment when we get to illustrating the random sampling/resampling/drawing of data (or SOCR Experiments objects) and depicting this via animation. Some of these have very clever image warping/Bezier/path function representations which may be applicable for our coins, cards, dice.
 +
 +
* SOCR Resampling and Simulation [[SOCR_ResamplingSimulation_Activity|activity]] and [http://socr.ucla.edu/htmls/HTML5/SOCR_Resampling_Webapp/ Webapp].
 
* [http://java.sun.com/products/java-media/2D/samples/suite/ Java Animation 1], e.g., [http://java.sun.com/products/java-media/2D/samples/suite/Transforms/TransformAnim.html TransformAnim].
 
* [http://java.sun.com/products/java-media/2D/samples/suite/ Java Animation 1], e.g., [http://java.sun.com/products/java-media/2D/samples/suite/Transforms/TransformAnim.html TransformAnim].
 
* [http://www.causeweb.org/webinar/teaching/2011-12/ See the Randomization web-cast] and [http://lock5stat.com/statkey/randomization_2_cat/randomization_2_cat.html this example randomization web-site].
 
* [http://www.causeweb.org/webinar/teaching/2011-12/ See the Randomization web-cast] and [http://lock5stat.com/statkey/randomization_2_cat/randomization_2_cat.html this example randomization web-site].
Line 51: Line 66:
 
* [http://rendera.heroku.com/ Rendera: Interactive HTML5/CSS3/JS web-page Editor]
 
* [http://rendera.heroku.com/ Rendera: Interactive HTML5/CSS3/JS web-page Editor]
  
 +
===Extensions===
 +
Some of the following features may be extremely interesting to include in the Randomization webapp:
 +
* [http://www.w3schools.com/html5/html5_video_dom.asp Video capability] for training and demonstration purposes.
 +
* Social-networking mechanism for sharing of the webapp and its state (perhaps multiple users interacting jointly, as a team, with the same instance of the web-app?
 +
* Dynamic HTML5-based spreadsheet for data manipulation (e.g., [http://www.dhtmlx.com/docs/products/dhtmlxSpreadsheet/sample.shtml DHTMLX]).
 +
* [http://html5demos.com/dnd-upload Data drag-and-drop] functionality in the webapp.
 +
 +
===References===
 +
* [http://www.google-melange.com/gsoc/org/google/gsoc2012/socr SOCR GSoC 2012 Randomization Project]
 +
* [http://www.stat.ucla.edu/~dinov/courses_students.dir/04/Spring/Stat233.dir/STAT233_notes.dir/Bootstrapping.pdf Ivo Dinov's Bootstrapping Notes]
 +
* [http://en.wikipedia.org/wiki/Resampling_(statistics) Wikipedia resampling section]
 +
* [http://www.tandfonline.com/doi/full/10.1080/10511970701745015 Introducing Statistical Inference to Biology Students Through Bootstrapping and Randomization]
 +
* [http://escholarship.org/uc/item/6hb3k0nz George Cobb's 2009 TISE paper]
  
 
<hr>
 
<hr>

Latest revision as of 12:36, 10 October 2012

SOCR Project - SOCR HTML5 Resampling, Randomization and Simulation Project

Project goals

The goal of this project is to design a new, modern and portable SOCR web-app that demonstrates the concepts of statistical resampling, randomization and probabilistic simulation, which is purely based on HTML5, CSS3 and JavaScript framework. The implementation of this project demands platform portability, computational efficiency, usability (complete functionality via user-friendly modern interface), extensibility and ease of documentation, support and servicing to the entire community.

Project specification

The general stats-education community needs new web-applications (web-apps) that run in the browser on portable devices and demonstrate graphically and interactively simulation, sampling-resampling and bootstrapping-based statistical inference. This project specification describes some specific examples, applications and use-cases that would aid with the design of a new SOCR web-app that we can test in the classroom. The core functionality, usability and appearance of this new web-app is described below.

The two basic directions for Sampling/Resampling-based Inference are:

  1. Simulation-Driven: We have several experiments (dice, coins, cards, etc.) generate 1, or many, sample(s). First, we need to replicate 3+ of these simulations in HTML5. Then we can show the sample (user controls the sample size, N), animate resampling from the sample K times (K defaults to 10,000, but generally in the range [10:100,000]), present the bootstrap distribution and show the resampling based inference (e.g., the outcomes may be H/T, Die<3, or 5-card-hand has a pair).
  2. Data-Driven: User provides their own dataset and postulates a hypothesis. We show the data graphically and animate K (K defaults to 10,000, but generally in the range [10:100,000]) resamples with repetition, then make the bootstrap-based inference, as in the simulation-driven case (1).

Use-Cases/Utilization Protocol

SOCR Resampling Web-app
  1. Identify Data
    1. User specified Data: Provide a generic SOCR data-spreadsheet where users can past in multicolumn data (e.g., SOCR Data).
    2. Data from SOCR Experiments (see Applets and Activities)
  2. Map Data to discrete Graphical Objects in a Data-Canvas
    1. Select a column from the Data-Spreadsheet
    2. Choose object type (e.g., Coin, Die, Card, etc.)
  3. User Resampling Functionality (User control specs)
    1. Sampling with or without replacement
    2. Specify N=original data sample size, K=number of resamples, M=size of each of the samples to be drawn.
    3. Animate each sample (one drawing observation (M of them) at a time) for each sample (K of them)
    4. Animate each resample (K resamples in total).
    5. Typical sizes: N~100, K~10,000, M~100
    6. User selects hypothesis
      1. E.g., mean = 25 (also specified by user), variance <12.7, 23th quantile ≥ 17.7, etc.
      2. Similar interface to the SOCR General CI Applet and Activity (select parameter type, e.g., \(\mu\), and parameter null value, e.g., \(\mu_o\)).
  4. Running the experiment
    1. Discrete mode or Animated mode
    2. Step = obtain one sample (of size M)
    3. Run = obtain all K samples (each of size M)
    4. Visualize the results (either statically, discrete mode, or dynamically, animation mode)
    5. Show summary statistics tables
      1. All samples KxM (columns = contain the random samples within one resampling step, column-size=M; rows = contain the simulations for all resamples, row-size is K)
      2. Boot-strap-based inference (responding to the user hypothesis) just like we do in the SOCR General CI applet (bootstrap estimation).

Social networking/sharing

The SOCR HTML5 Randomization and Resampling webapp should allow users that have online data to share the state of their entire web-app (in playable format) with any other user using unique URL's. For example:

http://SOCR.ucla.edu/htmls/HTML5/ResamplingSimulation/WebApp.php?http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_010309_HousingPriceIndex&cell_start=(0,0)&cell_end=(20,15)&K=10000&M=100&play=true

This unique URL web-app play format uses the following components:

See this example using similar invocation protocol for the Pipeline environment (http://ucla.in/xIL1E8).

See also

The links below provide some interesting examples of Java code for dynamic animations. These may be useful for the new SOCR Resampling/Simulation Experiment when we get to illustrating the random sampling/resampling/drawing of data (or SOCR Experiments objects) and depicting this via animation. Some of these have very clever image warping/Bezier/path function representations which may be applicable for our coins, cards, dice.

Exemplary tools that can be employed

Extensions

Some of the following features may be extremely interesting to include in the Randomization webapp:

  • Video capability for training and demonstration purposes.
  • Social-networking mechanism for sharing of the webapp and its state (perhaps multiple users interacting jointly, as a team, with the same instance of the web-app?
  • Dynamic HTML5-based spreadsheet for data manipulation (e.g., DHTMLX).
  • Data drag-and-drop functionality in the webapp.

References

Translate this page:

(default)
Uk flag.gif

Deutsch
De flag.gif

Español
Es flag.gif

Français
Fr flag.gif

Italiano
It flag.gif

Português
Pt flag.gif

日本語
Jp flag.gif

България
Bg flag.gif

الامارات العربية المتحدة
Ae flag.gif

Suomi
Fi flag.gif

इस भाषा में
In flag.gif

Norge
No flag.png

한국어
Kr flag.gif

中文
Cn flag.gif

繁体中文
Cn flag.gif

Русский
Ru flag.gif

Nederlands
Nl flag.gif

Ελληνικά
Gr flag.gif

Hrvatska
Hr flag.gif

Česká republika
Cz flag.gif

Danmark
Dk flag.gif

Polska
Pl flag.png

România
Ro flag.png

Sverige
Se flag.gif

Retrieved from "https://wiki.socr.umich.edu/index.php?title=SOCR_Resampling_HTML5_Project&oldid=11816"