Parallel Coordinates

By: Sri Harsha Allamraju
Project Homepage: http://code.google.com/p/parallel-coordinates/

Overview
Example
Loading
Data Format
Configuration Options
Methods
Events
Data Policy
Localization

Overview

Parallel Coordinates is a method of visualizing multivariate data. An n-dimensional space is represented as n parallel lines.
Works for browsers based on Gecko or Presto. This is written in Javascript, no Flash required.

Example


<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://parallel-coordinates.googlecode.com/svn/trunk/parallelC.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        
        // Create and populate a data table.
        var data = new google.visualization.DataTable();
		
		//creating column headers
		data.addColumn('number', 'MPG');
		data.addColumn('number', 'Cylinders');
		data.addColumn('number', 'Horse Power');
		data.addColumn('number', 'Weight');
		data.addColumn('number', 'Acceleration');
		data.addColumn('string', 'Origin');

		data.addRows(5);

		//populating data table
		data.setCell(0, 0, 18);
		data.setCell(0, 1, 8);
		data.setCell(0, 2, 130);
		data.setCell(0, 3, 3504);
		data.setCell(0, 4, 12);
		data.setCell(0, 5, "USA");


		data.setCell(1, 0, 15);
		data.setCell(1, 1, 8);
		data.setCell(1, 2, 165);
		data.setCell(1, 3, 3693);
		data.setCell(1, 4, 11.5);
		data.setCell(1, 5, "USA");

		data.setCell(2, 0, 27);
		data.setCell(2, 1, 4);
		data.setCell(2, 2, 88);
		data.setCell(2, 3, 2130);
		data.setCell(2, 4, 14.5);
		data.setCell(2, 5, "Europe");

		data.setCell(3, 0, 26);
		data.setCell(3, 1, 4);
		data.setCell(3, 2, 46);
		data.setCell(3, 3, 1835);
		data.setCell(3, 4, 20.5);
		data.setCell(3, 5, "Japan");

		data.setCell(4, 0, 25);
		data.setCell(4, 1, 4);
		data.setCell(4, 2, 87);
		data.setCell(4, 3, 2672);
		data.setCell(4, 4, 17.5);
		data.setCell(4, 5, "Japan");
		
        // Add more data rows and cells here

        // Instantiate our parallel coordinates object
        var vis = new vizObj.ParallelC(document.getElementById('parallelC'));
        
        // Draw parallel coordinates
        vis.draw(data, {width: 600, height: 300, title: 'Cars Dataset', lineColor:"#FE2E2E"});
       }
   </script>
  </head>
  <body>
    <div id="parallelC"></div>
  </body>
</html>

Loading and Instantiating

Load this visualization from http://parallel-coordinates.googlecode.com/svn/trunk/parallelC.js as shown here:

 <script style='text/javascript' src='http://parallel-coordinates.googlecode.com/svn/trunk/parallelC.js'></script>

The visualization class name is new vizObj.ParallelC. Here is an example of instantiating it in JavaScript:

  var visualization = new vizObj.ParallelC(document.getElementById('parallelC'));

Data Format

The chart support numeric and string values.

Configuration Options

The following options can be added to the options object passed to the visualization's draw() method.

Name	Type	Default	Description
`width`	numeric	500	Chart Area Width
`height`	numeric	500	Chart Area Height
`title`	String	null	Title of the chart displayed on the top.
`lineColor`	String	#FE2E2E	line Color

Methods

Method	Return Type	Description
`draw(data, options)`	None	Main Method which drives the charting process.

Events

No Events

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.

Localization

Hard-coded strings in this visualization