Personal tools

Cytoscape test3: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
Line 3: Line 3:
         <style>
         <style>
             /* The Cytoscape Web container must have its dimensions set. */
             /* The Cytoscape Web container must have its dimensions set. */
             #cytoscapeweb { width: 50%; height: 100%; float: left; }
             #cytoscapeweb { width: 100%; height: 100%; }
         </style>
         </style>


Line 12: Line 12:
</p>
</p>


        <div id="cytoscapeweb" style="width:800px;height:600px;">
<div style="width: 50%; height:600px; float: left;">
        <div id="cytoscapeweb">
             Cytoscape Web will replace the contents of this div with your graph.
             Cytoscape Web will replace the contents of this div with your graph.
         </div>
         </div>
<p />LEGEND: <span style="background-color: #0099ff;">TF ()</span>, <span style="background-color: #ff9900;">MOTIF []</span>,
<span style="background-color: #0099ff;">MOTIF->TF</span>, <span style="background-color: #ff9900;">TF->MOTIF</span>
</div>
<div id="tabs" style="width: 48%; height:600px; float: right;">
<ul>
<li><a href="#style_panel">Style</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#properties_panel">Data Display</a></li>
</ul>
<div id="style_panel">
<div id="style_panel">
<h3>Style</h3>
Layout: <select id="cyto_layout">
  <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><a href="#" id="cyto_recalc">(recalculate)</a>
</div>
        <div id="filter_panel">
<h3>Filter</h3>
<table>
<table>
<tr><th>Z-Score filter:</th><tr>
<tr><th>Layout:</th></tr>
<tr><td><span id="cyto_zscore_min">0.00</span> &nbsp;</td><td>&nbsp;&nbsp;<div id="slider1" class="sliderbar"></div>&nbsp;&nbsp;</td><td>&nbsp; <span id="cyto_zscore_max">0.00</span></td></tr>
<tr><td></td>
<tr><td></td><td><input type="text" id="cyto_zscore_filter_min" value="0" style="float: left;"/> <input type="text" id="cyto_zscore_filter_max" value="100" style="float: right;"/></td><td></td></tr>
<td>
<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" style="width: 32px; height: 32px;">(recalculate)</button>
</td></tr>
<tr><th>Labels:</th></tr>
<tr><td></td><td><input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
<tr><td></td><td><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
</table>
</table>
Show edges: <input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input> <input type="checkbox" id="cyto_edges_promotes" checked>MOTIF->TF</input>
 
<br />Show nodes: <input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF</input> <input type="checkbox" id="cyto_nodes_tf" checked>Target TF</input> <input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
</div>
</div>
<p /><div id="properties_panel" style="font-size: x-small; overflow-y:scroll; height: 300px;">
        <div id="filter_panel">
<div>
<b>Z-Score filter:</b>
<table id="nodes_list" border="1" width="100%" class="wikitable">
<tr><th>Node</th><th>Type</th></tr>
<table width="100%">
</table>
<tr><td width="35px"></td><td id="data_bar" style="position: relative;"></td><td width="35px"></td></tr>
</div>
<tr valign="bottom"><td style="text-align: right;" ><span id="cyto_zscore_min">0.00</span> &nbsp;</td><td ><div id="slider1" class="sliderbar"></div></td><td>&nbsp; <span id="cyto_zscore_max">0.00</span></td></tr>
<div>
<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 id="edges_list" border="1" width="100%" class="wikitable">
<tr><th>Source TF</th><th>Target TF</th><th>Promoter</th><th>Z-Score</th></tr>
</table>
</table>
<p /><b>Show nodes:</b>
<br /><input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input> <input type="checkbox" id="cyto_edges_promotes" checked>MOTIF->TF</input>
<p /><b>Show edges:</b>
<br /><input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF</input> <input type="checkbox" id="cyto_nodes_tf" checked>Target TF</input> <input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
</div>
</div>
<div id="properties_panel" style="font-size: x-small; overflow-y:scroll; height: 540px;">
<div>
<table id="nodes_list" border="1" width="100%" class="wikitable">
</table>
</div>
<div>
<table id="edges_list" border="1" width="100%" class="wikitable">
</table>
</div>
         </div>
         </div>
</div>


<script src="/resource_browser/nwfiles/jquery.nouislider.min.js"></script>
<!-- JQuery UI -->
<link href="/resource_browser/nwfiles/nouislider.css" rel="stylesheet">
<script type="text/javascript" src="/resource_browser/nwfiles/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" />


         <!-- JSON support for IE (needed to use JS API) -->
         <!-- JSON support for IE (needed to use JS API) -->
Line 61: Line 88:


        
        
        <!-- Load data -->
<script type="text/javascript">
<script type="text/javascript">
// Load Data
// Load Data
Line 83: Line 109:
</script>
</script>


<script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview.js"></script>
<script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_2.js"></script>


</html>
</html>

Revision as of 10:52, 10 May 2012

FF:10717-109I6, TF to Motif to TF network

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.

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).

Cytoscape Web will replace the contents of this div with your graph.

LEGEND: TF (), MOTIF [], MOTIF->TF, TF->MOTIF

Layout:
Labels:
Nodes
Edges
Z-Score filter:
0.00  
  0.00

Show nodes:
TF->MOTIF MOTIF->TF

Show edges:
Source TF Target TF MOTIF

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