Cytoscape test2: Difference between revisions
From FANTOM5_SSTAR
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
this is | <html> | ||
<style> | |||
/* The Cytoscape Web container must have its dimensions set. */ | |||
#cytoscapeweb { width: 100%; height: 100%; } | |||
</style> | |||
<h1 id="firstHeading" class="firstHeading">FF:10563-108A5</h1> | |||
<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/10563-108A5.gml", false); | |||
request.send(null); | |||
xml = request.responseText; | |||
</script> | |||
<p>TF to TF network. Motif is an attribute of the source TF node. Promoter is an attribute of the TF to TF edge.</p> | |||
<script type="text/javascript"> | |||
window.onload=function() { | |||
// id of Cytoscape Web container div | |||
var div_id = "cytoscapeweb"; | |||
// you could also use other formats (e.g. GraphML) or grab the network data via AJAX | |||
//var sif = 'node1 typeA node2 node3 node4 node5\nnode2 typeB node6'; | |||
// 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" | |||
}; | |||
// visual options | |||
var visual_style = { | |||
global: { | |||
backgroundColor: "#ffffff", | |||
opacity: 0.1, | |||
tooltipDelay: 10 | |||
}, | |||
nodes: { | |||
label: { passthroughMapper: { attrName: "id" } }, | |||
tf: { passthroughMapper: { attrName: "id" } }, | |||
tooltipText: "<b>${id}</b><br />${motif}", | |||
shape: "ellipse", | |||
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" | |||
} | |||
}; | |||
// draw options | |||
var draw_options = { | |||
// your data goes here | |||
network: xml, | |||
visualStyle: visual_style, | |||
nodeTooltipsEnabled: true, | |||
edgeTooltipsEnabled: true, | |||
panZoomControlVisible: true | |||
}; | |||
// init and draw | |||
var vis = new org.cytoscapeweb.Visualization(div_id, options); | |||
// callback when Cytoscape Web has finished drawing | |||
vis.ready(function() { | |||
// add a listener for when nodes and edges are clicked | |||
vis.addListener("dblclick", "nodes", function(event) { | |||
handle_click(event); | |||
}) | |||
.addListener("dblclick", "edges", function(event) { | |||
handle_click(event); | |||
}); | |||
function handle_click(event) { | |||
var target = event.target; | |||
var lurl = "https://fantom5-collaboration.gsc.riken.jp/resource_browser/RB_SearchResults?sq="+target.data["id"]; | |||
window.location = lurl; | |||
} | |||
}); | |||
vis.draw(draw_options); | |||
}; | |||
</script> | |||
</html> | |||
Revision as of 14:05, 25 April 2012
FF:10563-108A5
Cytoscape Web will replace the contents of this div with your graph.
TF to TF network. Motif is an attribute of the source TF node. Promoter is an attribute of the TF to TF edge.
