Personal tools

Cytoscape test4: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
Line 1: Line 1:
<html>  
<html>  


        <h1 id="firstHeading" class="firstHeading">FF:10717-109I6, TF to Motif to TF network</h1>
<!-- F5 Cytoscape App HTML -->
<div id="f5_cytoscapeweb">


<p>Mouseover nodes and edges to see attributes. Motifs are shown in orange, TFs are shown in blue.  Promoter and z-score are attributes of the Motif to TF edges (blue arrow).  TF to Motif edges are shown in orange.</p>
<div id="tabs">
<p>Motifs shown are the top (maximum 30) motifs in the sample.  TFs shown have at least one CAGE promoter with at at least 10 TPM expression (RLE normalized) in the sample.  Edges shown have a z-score of at least 1.5 (based on correlation between motif activity and promoter expression).
<ul>
</p>
<li><a href="#style_panel">Layout</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#export_panel">Export</a></li>
<li><a href="#properties_panel_nodes">Nodes</a></li>
<li><a href="#properties_panel_edges">Edges</a></li>
</ul>
<div id="style_panel">
<label class="style">Layout:</label>
<select id="cyto_layout" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <option value="Preset">Preset</option>
  <option value="ForceDirected">Force Directed</option>
  <option value="Circle">Circle</option>
  <option value="Radial">Radial</option>
  <option value="Tree">Tree</option>
</select>
<button id="cyto_recalc">Recalculate</button>
<label class="style">Labels:</label>
<input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
<br /><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
</div>
<div id="filter_panel">
<label class="filter">Show edges:</label>
<input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input>
<br /><input type="checkbox" id="cyto_edges_promotes" checked>Promoters</input>
<label class="filter">Z-Score filter:</label>
<table class="slider">
<tr><td></td><td><div id="data_bar"></div></td><td></td></tr>
<tr valign="bottom"><td id="cyto_zscore_min" >0.00</td><td ><div id="slider1" class="sliderbar"></div></td><td id="cyto_zscore_max">1</td></tr>
</table>
<label class="filter">Show nodes:</label>
<input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF (Outdegree = 1)</input>
<br /><input type="checkbox" id="cyto_nodes_tf" checked>Target TF (Outdegree = 0)</input>
<br /><input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
<p />
</div>
<div id="properties_panel_nodes" class="properties_panel">
<div>
<button id="btn_show_select_nodes" class="rt_btn">Show only these nodes</button>
<p /><table id="nodes_list" class="wikitable">
</table>
</div>
</div>
<div id="properties_panel_edges" class="properties_panel">
<div>
<button id="btn_show_select_edges" class="rt_btn">Show only these edges</button>
<p /><table id="edges_list" class="wikitable">
</table>
</div>
</div>
<div id="export_panel">
<label class="export">Export Network:</label>
  <button id="btn_exportGraphml">graphml</button>
  <button id="btn_exportXgmml">xgmml</button>
  <button id="btn_exportSIF">sif</button>
  <button id="btn_exportJSON">JSON</button>
<label class="export">Export Image:</label>
  <button id="btn_exportPDF">PDF</button>
  <button id="btn_exportPNG">PNG</button>
  <button id="btn_exportSVG">SVG</button>
</div>
</div>


<!-- F5 Cytoscape App HTML -->
<div id="f5_cytoscapeweb">
<div id="cytoscapeweb"></div>
<div id="cytoscapeweb"></div>
<p /><b>LEGEND:</b> <span class="tf">TF <img src="/resource_browser/nwfiles/tf.png" /></span>, <span class="motif">MOTIF <img src="/resource_browser/nwfiles/motif.png" /></span>,  
<p /><b>LEGEND:</b> <span class="tf">TF <img src="/resource_browser/nwfiles/tf.png" /></span>, <span class="motif">MOTIF <img src="/resource_browser/nwfiles/motif.png" /></span>,  
<br /><span class="tf">MOTIF->TF <img src="/resource_browser/nwfiles/motif-tf.png" /></span>, <span class="motif">TF->MOTIF <img src="/resource_browser/nwfiles/tf-motif.png" /></span>
<br /><span class="tf">MOTIF->TF <img src="/resource_browser/nwfiles/motif-tf.png" /></span>, <span class="motif">TF->MOTIF <img src="/resource_browser/nwfiles/tf-motif.png" /></span>


