<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title tal:contents="plottitle">CompClust - PCA Projection Plots</title>
  <link rel="stylesheet" href="/compclust_css" type="text/css"
  	tal:attributes="href compclust_css" />
</head>
<body>
<span id="compclustMenu" tal:replace="structure menu"/>
<div id="compclustBody">
<h1><a href="#instructions">PCA Projection Plots</a></h1>
<form action="" method="get">
  <p>
  <label for="pcNumX">Choose X axis component</label> 
  <select name="pcNumX" id="pcNumX">
    <option tal:repeat="pcNum pcNumsX" tal:content="pcNum/0"
            tal:attributes="selected pcNum/1">None</option>
  </select>
  <label for="pcNumY">Choose Y axis component</label> 
  <select name="pcNumY" id="pcNumY">
    <option tal:repeat="pcNum pcNumsY" tal:content="pcNum/0"
            tal:attributes="selected pcNum/1">None</option>
  </select>
  <input type="submit"/>
  </p>
</form>
<div id="compclustPlot" tal:condition="pcaplot">
  <a href="" tal:condition="pcaplot" 
     tal:attributes="href downloadploturl">download</a>
  <hr/>
  <map name="graph" id="graph" tal:replace="structure csimap"></map>
  <img tal:attributes="src pcaplot" src="" usemap="#graph" alt="pca plot"/>
</div>
<hr/>
<h1><a name="instructions">Instructions</a></h1>
<p>
  Creates a principal component projection scatter plot of the dataset using
  two user selected principal components. The Y axis has the most extreme data
  points (e.g. genes) highlighted.
</p>
<p>
  Use the choose X axis and Y axis component to select which principal component 
  you would like along each axis.  The lists are formated as principal component 
  number - percent variance captured by that component.
</p>
<p>
Once rendered hovering over a point should show a tooltip (in most browsers) containing the primary label for that point, and clicking on one of the data points will bring up a detail plot of that vector.
</p>
</div>
</body>
</html>
