SOCR HTML5 Expansion MotionCharts

From Socr

(Difference between revisions)
Jump to: navigation, search
(Project specification)
Line 23: Line 23:
* [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]
 +
 +
===Social networking/sharing===
 +
The HTML5 MotionChart should allow users that have online data to share their entire web-app state (in playable format) with any other user using unique URL's. For example:
 +
 +
: http://SOCR.ucla.edu/htmls/HTML5/MotionChart/MotionChart.php?http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_010309_HousingPriceIndex&key=year&x=HPI&y=UR&size=pop&color=region&category=State&play=true
 +
This unique URL motion-chart play format uses the following components:
 +
* Main Applet URL: ''http://SOCR.ucla.edu/htmls/HTML5/MotionChart/''
 +
* PHP script that harvests the tabular data from URL: ''MotionChart.php''
 +
* Variable Mapping Syntax: ''&key=year&x=HPI&y=UR&size=pop&color=region&category=State''
 +
* Load-only or Play 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===

Revision as of 23:27, 9 August 2012

Contents

SOCR Project - SOCR HTML5 Expansion of the MotionCharts Project

Background

SOCR MotionChart Web-app

The amount, complexity and provenance of data have dramatically increased in the past five years. Visualization of observed and simulated data is a critical component of any social, environmental, biomedical or scientific quest. The SOCR MotionCharts provide an interactive infrastructure for discovery-based exploratory analysis of multivariate data. This dynamic data visualization tool enables the displaying of high-dimensional longitudinal data. SOCR Motion Charts allows mapping of ordinal, nominal and quantitative variables onto time, 2D axes, size, colors, glyphs and appearance characteristics, which facilitates the interactive display of multidimensional data.

Project goals

The goal of this project is to redesign the Java-based SOCR_MotionCharts applet using only HTML5, CSS3 and JavaScript, and in the process introduce some useful and powerful expansions of this web-app.

Project specification

The HTML5/JavaScript implementation of the new SOCR MotionCharts Web-App es expected to lower the device and software barriers for users. There are three specific extensions to the Motion Charts application that are necessary in this redesign process

SOCR MotionChart Color Spectrum Web-app Improvement
  1. The first extension/improvement provides better color handling for data that are not uniformly distributed. The proposed solution requires the use of a percentile or quantile subdivision of data intensities. Given a data set , the current color indexing calculations would assign too many colors to empty spaces, and too few to the actual clusters of data. While we could simply create a color map of all possible color values, the problem would still exist with data that have large ranges and it would be incredibly memory inefficient. A quantile-based color index would assign more colors to areas of greater data density and fewer colors to areas of lesser data density, reducing the size of the color map and providing distinct colors to more points. Suppose we have N distinct observations and we choose to have C distinct colors, the quintile index could be calculated by T = N/C. Each quantile would contain T observations and would be assigned an appropriate color value based on their intensities. The image below shows the idea behind this SOCR Motion Charts improvement allowing input of significantly skewed data (top, A). Instead of using the default uniform color distribution over the support of the data distribution (middle, B), the new approach will employ a quantile-based color indexing to assign colors according to the true data density (bottom, C).
    SOCR MotionChart Shape Appearance Web-app Improvement
  2. The second proposed extension involves supporting a greater number of dimensions. Currently, the x-coordinate, y-coordinates, size, and color of the blob are the supported dimensions (excluding the temporal/indexed component). The proposed extension involves including the eccentricity, fill pattern, and stroke shape as extra dimensions. The eccentricity of the blob would indicate the directionality of the data and would be specified by a 2x2 variance-covariance matrix. The fill pattern of the blob could indicate data frequency—the higher the frequency of the data, the higher the frequency of the fill pattern. Finally, the stroke shape of the blob refers to the oscillatory complexity of the blob boundary. This dimension could be mapped to any ordered value. The higher the value in relation to other values in the column, the greater the boundary complexity would be, see Figure 8B. The boundary complexities could be determined through sine-wave based methods or fractal based methods. The figure below shows the SOCR Motion Charts improvement providing blob-appearance cues. For example, the blob fill pattern may indicate data frequency (left, A), and the shape of the blob boundary may represent another variable (right, B).
  3. Smooth Motion Animation: Provide a preference-based mechanism for controlling the smoothness of the motion-chart animation with time. See the options of PowerPoint's animation interface (e.g., delays, smooth starting and ending points, etc.)

Exemplary tools that can be employed

Social networking/sharing

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

http://SOCR.ucla.edu/htmls/HTML5/MotionChart/MotionChart.php?http://wiki.stat.ucla.edu/socr/index.php/SOCR_Data_Dinov_010309_HousingPriceIndex&key=year&x=HPI&y=UR&size=pop&color=region&category=State&play=true

This unique URL motion-chart play format uses the following components:

  • Main Applet URL: http://SOCR.ucla.edu/htmls/HTML5/MotionChart/
  • PHP script that harvests the tabular data from URL: MotionChart.php
  • Variable Mapping Syntax: &key=year&x=HPI&y=UR&size=pop&color=region&category=State
  • Load-only or Play action: &play=true

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

See also

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