SOCR HTML5 Motion Chart

Motion Chart is a jQuery plugin designed to render dynamic bubble charts and allows efficient and interactive exploration and visualization of longitudinal multivariate Data.

Motion Chart is supported by IE9|Chrome|Safari|Firefox

You can see a live example on http://socr.ucla.edu/htmls/HTML5/MotionChart/ or fork an example on JSFiddle--Todo.

Using Motion Chart

Motion Chart has two main views chart and data which can toggled using the radio buttons on the top left.

Chart

The Chart view can be divided into three main components: the SVG Chart; the Control buttons; the main menu.

SVG Chart

The SVG Chart contains axes, data blobs and context-menu.

Blobs

Each blob represents a record in the current keyframe (eg. time frame) which can be changing by changing the key mapping.

To view the data associated with a blob simply hover over it for a popover. To select certain blobs to track simply click on the blobs and the category will appear. Note: if the category field is undefined "Data" will appear instead.

Axes

The X-Axis is horizontally on the bottom and its mapping can be altered by clicking on the associated label.

The Y-Axis is vertically on the left and its mapping can be altered by click on the associated label.

Context Menu

The context menu is an alternative to the main sliding menu. To summon the context menu right click within the SVG Chart.

Each dimention contains a Map option and relative dimentions contain a Scale option which work the same way as in Main Menu.

One additional option in the context menu is to export the SVG as an Image, this can be achieved by choosing 'Save as Image'. This will open a new window/tab which contains an image with the same size as the SVG, which can be saved by right-clicking and Save image as...

Note: if you're browser does not support HTML5 canvas this option will be disabled.

Control Buttons

Control buttons are used to navigate through the data using the specified key (i.e. time)

Play/Pause

The Play/Pause button simply navigates sequentially through the data at the speed provided by the speed control.

After clicking pause the chart animation stops at the next key.

If play: true is passed at initialisation, the chart will animate automatically.

Unless loop: true is passed at initialisation, the chart must be rewinded after it has reached the end.

Speed Control

Speed Control defines the speed at which the chart transtions, i.e. the speed of the animation.

The value represents the time between 1 key transition.

The lower the values, the faster the animation. And vice-versa.

Key Slider (timeline)

The timeline is used to navigate to any arbitrary key with ease.

Skip Control

The skip buttons' single click controls a single step on the timeline (whether forwards or backwards). A double click controls the rewinding or fastforwarding of the timeline and chart.

Main Menu

The main menu is where the mappings and scalings can be changed.

			| Key		    | X-Axis			| Y-Axis			| Size				| Color				| Category

----------------|---------------|-------------------|-------------------|-------------------|-------------------|---------------- mapping | Column Name | Column Name | Column Name | Column Name | Column Name | Column Name scaling | | Scale Type | Scale Type | Scale Type | Scale Type | color map | | | | | color |

Note:

• Column Name is a column header in the data
• Scale Type see Mappings and Scalings
• color see Color and ColorPalette

Data

The data view consists only of an editible excel-like spreadsheet that holds the data being visualised. Within the spreadsheet you may cut/copy/paste/delete as you would with a normal spreadsheet. You may also right click view options to insert/remove rows/columns.

<div style="background-color="red">Please note that the graph is updated automatically as the spreadsheet is edited which may slow for large amounts of data. It is recommended to edit tables (for major edits) outside the application</div>

Calling Motion Chart

First, include all the dependencies:

<!--StyleSheets-->
<link href="css/bootstrap.min.css" rel="stylesheet">  
<link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet"> 
<link href="css/jquery.handsontable.css" rel="stylesheet">
<link href="css/jquery.motionchart.css" rel="stylesheet">
<link href="css/jquery.contextMenu.css" rel="stylesheet">
<!--Scripts-->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/dependencies.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.handsontable.js"></script>
<script src="js/jquery.motionchart.js"></script>

