SOCR Resampling HTML5 Project

From Socr

(Difference between revisions)
Jump to: navigation, search
(Use-Cases/Utilization Protocol)
(See also)
 
(16 intermediate revisions 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 14: Line 14:
[[Image:SOCR_Resampling_HTML5_Project_Fig1.png|350px|thumbnail|right| SOCR Resampling Web-app ]]
[[Image:SOCR_Resampling_HTML5_Project_Fig1.png|350px|thumbnail|right| SOCR Resampling Web-app ]]
# Identify Data
# Identify Data
-
## User specified Data: Provide a generic SOCR data-spreadsheet where users can past in multicolumn data.
+
## User specified Data: Provide a generic SOCR data-spreadsheet where users can past in multicolumn data (e.g., [[SOCR_Data|SOCR Data]]).
-
## Data from SOCR Experiments
+
## Data from SOCR Experiments (see [http://socr.ucla.edu/htmls/SOCR_Experiments.html Applets] and [[SOCR_EduMaterials_ExperimentsActivities|Activities]])
-
## TBD
+
# Map Data to discrete Graphical Objects in a Data-Canvas
# Map Data to discrete Graphical Objects in a Data-Canvas
## Select a column from the Data-Spreadsheet
## Select a column from the Data-Spreadsheet
## Choose object type (e.g., Coin, Die, Card, etc.)
## Choose object type (e.g., Coin, Die, Card, etc.)
-
## TBD
 
# User Resampling Functionality (User control specs)
# User Resampling Functionality (User control specs)
## Sampling with or without replacement
## Sampling with or without replacement
Line 29: Line 27:
## User selects hypothesis
## User selects hypothesis
### E.g., mean = 25 (also specified by user), variance <12.7, 23th quantile ≥ 17.7, etc.
### E.g., mean = 25 (also specified by user), variance <12.7, 23th quantile ≥ 17.7, etc.
-
### Similar interface to the SOCR General CI Applet (select parameter type, e.g., <math>\mu</math>, and parameter null value, e.g., <math>\mu_o</math>).
+
### Similar interface to the SOCR General CI [http://socr.ucla.edu/htmls/exp/Confidence_Interval_Experiment_General.html Applet] and [[SOCR_EduMaterials_Activities_General_CI_Experiment|Activity]] (select parameter type, e.g., <math>\mu</math>, and parameter null value, e.g., <math>\mu_o</math>).
-
## TBD
+
# Running the experiment
# Running the experiment
## Discrete mode or Animated mode
## Discrete mode or Animated mode
Line 39: 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.
-
* [http://java.sun.com/products/java-media/2D/samples/suite/ Java Animation 1]
 
-
** [http://java.sun.com/products/java-media/2D/samples/suite/Transforms/TransformAnim.html TransformAnim]
 
 +
* 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://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].
===Exemplary tools that can be employed===
===Exemplary tools that can be employed===
 +
* [http://code.google.com/p/socr/source/browse/#svn/trunk/SOCR_3.0/SOCR_JS_Redesign/HTML5_Resampling_Simulation SOCR 3.0 GoogleCode, JavaScript Redesign (SVN Source Code Repository)]
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples JSXGraph HTML5/JS Mathematical Functions Charts and graphs]
* [http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples JSXGraph HTML5/JS Mathematical Functions Charts and graphs]
* [http://mbostock.github.com/d3/ex/ D3]
* [http://mbostock.github.com/d3/ex/ D3]
Line 54: 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>

Current revision as of 17:30, 10 October 2012

Contents

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., μ, and parameter null value, e.g., μ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)

Deutsch

Español

Français

Italiano

Português

日本語

България

الامارات العربية المتحدة

Suomi

इस भाषा में

Norge

한국어

中文

繁体中文

Русский

Nederlands

Ελληνικά

Hrvatska

Česká republika

Danmark

Polska

România

Sverige

Personal tools