Cytoscape test: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
(28 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"> | ||
Line 22: | Line 25: | ||
<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 --> | <!-- Load data --> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var request = | var request = new XMLHttpRequest(); | ||
request.open("GET", "https://fantom5-collaboration.gsc.riken.jp/resource_browser/nwfiles/10563-108A5.gml", false); | request.open("GET", "https://fantom5-collaboration.gsc.riken.jp/resource_browser/nwfiles/10563-108A5.gml", false); | ||
request.send(null); | request.send(null); | ||
xml = request.responseText; | |||
</script> | </script> | ||
<script type="text/javascript"> | <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["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 tooltipMapper = { | |||
attrName: "motif", | |||
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 46: | Line 119: | ||
flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall" | 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> | </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.