Run motionchart() on an empty div to initialise a motionchart with default settings.

Or pass options when calling the constructor for a customised instance.

 $('.motionchart').motionchart({
							title: "My Demo",
							mappings: {key: 1, x: 2, y: 3, size: 5, color: 4, category: 0},
							colorPalette: {	"Blue-Red": {from: "rgb(0,0,255)", to: "rgb(255,0,0)"}},
							color: "Blue-Red"
						});

Changelog

MotionChart-v3.1 - First official public release.

Methods

Option | Role | Description ---------------------------------------------------------------------------------------|-------------|------------- motionchart(options) | Constructor | Accepts optional configuration object. See Options. motionchart('title',myTitle) | Method | Updates the title. motionchart('data',myData) | Method | Loads new data into data table and updates the chart components accordingly. motionchart('destroy') | Method | Destructs the motion chart instance, recommended to free up memory.

Options

The table below presents configuration options that are interpreted by motionchart() constructor:

Option | Type | Default | Description -------------------------|--------------------------------|----------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------- title | String | SOCR HTML5 Motion Chart | Defines the initial title data | Object | see Data | Initial data loaded in the chart and data table minWidth | Number | 700 | Minimum width in pixels the users can shrink the instance to. Note: A value too small could cause the instance to lose it's structure. minHeight | Number | 300 | Minimum height in pixels the users can shrink the instance to. Note: A value too small could cause the instance to lose it's structure. speed | Number | 3000 | Initial speed of the speed slider. Note: Value must be between 1000 and 6000. colorPalette | Object | see colorPalette | Defines the color palette for the user to choose from. color | String | Red-Blue | Defines the circles' initial color gradient. Note: The value has to be from the set of keys in colorPalette. mappings | Object | {key:0, x:1, y:2, size:3, color:4, category:0} | Defines the mapping from chart component to data column. See Mappings and Scalings. scalings | Object | {x:"linear", y:"linear", size:"linear", color:"linear"} | Defines the initial scaling settings for the chart components. See Mappings and Scalings. play | Boolean | false | If true, the animation start when the app is loaded, otherwise the animation has to be started manually. loop | Boolean | false | If true, the animation will loop forever, otherwise the animation will stop at the end of the timeline.

Data

The Data passed can be any table/spreadsheet formatted as a nested array. The data is inserted in the data table and reflected in the chart.

The data should have the following structure.

[
	[ColumnName1, ColumnName2, ... , ColumnNameN],
	[Row1Value1, Row1Value2, ... , Row1ValueN],
	[Row2Value1, Row2Value2, ... , Row2ValueN],
	...										,
	[RowNValue1, RowNValue2, ... , RowNValueN]
]

The default option, taken from Warpech's handsontable, is

[
	["Year", "Kia", "Nissan", "Toyota", "Honda"],
	["2008", 10, 11, 12, 13],
	["2009", 20, 11, 14, 13],
	["2010", 30, 15, 12, 13]
]

Color and ColorPalette

Color Palette is an extensible Object that pre-defines color gradients from which the user can choose.

The color gradients are used as scale to represent the difference/similarity between circles' values.

Color is simply a key name for one of the values in colorPalette.

The colorPalette object's format is as follows

{ 
	Color1Name: { from: "rgb(R,G,B)", to: "rgb(R,G,B)" },
	Color2Name: { from: "rgb(R,G,B)", to: "rgb(R,G,B)" },
	...													,
	ColorNName: { from: "rgb(R,G,B)", to: "rgb(R,G,B)" }
}

Where R,G,B are numbers from 0-255 representing the intensity of Red, Green, Blue respectively.

The default option is

{
	"Red-Blue": {
		from: "rgb(255,0,0)",
		to: "rgb(0,0,255)"
	},
	"Green-Yellow": {
		from: "rgb(0,255,0)",
		to: "rgb(0,255,255)"
	}
}

Note: The list of default options