SOCR HTML5 Charts

From Socr

(Difference between revisions)
Jump to: navigation, search
(Front-end)
(Project Description)
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].
-
* Add the [http://socr.ucla.edu/htmls/HTML5/charts/SOCR_JS_ViolinChart/ SOCR Violin Plot] and extend it to allow plotting multiple columns (several violin plots on the same chart).
+
* 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].
===Approach===
===Approach===

Revision as of 16:02, 12 October 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

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.

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




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