Personal tools

Cytoscape test2: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
this is used to test cytoscape
<html>
 
        <style>
            /* The Cytoscape Web container must have its dimensions set. */
            #cytoscapeweb { width: 100%; height: 100%; }
        </style>
 
        <h1 id="firstHeading" class="firstHeading">FF:10717-109I6, TF to Motif to TF network</h1>
 
<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>
<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).
</p>
 
        <div id="cytoscapeweb" style="width:800px;height:600px">
            Cytoscape Web will replace the contents of this div with your graph.
        </div>
 
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/json2.min.js"></script>
       
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/AC_OETags.min.js"></script>
       
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/cytoscapeweb.min.js"></script>
 
     
        <!-- Load data -->
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET", "https://fantom5-collaboration.gsc.riken.jp/resource_browser/nwfiles/10717-109I6_2.graphml", false);
request.send(null);
xml = request.responseText;
</script>
 
        <script type="text/javascript">
$(function(){
var z_min = 0;
var z_max = 1;
var t;
var selected = false;
function graphClick(event) {
var target = event.target;
var lurl = "https://fantom5-collaboration.gsc.riken.jp/resource_browser/RB_SearchResults?sq="+target.data["label"];
window.location = lurl;
//alert(lurl);
}
function graphSelect() {
var edges = vis.selected("edges");
var nodes = vis.selected("nodes");
 
selected = ((edges.length > 0) || (nodes.length > 0));
vis.visualStyle(visual_style);
}
// id of Cytoscape Web container div
var div_id = "cytoscapeweb";
var colorMapper = {
attrName: "type",
entries: [ { attrValue: "motif", value: "#ff9900" },
  { attrValue: "tf", value: "#0099ff" } ]
};
var shapeMapper = {
attrName: "type",
entries: [ { attrValue: "motif", value: "rectangle" },
  { attrValue: "tf", value: "ELLIPSE" } ]
};
var edgeColorMapper = {
attrName: "type",
entries: [ { attrValue: "has_motif", value: "#ff9900" }, { attrValue: "promotes", value: "#0099ff" } ]
};
var edgeArrowMapper = {
attrName: "type",
entries: [ { attrValue: "has_motif", value: "arrow" }, { attrValue: "promotes", value: "delta" } ]
};
var edgeTooltipMapper = {
attrName: "type",
entries: [ { attrValue: "has_motif", value: "" }, { attrValue: "promotes", value: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}" } ]
};
// visual style we will use
var visual_style = {
global: {
backgroundColor: "#ffffff",
opacity: 0.1,
tooltipDelay: 10
},
nodes: {
//label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>${type}: ${label}</b>",
shape: { defaultValue: "ellipse", discreteMapper: shapeMapper },
borderWidth: 1,
borderColor: "#000000",
size: 30,
//color: "#ff9900",
color: { defaultValue: "#ff9900", discreteMapper: colorMapper },
//opacity: 0.8,
opacity: { customMapper: { functionName: "customOpacity" } },
selectionOpacity: 0.8,
hoverOpacity: 0.8,
labelHorizontalAnchor: "center"
},
edges: {
width: { defaultValue: 5, passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "promoter" } },
//tooltipText: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}",
tooltipText: { defaultValue: "", discreteMapper: edgeTooltipMapper },
//color: "#011e59",
color: { defaultValue: "#011e59", discreteMapper: edgeColorMapper },
targetArrowShape: { defaultValue: "delta", discreteMapper: edgeArrowMapper },
sourceArrowShape: "",
labelGlowOpacity: 0.8,
//opacity: 0.8,
opacity: { customMapper: { functionName: "customOpacity" } },
selectionOpacity: 0.8,
hoverOpacity: 0.8,
labelGlowColor: "#000000"
}
};
// initialization options
                var options = {
                    // where you have the Cytoscape Web SWF
                    swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
                    // where you have the Flash installer SWF
                    flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
                };
               
            var vis = new org.cytoscapeweb.Visualization(div_id, options);
vis["customOpacity"] = function (data) {
return (selected) ? 0.3 : 0.6;
};
               
            // callback when Cytoscape Web has finished drawing
vis.ready(function() {
// add a listener for when nodes and edges are clicked
vis.addListener("dblclick", "nodes", graphClick)
.addListener("dblclick", "edges", graphClick)
.addListener("select", "", graphSelect)
.addListener("deselect", "", graphSelect);
});
 
// draw options
var draw_options = {
// your data goes here
network: xml,
visualStyle: visual_style,
nodeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
// hide pan zoom
panZoomControlVisible: true
};
               
            vis.draw(draw_options);
        });
 
        </script>
       
 
</html>

Latest revision as of 12:57, 8 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.

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