# SOCR Distributome Game2

(Difference between revisions)
 Revision as of 19:34, 6 April 2013 (view source)IvoDinov (Talk | contribs) (Created page with '== SOCR Project - Distributome Game 2 Project== [[Image:Distributome_Editor_Redesign_Fall2011_Fig3.png|200px|thumbnail|right| Distributom…')← Older edit Current revision as of 20:27, 6 April 2013 (view source)IvoDinov (Talk | contribs) (→UI Outputs) (3 intermediate revisions not shown) Line 3: Line 3: ===Background=== ===Background=== - Probability mass/density functions describe the likelihood of random variables to take certain values. The Probability Distributome provides resources for exploring the intrinsic distribution characteristics and the intricate relations between different probability distributions, which are in many areas of scientific exloration. + Probability mass/density functions describe the likelihood of random variables to take certain values. The [http://distributome.org/ Probability Distributome] provides resources for exploring the intrinsic distribution characteristics and the intricate relations between different probability distributions, which are in many areas of scientific exploration. One of the aspects of the Distributome is to design and implement interactive webapps for motivation and enhancing the learning experiences of probability theory, modeling and applications. The [http://www.distributome.org/V3/DistributomeGame.html first Distributome game] provides an interactive web-game for matching real-live problems with specific probability distribution models. In this project, '''Distributome Game 2''', we need to design a new webapp game that allows users to match randomly generated pairs of graphs, the first one representing the density/mass functions of different probability distribution models, and the second frequency histograms of randomly-generated samples from various distributions. ===Project Goals=== ===Project Goals=== - The [http://www.distributome.org/ Probability Distributome Project] aims to provide an intuitive, efficient, portable and extensible infrastructure for exploring, navigating, discovering and expanding the knowledge (meta-data) about the internal distribution properties and characteristics, and inter-distributional relations. + Review the [http://www.distributome.org/ Probability Distributome Project], which provides an intuitive, efficient, portable and extensible infrastructure for exploring, navigating, discovering and expanding the knowledge (meta-data) about the internal distribution properties and characteristics, and inter-distributional relations. Play the [http://www.distributome.org/V3/DistributomeGame.html first Distributome game] and think of a webapp design that provides a platform agnostic and efficient interface for the new Distributome game. We need an intuitive, extensible and efficient implementation. + + The idea would be to show two streams of histograms and distribution plots that the user must match pairwise (or a set of distribution graphs as bins and a stream of frequency histogram plots that the user needs to place in the right distribution bin). For example, we randomly sample/generate 100 observations each from two different distributions and user has to match the sample histograms with the distributions they came from.  There may be a point/award system where players get 10 points for guessing correctly the first time, but users can also ''pass'', i.e. don't make a guess and instead draw another pair of samples and then get 9 points if you guess right (now having seen two samples from each). Then user may again ask for another sample and only get 8 points for being correct etc. Players accumulate points each time they get a correct match and they get points taken off for wrong guesses.  Play streaks can be as long as players want to play, but there is a timer keeping track of all plays. + + The distributions are drawn randomly each time, so it also helps a little to be lucky and get easier distributions to tell apart and perhaps we might also vary parameters a bit. Simplifications may be necessary. For example, we can use the the hierarchical classification of distributions into (top, middle and all) different levels/ontologies, as in the [http://distributome.org/V3/ Distributome Navigator]. - This specific project aims to design, implement, test and validate 2 new features of the [http://distributome.org/js/DistributomeNavigator.html Probability Distributome] - Enable the Distributome Editor functionality, and Redesign Distributome XML database to enable Bib TeX reference citations. ===Project Specifics=== ===Project Specifics=== ====Project Source==== ====Project Source==== - * [http://www.distributome.org/js/DistributomeEditor.html Editor Prototype] * [http://distributome.org/js/DistributomeNavigator.html Navigator] * [http://distributome.org/js/DistributomeNavigator.html Navigator] * JavaScripts: [http://distributome.org/js/scripts/protovis-r3.2.js protovis-r3.2.js], [http://distributome.org/js/scripts/common.js common.js], [http://distributome.org/js/scripts/distributome.js distributome.js], [http://distributome.org/js/scripts/jquery.js jquery.js], [http://distributome.org/js/scripts/splitter.js splitter.js], [http://distributome.org/js/scripts/xml2json.js xml2json.js], [http://distributome.org/js/scripts/editor.js editor.js] * JavaScripts: [http://distributome.org/js/scripts/protovis-r3.2.js protovis-r3.2.js], [http://distributome.org/js/scripts/common.js common.js], [http://distributome.org/js/scripts/distributome.js distributome.js], [http://distributome.org/js/scripts/jquery.js jquery.js], [http://distributome.org/js/scripts/splitter.js splitter.js], [http://distributome.org/js/scripts/xml2json.js xml2json.js], [http://distributome.org/js/scripts/editor.js editor.js] - * XML Database: [http://www.distributome.org/js/Distributome.xml Distributome.xml], [http://www.distributome.org/js/Distributome.xsd Distributome.xsd], and [http://www.distributome.org/js/Distributome.xml.html Distributome.xml.html]. + * XML Database: [http://www.distributome.org/V3/data/Distributome.xml Distributome.xml], [http://www.distributome.org/V3/data/Distributome.xsd Distributome.xsd], and [http://www.distributome.org/V3/data/Distributome.xml.html HTML parser of the XML meta-data]. * The [http://distributome.googlecode.com/ complete Distributome Project source-code is hosted at GoogleCode]. * The [http://distributome.googlecode.com/ complete Distributome Project source-code is hosted at GoogleCode]. + * The [http://www.distributome.org/V3/calc/index.html Distributome Calculators] provide the resources needed to generate the dynamic distribution density/mass function graph (including the distribution parameter setters/controls)/ + * The [http://www.distributome.org/V3/sim/index.html Distributome Simulators] provide the necessary resources to generate the frequency histograms (given a distribution name and sample-size). + + ====Webapp Inputs==== + * User specifies the following parameters: + ** Number of Distributions to be shown (number of bins or pairs to match): K + ** Sample-size for each frequency histogram: N + ** General or simplified version of the game (default to be simplified) + + ====Webapp controls==== + * Timer (improve the appearance of the [http://www.distributome.org/V3/DistributomeGame.html first Distributome Game]) + * Simplification + * Slider controls for input parameters + + ====UI Outputs==== + * A clever, dynamic and user-friendly interface for displaying, navigating and controlling the game (touch-interface/mobile compatible). The UI needs to provide a truly dynamic (transition, animation) for changing the collection of distributions and the stream of new sample frequency histograms. The image below just shows an example of 4 randomly selected distributions and corresponding random samples of size 100 from each of these distributions. - ====Tasks==== +
[[Image:SOCR_Distributome_Game2_Fig2.png|500px]]
- * (Easy) Enable the Editor functionality ([http://distributome.org/js/DistributomeEditor.html DistributomeEditor.html], XML_Editor button) in the main Navigator window ([http://distributome.org/js/DistributomeNavigator.html DistributomeNavigator.html]). + - * (Creative) Enable the drag-and-drop functionality for selecting in the graph a node/distribution or an edge/relation and dropping them to populate the XML editor fields. + - * (Easy) Test that newly-generated XML can be saved and consumed by the [http://distributome.org/js/DistributomeNavigator.html Navigator] and displayed appropriately in the graph. + - * (Creative) [http://distributome.org/blog/?p=33 Review this slight redesign spec of the XML DB] ([http://www.distributome.org/js/Distributome.xml Distributome.xml]) and the suggested solution and see if you can implement a pilot that utilizes the new pair of XML(nodes/edges)+BiBTeX(references), replacing the current XML DB ([http://www.distributome.org/js/Distributome.xml Distributome.xml]). Note that the project spec page already includes a specific solution; we just need to think about the packaging of the solution with the new XML/BiBTeX format. + - * (Creative) Consider the redesign of the [http://distributome.org/js/DistributomeEditor.html Editor] according to these schematic diagrams [http://www.distributome.org/images/Distributome_Editor_Redesign_Fall2011_Fig1.png Fig1] and [http://www.distributome.org/images/Distributome_Editor_Redesign_Fall2011_Fig2.png Fig2]. Consider designing a lightweight HTML5/JQuery/JavaScript and explore the smooth horizontal and vertical tabs (e.g., [http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml dynamic tabs]). + - * (Creative Open-ended) A complete redesign of the entire [http://distributome.org/ Distributome website] - e.g., using [http://twitter.github.com/bootstrap/ Bootstrap 2+], [http://distributome.org/V2/ V2 dynamic panels], etc. + - * Additional tasks - these are creative bonus tasks that can be completed as time permits + - ** Unify the 4 Distributome Searches ([http://distributome.org/ web-site], [http://distributome.org/blog/?s=poisson&submit=Search blog], [http://wiki.stat.ucla.edu/distributome wiki], [http://distributome.org/js/DistributomeDBSearch.xml.html XML DB]). + - ** Save-View: Ability to save a specific View of the Distributome Navigator for others to see/publish (perhaps via the Preferences functionality, below). + - ** [http://www.distributome.org/js/Distributome.xml.pref Pref XML file]: Allow user specifications of node/edge/selected/properties, color-maps, etc. + ==References== ==References==

## SOCR Project - Distributome Game 2 Project

Distributome Project

### Background

Probability mass/density functions describe the likelihood of random variables to take certain values. The Probability Distributome provides resources for exploring the intrinsic distribution characteristics and the intricate relations between different probability distributions, which are in many areas of scientific exploration. One of the aspects of the Distributome is to design and implement interactive webapps for motivation and enhancing the learning experiences of probability theory, modeling and applications. The first Distributome game provides an interactive web-game for matching real-live problems with specific probability distribution models. In this project, Distributome Game 2, we need to design a new webapp game that allows users to match randomly generated pairs of graphs, the first one representing the density/mass functions of different probability distribution models, and the second frequency histograms of randomly-generated samples from various distributions.

### Project Goals

Review the Probability Distributome Project, which provides an intuitive, efficient, portable and extensible infrastructure for exploring, navigating, discovering and expanding the knowledge (meta-data) about the internal distribution properties and characteristics, and inter-distributional relations. Play the first Distributome game and think of a webapp design that provides a platform agnostic and efficient interface for the new Distributome game. We need an intuitive, extensible and efficient implementation.

The idea would be to show two streams of histograms and distribution plots that the user must match pairwise (or a set of distribution graphs as bins and a stream of frequency histogram plots that the user needs to place in the right distribution bin). For example, we randomly sample/generate 100 observations each from two different distributions and user has to match the sample histograms with the distributions they came from. There may be a point/award system where players get 10 points for guessing correctly the first time, but users can also pass, i.e. don't make a guess and instead draw another pair of samples and then get 9 points if you guess right (now having seen two samples from each). Then user may again ask for another sample and only get 8 points for being correct etc. Players accumulate points each time they get a correct match and they get points taken off for wrong guesses. Play streaks can be as long as players want to play, but there is a timer keeping track of all plays.

The distributions are drawn randomly each time, so it also helps a little to be lucky and get easier distributions to tell apart and perhaps we might also vary parameters a bit. Simplifications may be necessary. For example, we can use the the hierarchical classification of distributions into (top, middle and all) different levels/ontologies, as in the Distributome Navigator.

### Project Specifics

#### Webapp Inputs

• User specifies the following parameters:
• Number of Distributions to be shown (number of bins or pairs to match): K
• Sample-size for each frequency histogram: N
• General or simplified version of the game (default to be simplified)

#### Webapp controls

• Timer (improve the appearance of the first Distributome Game)
• Simplification
• Slider controls for input parameters

#### UI Outputs

• A clever, dynamic and user-friendly interface for displaying, navigating and controlling the game (touch-interface/mobile compatible). The UI needs to provide a truly dynamic (transition, animation) for changing the collection of distributions and the stream of new sample frequency histograms. The image below just shows an example of 4 randomly selected distributions and corresponding random samples of size 100 from each of these distributions.