SOCR HTML5 Expansion MotionCharts - Revision history

IvoDinov: /* Other features */

2013-01-15T16:59:33Z

‎Other features

IvoDinov: /* Other features */

2012-11-09T23:45:55Z

‎Other features

IvoDinov: /* Other features */

2012-11-09T23:45:15Z

‎Other features

IvoDinov: /* See also */

2012-11-09T23:41:33Z

‎See also

IvoDinov: /* Known Issues / TODO */

2012-11-09T23:40:40Z

‎Known Issues / TODO

IvoDinov at 14:54, 21 October 2012

2012-10-21T14:54:38Z

Show changes

IvoDinov: /* Project specification */

2012-10-18T18:51:28Z

‎Project specification

IvoDinov: /* Project specification */

2012-10-18T18:51:11Z

‎Project specification

IvoDinov: /* Project specification */

2012-10-18T18:50:52Z

‎Project specification

IvoDinov: /* Project specification */

2012-10-18T18:41:12Z

‎Project specification

@@ Line 314: / Line 314: @@
 * Adopt an additional mechanism for ''Data import'' that allows direct access to the [http://data.worldbank.org/developers Worldbank data via their JSON/XML API]? This would allow us access to an enormous collection of real (social, econ, Geo-spatial, environmental, etc.) data. The [http://www.google.com/publicdata/directory Google Open-Data Explorer] provides a functioning example of utilization of the [http://data.worldbank.org/developers Worldbank data API].
 * Extend the MotionCharts to allow the ''Shape and Shading (appearance) models'' of the blobs to encode additional variables. See this [http://bl.ocks.org/1021103 D3 example that illustrates an easy way to MAP several additional data variables into the Shape characteristics]. Each type of shape (e.g., clover, bean, triangle, etc.) could represent a different variable. Then the parameters of the shape (e.g., m, n1, n2, n3, a, b) can be chosen according to the values of the variable mapped to shape, reflecting the amount of deviation from the *standard* shape (identity/default values for the shape).
 ===See also===

@@ Line 307: / Line 307: @@
 ===Other features===
-The features below would expand the functionality of the [ SOCR MotionChart webapp] and improve user experiences.
+The features below would expand the functionality of the [http://socr.ucla.edu/htmls/HTML5/MotionChart/ SOCR MotionChart webapp] and improve user experiences.
 * Provide a ''zoom-in/out/reset'' functionality to allow users to focus the motion chart on a smaller rectangular area (mouse-selected by click-and-drag).
 * Provide a slider for ''controlling the overall size of the blobs'' (increase as well as decrease blob relative sizes)

@@ Line 312: / Line 312: @@
 * Provide a slider for ''controlling the opacity'' of the blobs (unless the blobs are tag-selected by the user). From faded blobs to fully opaque blobs).
 * Provide a meaningful mechanism for gracefully ''managing missing data''. Adopting a missing data policy of hiding (slowly interpolating, growing, shrinking, fading, etc.) the blob as we move between known and unknown (missing) data values, independently for each location/real data.
-* Adopt an additional mechanism for Data import that allows direct access to the [http://data.worldbank.org/developers Worldbank data via their JSON/XML API]? This would allow us access to an enormous collection of real (social, econ, Geo-spatial, environmental, etc.) data. The [http://www.google.com/publicdata/directory Google Open-Data Explorer] provides a functioning example of utilization of the [http://data.worldbank.org/developers Worldbank data API].
+* Adopt an additional mechanism for ''Data import'' that allows direct access to the [http://data.worldbank.org/developers Worldbank data via their JSON/XML API]? This would allow us access to an enormous collection of real (social, econ, Geo-spatial, environmental, etc.) data. The [http://www.google.com/publicdata/directory Google Open-Data Explorer] provides a functioning example of utilization of the [http://data.worldbank.org/developers Worldbank data API].
 ===See also===

@@ Line 320: / Line 320: @@
 * [http://code.google.com/apis/chart/interactive/docs/gallery/motionchart.html Google (Flash) MotionCharts]
 * [http://en.wikipedia.org/wiki/Motion_chart More About MotionCharts (Wikipedia)]
 ===References===

@@ Line 305: / Line 305: @@
 * parse dates in addition to string/number
 * Refactor global variables into priv (and remove any needed)
 ===See also===

@@ Line 15: / Line 15: @@
 # 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).
-: See this [http://bl.ocks.org/1021103 Blob-Shape HTML5/JS Example] that illustrates an easy way to MAP ''several additional data variables'' into ''Shape characteristics'': Each type of shape (e.g., clover, bean, triangle, etc.) could represent a different variable. Then the parameters of the specific shape (e.g., m, n1, n2, n3, a, b) can be chosen according to the values of the variable mapped to shape, reflecting the amount of deviation from the '''standard''' shape (identity/default values for the shape).
+:: See this [http://bl.ocks.org/1021103 Blob-Shape HTML5/JS Example] that illustrates an easy way to MAP ''several additional data variables'' into ''Shape characteristics'': Each type of shape (e.g., clover, bean, triangle, etc.) could represent a different variable. Then the parameters of the specific shape (e.g., m, n1, n2, n3, a, b) can be chosen according to the values of the variable mapped to shape, reflecting the amount of deviation from the '''standard''' shape (identity/default values for the shape).
 # 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.)

@@ Line 13: / Line 13: @@
 [[Image:SOCR_HTML5_Expansion_MotionCharts_Fig1.png|350px|thumbnail|right| SOCR MotionChart Color Spectrum Web-app Improvement]]
 # 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).[[Image:SOCR_HTML5_Expansion_MotionCharts_Fig2.png|350px|thumbnail|right| SOCR MotionChart Shape Appearance Web-app Improvement]]
-# 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). See this [http://bl.ocks.org/1021103 Blob-Shape HTML5/JS Example].
+# 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).
 # 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.)