</div>
<div id="tabs">
<ul>
<li><a href="#style_panel">Layout</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#export_panel">Export</a></li>
<li><a href="#properties_panel">Data</a></li>
</ul>
<div id="style_panel">
<label class="style">Layout:</label>
<select id="cyto_layout" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <option value="Preset">Preset</option>
  <option value="ForceDirected">Force Directed</option>
  <option value="Circle">Circle</option>
  <option value="Radial">Radial</option>
  <option value="Tree">Tree</option>
</select>
<button id="cyto_recalc">Recalculate</button>
<label class="style">Labels:</label>
<input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
<br /><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
</div>
<div id="filter_panel">
<label class="filter">Show edges:</label>
<input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input>
<br /><input type="checkbox" id="cyto_edges_promotes" checked>Promoters</input>
<label class="filter">Z-Score filter:</label>
<table class="slider">
<tr><td></td><td id="data_bar"></td><td></td></tr>
<tr valign="bottom"><td id="cyto_zscore_min" >0.00</td><td ><div id="slider1" class="sliderbar"></div></td><td id="cyto_zscore_max">1</td></tr>
<!-- tr><td></td><td valign="top" ><input type="text" id="cyto_zscore_filter_min" value="0" style="float: left; width: 35px;"/>  <input type="text" id="cyto_zscore_filter_max" value="100" style="float: right; width: 35px;"/></td><td></td></tr -->
</table>
<label class="filter">Show nodes:</label>
<input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF (Outdegree = 1)</input>
<br /><input type="checkbox" id="cyto_nodes_tf" checked>Target TF (Outdegree = 0)</input>
<br /><input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
</div>
<div id="properties_panel" style="height: 540px;">
<div>
<table id="nodes_list" class="wikitable">
</table>
</div>
<div>
<table id="edges_list" class="wikitable">
</table>
</div>
</div>
<div id="export_panel">
<label class="export">Export Network:</label>
  <button id="btn_exportGraphml">graphml</button>
  <button id="btn_exportXgmml">xgmml</button>
  <button id="btn_exportSIF">sif</button>
  <button id="btn_exportJSON">JSON</button>
<label class="export">Export Image:</label>
  <button id="btn_exportPDF">PDF</button>
  <button id="btn_exportPNG">PNG</button>
  <button id="btn_exportSVG">SVG</button>
</div>
</div>
</div>


Line 95: Line 94:
<link href="/resource_browser/nwfiles/f5_cytoview.css" rel="stylesheet"/>
<link href="/resource_browser/nwfiles/f5_cytoview.css" rel="stylesheet"/>
         <script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_4.js"></script>  
         <script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_4.js"></script>  
<link rel="stylesheet" href="/resource_browser/nwfiles/f5-style.css" />


<!-- Data Loading Section -->
<!-- Data Loading Section -->
<script type="text/javascript">
<script type="text/javascript">
// Load Data
// Load Data
var durl = "/resource_browser/nwfiles/CNhs11844.10717-109I6.xgmml";
//var durl = "/resource_browser/nwfiles/</html>{{{CNhs}}}.{{{FFid}}}.xgmml<html>";
                 //var durl = "/resource_browser/nwfiles/CNhs10652.10045-101F9.xgmml"
                 var durl = "/resource_browser/nwfiles/CNhs11844.10717-109I6.xgmml";


//$.get(durl, function(data) {
//$.get(durl, function(data) {

Revision as of 13:50, 5 June 2012

Nodes
Edges
TF->MOTIF
Promoters
0.00
1
Source TF (Outdegree = 1)
Target TF (Outdegree = 0)
MOTIF

LEGEND: TF , MOTIF ,
MOTIF->TF , TF->MOTIF

Retrieved from "http://f5-webapp4.gsc.riken.jp/resource_browser/index.php?title=Cytoscape_test4&oldid=1829030"