Difference between revisions of "SOCR HTML5 Charts"
(→Project Description) |
(→Approach) |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
* Look at the SOCR Charts [[SOCR_EduMaterials_ChartsActivities|Activities]], [[Help_pages_for_SOCR_Chart|Help]] and [[About_pages_for_SOCR_Chart|About]] pages. | * Look at the SOCR Charts [[SOCR_EduMaterials_ChartsActivities|Activities]], [[Help_pages_for_SOCR_Chart|Help]] and [[About_pages_for_SOCR_Chart|About]] pages. | ||
* Explore these two recent SOCR HTML5 webapps: [http://socr.ucla.edu/htmls/HTML5/MotionChart/ MotionCharts] and [http://socr.ucla.edu/htmls/HTML5/SOCR_Resampling_Webapp/ Randomization, Resampling and Simulation]. | * Explore these two recent SOCR HTML5 webapps: [http://socr.ucla.edu/htmls/HTML5/MotionChart/ MotionCharts] and [http://socr.ucla.edu/htmls/HTML5/SOCR_Resampling_Webapp/ Randomization, Resampling and Simulation]. | ||
| − | * | + | * Redesign the [http://socr.ucla.edu/htmls/HTML5/charts/SOCR_JS_ViolinChart/ SOCR (prototype) Violin Plot] and extend it to allow plotting multiple columns (several violin plots on the same chart) utilizing [http://d3js.org/ D3]. |
| + | * Consider adding a smooth animation between different types of SOCR HTML5 charts (using the same data). See this [http://bl.ocks.org/1256572 chart-animation example]. | ||
===Approach=== | ===Approach=== | ||
| Line 18: | Line 19: | ||
* [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://thejit.org JavaScript InfoVis Toolkit] | * [http://thejit.org JavaScript InfoVis Toolkit] | ||
| − | * [http://magic-table.googlecode.com/svn/trunk/magic-table/google_visualisation/example_1.html Hyperbolic (fish eye) table] | + | * [http://magic-table.googlecode.com/svn/trunk/magic-table/google_visualisation/example_1.html Hyperbolic (fish eye) table] and [http://bost.ocks.org/mike/fisheye/ Fish Eye Zoom (Grid/Cartesian/Graphs)] |
* [http://www.rgraph.net/ RGraph HTML5 Charts and Graphs] | * [http://www.rgraph.net/ RGraph HTML5 Charts and Graphs] | ||
* [http://rendera.heroku.com/ Rendera: Interactive HTML5/CSS3/JS web-page Editor] | * [http://rendera.heroku.com/ Rendera: Interactive HTML5/CSS3/JS web-page Editor] | ||
| + | |||
| + | ===Front-end=== | ||
| + | Use the [http://twitter.github.com/bootstrap/ Tweeter Bootstrap] API and the [http://socr.ucla.edu/htmls/HTML5/HTML5_WebSite.zip SOCR HTML5 interface (ZIP)] to embed the new SOCR HTML5 Charts. Use the '''./html/SOCR_Webapp_Template.html''' as a template to embed the SOCR Charts Webapp. Select an appropriate mechanism for navigating between different types of charts where the data remains visible/sharable between all charts (so user enters data once and then selects the chart, maps the variables and the chart redraws in the canvas). See the SOCR HTML5 MotionChart as an example ([https://code.google.com/p/socr/source/browse/#svn%2Ftrunk%2FSOCR_3.0%2FSOCR_HTML5_MotionCharts%2FMotionChart-v3.85 source code] and [http://socr.ucla.edu/htmls/HTML5/MotionChart/ webapp]). | ||
===See also === | ===See also === | ||
| + | * See the [http://vis.stanford.edu/papers/profiler Profiler Project], [http://vis.stanford.edu/files/2012-Profiler-AVI.pdf its documentation (PDF)], [http://vis.stanford.edu/projects/datavore/ demos] and [https://github.com/StanfordHCI/datavore source code]. | ||
* An example demonstrating a pair of analogous [http://socr.ucla.edu/htmls/exp/Sample_Mean_Experiment.html Java-applet-based] and [http://socr.ucla.edu/test/HTML5/NormalSimulation.html HTML5/JavaScript-based] web-apps for [[SOCR_EduMaterials_Activities_SampleMeanExperiment |Normal Distribution Simulation]] | * An example demonstrating a pair of analogous [http://socr.ucla.edu/htmls/exp/Sample_Mean_Experiment.html Java-applet-based] and [http://socr.ucla.edu/test/HTML5/NormalSimulation.html HTML5/JavaScript-based] web-apps for [[SOCR_EduMaterials_Activities_SampleMeanExperiment |Normal Distribution Simulation]] | ||
| − | |||
| − | |||
*[http://socr.stat.ucla.edu/docs/ SOCR JavaDoc] | *[http://socr.stat.ucla.edu/docs/ SOCR JavaDoc] | ||
*[[Available_SOCR_Development_Projects]] | *[[Available_SOCR_Development_Projects]] | ||
*[[SOCR_ProposalSubmissionGuidelines]] | *[[SOCR_ProposalSubmissionGuidelines]] | ||
| + | |||
| + | <hr> | ||
{{translate|pageName=http://wiki.stat.ucla.edu/socr/index.php?title=SOCR_HTML5_Charts}} | {{translate|pageName=http://wiki.stat.ucla.edu/socr/index.php?title=SOCR_HTML5_Charts}} | ||
Latest revision as of 15:03, 20 November 2012
Contents
SOCR Project - HTML5 Version of SOCR Charts Project
Project goals
The goal of this project is to redesign, transform and upgrade the SOCR Charts Applets from Java to a modern platform- and browser-independent HTML5/JavaScript framework.
Project Description
- Review and play with the current SOCR Charts Java applets. Note that these provide default datasets, as well as allow the user to copy-paste data from any table into the data tab, map the variables (operation specific for each kind of chart that indicates which columns contain specific data that needs to be used in the plot/graph).
- Look at the SOCR Charts Activities, Help and About pages.
- Explore these two recent SOCR HTML5 webapps: MotionCharts and Randomization, Resampling and Simulation.
- Redesign the SOCR (prototype) Violin Plot and extend it to allow plotting multiple columns (several violin plots on the same chart) utilizing D3.
- Consider adding a smooth animation between different types of SOCR HTML5 charts (using the same data). See this chart-animation example.
Approach
Consider using some of the following open-source HTML5/JQuery/JavaScript graphing libraries. These provide all the necessary charts, variable-mappings, animations, transitions, etc. You just need to figure out the Data I/O. Perhaps allow the user to drag-and-drop a URL containing tabular data (e.g., see SOCR_Data for examples). All code must be HTML5 compliant and only include lightweight open-source libraries.
- D3, and its prior incarnation * ProtoVis
- Animated BEsier curves
- Google API (http://code.google.com/webtoolkit/overview.html).
- JSXGraph HTML5/JS Mathematical Functions Charts and graphs
- JavaScript InfoVis Toolkit
- Hyperbolic (fish eye) table and Fish Eye Zoom (Grid/Cartesian/Graphs)
- RGraph HTML5 Charts and Graphs
- Rendera: Interactive HTML5/CSS3/JS web-page Editor
Front-end
Use the Tweeter Bootstrap API and the SOCR HTML5 interface (ZIP) to embed the new SOCR HTML5 Charts. Use the ./html/SOCR_Webapp_Template.html as a template to embed the SOCR Charts Webapp. Select an appropriate mechanism for navigating between different types of charts where the data remains visible/sharable between all charts (so user enters data once and then selects the chart, maps the variables and the chart redraws in the canvas). See the SOCR HTML5 MotionChart as an example (source code and webapp).
See also
- See the Profiler Project, its documentation (PDF), demos and source code.
- An example demonstrating a pair of analogous Java-applet-based and HTML5/JavaScript-based web-apps for Normal Distribution Simulation
- SOCR JavaDoc
- Available_SOCR_Development_Projects
- SOCR_ProposalSubmissionGuidelines
Translate this page:
