Personal tools

Cytoscape test: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(36 intermediate revisions by the same user not shown)
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: 100%; height: 100%; }
             #cytoscapeweb { width: 100%; height: 100%; }
         </style>
         </style>


        <h1 id="firstHeading" class="firstHeading">FF:10563-108A5, TF to TF network</h1>


<p>Mouseover nodes and edges to see attributes.  Motif is an attribute of the source TF nodes (shown in orange).  Promoter and z-score are attributes of the TF to TF edge.</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">
         <div id="cytoscapeweb" style="width:800px;height:600px">
             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>


         <!-- JSON support for IE (needed to use JS API) -->
         <!-- JSON support for IE (needed to use JS API) -->
Line 22: Line 24:
         <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
         <!-- 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>
         <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/10563-108A5.gml", false);
request.send(null);
xml = request.responseText;
</script>
 
         <script type="text/javascript">
         <script type="text/javascript">
            window.onload=function() {
$(function(){
                // id of Cytoscape Web container div
                var div_id = "cytoscapeweb";
var z_min = 0;
               
var z_max = 1;
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
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["id"];
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: "motif",
entries: [ { attrValue: "", value: "#0099ff" } ]
};


                var sif = 'node1 typeA node2 node3 node4 node5\nnode2 typeB node6';
var tooltipMapper = {
               
attrName: "motif",
                // initialization options
entries: [ { attrValue: "", value: "<b>TF: ${id}</b>" } ]
};
// visual style we will use
var visual_style = {
global: {
backgroundColor: "#ffffff",
opacity: 0.1,
tooltipDelay: 10
},
nodes: {
label: { passthroughMapper: { attrName: "id" } },
//tooltipText: "<b>TF: ${id}</b><br />Motif: ${motif}",
tooltipText: { defaultValue: "<b>TF: ${id}</b><br />Motif: ${motif}", discreteMapper: tooltipMapper },
shape: "ellipse",
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: { passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>Promoter: ${id}</b><br />Z-Score: ${zscore}",
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 = {
                 var options = {
                     // where you have the Cytoscape Web SWF
                     // where you have the Cytoscape Web SWF
Line 40: Line 120:
                 };
                 };
                  
                  
                 // draw options
            var vis = new org.cytoscapeweb.Visualization(div_id, options);
                var draw_options = {
                    // your data goes here
vis["customOpacity"] = function (data) {
                    network: sif,
return (selected) ? 0.3 : 0.6;
    //visualStyle: visual_style,
};
    nodeTooltipsEnabled: true,
                  
    edgeTooltipsEnabled: true,
            // callback when Cytoscape Web has finished drawing
                    panZoomControlVisible: true
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);
});


                // visual options
// draw options
                var visual_style = {
var draw_options = {
                    global: {
// your data goes here
                        backgroundColor: "#ffffff",
network: xml,
opacity: 0.1,
visualStyle: visual_style,
tooltipDelay: 10
nodeTooltipsEnabled: true,
                    },
edgeTooltipsEnabled: true,
                    nodes: {
// hide pan zoom
label: { passthroughMapper: { attrName: "id" } },
panZoomControlVisible: true
tf: { passthroughMapper: { attrName: "id" } },
};
//tooltipText: "<b>${id}</b><br />${motif}",
               
                        shape: "ellipse",
            vis.draw(draw_options);
                        borderWidth: 1,
        });
                        borderColor: "#000000",
                        size: 40,
                        color: "#0099ff",
opacity: 0.4,
                        labelHorizontalAnchor: "center"
                    },
                    edges: {
                        //width: { passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "id" } },
tooltipText: { passthroughMapper: { attrName: "id" } },
//tooltipText: "<b>${id}</b><br />${zscore}",
                        color: "#011e59",
targetArrowShape: "delta",
sourceArrowShape: "",
labelGlowOpacity: 0.8,
labelGlowColor: "#000000"
                    }
                };


                // init and draw
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
                vis.draw(draw_options);
            };
         </script>
         </script>
          
          


</html>
</html>

Latest revision as of 11:25, 6 November 2012

FF:10563-108A5, TF to TF network

Mouseover nodes and edges to see attributes. Motif is an attribute of the source TF nodes (shown in orange). Promoter and z-score are attributes of the TF to TF edge.

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_test&oldid=2251859"