Personal tools

Cytoscape test2: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(28 intermediate revisions by the same user not shown)
Line 6: Line 6:
         </style>
         </style>


         <h1 id="firstHeading" class="firstHeading">FF:10563-108A5</h1>
         <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">
         <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.
Line 20: 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>


<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>
     
       
         <!-- Load data -->
         <!-- Load data -->
<script type="text/javascript">
<script type="text/javascript">
var request = new XMLHttpRequest();
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/10717-109I6_2.graphml", false);
request.send(null);
request.send(null);
xml = request.responseText;
xml = request.responseText;
Line 37: Line 41:
var t;
var t;
var selected = false;
var selected = false;
function sliderTrack() {
z_min = $('#slider1').noUiSlider('getValue', {point: 'lower'});
z_max = $('#slider1').noUiSlider('getValue', {point: 'upper'});
z_min = Math.round(z_min*100)/100;
z_max = Math.round(z_max*100)/100;
$("#cyto_zscore_filter_min").val(z_min);
$("#cyto_zscore_filter_max").val(z_max);
//clearTimeout(t);
//t = setTimeout("setScoreFilter()", 100);
}
function sliderChange() {
sliderTrack();
setScoreFilter();
}
function setScoreFilter() {
vis.filter("edges", function(edge) {
return ((edge.data.zscore >= z_min)&&(edge.data.zscore <= z_max));
}, true);
}
function graphClick(event) {
function graphClick(event) {
var target = event.target;
var target = event.target;
 
 
var lurl = "https://fantom5-collaboration.gsc.riken.jp/resource_browser/RB_SearchResults?sq="+target.data["id"];
var lurl = "https://fantom5-collaboration.gsc.riken.jp/resource_browser/RB_SearchResults?sq="+target.data["label"];
//window.location = lurl;
window.location = lurl;
alert(lurl);
//alert(lurl);
}
}
Line 74: Line 53:
var edges = vis.selected("edges");
var edges = vis.selected("edges");
var nodes = vis.selected("nodes");
var nodes = vis.selected("nodes");
//var container = document.getElementById("TF_list");
 
var html = "<tr><th>TF</th><th>Motif</th></tr>";
//var sel = vis.selected();
for (var i in nodes) {
var data = nodes[i].data;
html += "<tr><td>"+data.id+"</td><td>"+data.motif+"</td></tr>";
}
//($("#nodes_list").innerHTML);
$("#nodes_list").html(html);
html = "<tr><th>Source TF</th><th>Target TF</th><th>Promoter</th><th>Z-Score</th></tr>";
//var sel = vis.selected();
for (var i in edges) {
var data = edges[i].data;
html += "<tr><td>"+data.source+"</td><td>"+data.target+"</td><td>"+data.promoter+"</td><td>"+data.zscore+"</td></tr>";
}
$("#edges_list").html(html);
selected = ((edges.length > 0) || (nodes.length > 0));
selected = ((edges.length > 0) || (nodes.length > 0));
vis.visualStyle(visual_style);
vis.visualStyle(visual_style);
//if ((edges.length > 0) && (nodes.length > 0)) {
// selected = true;
//}
}
function layoutChange() {
vis.layout($("#cyto_layout").val());
}
}
$("#cyto_layout").change(function(){
layoutChange();
return false;
});
$("#cyto_recalc").click(function(){
layoutChange();
return false;
});
// id of Cytoscape Web container div
// id of Cytoscape Web container div
Line 123: Line 66:
entries: [ { attrValue: "motif", value: "#ff9900" },
entries: [ { attrValue: "motif", value: "#ff9900" },
  { attrValue: "tf", value: "#0099ff" } ]
  { attrValue: "tf", value: "#0099ff" } ]
};
var shapeMapper = {
attrName: "type",
entries: [ { attrValue: "motif", value: "rectangle" },
  { attrValue: "tf", value: "ELLIPSE" } ]
};
};
Line 132: Line 81:
var edgeArrowMapper = {
var edgeArrowMapper = {
attrName: "type",
attrName: "type",
entries: [ { attrValue: "has_motif", value: "T" }, { attrValue: "promotes", value: "delta" } ]
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}" } ]
};
};
Line 145: Line 99:
//label: { passthroughMapper: { attrName: "id" } },
//label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>${type}: ${label}</b>",
tooltipText: "<b>${type}: ${label}</b>",
shape: "ellipse",
shape: { defaultValue: "ellipse", discreteMapper: shapeMapper },
borderWidth: 1,
borderWidth: 1,
borderColor: "#000000",
borderColor: "#000000",
Line 158: Line 112:
},
},
edges: {
edges: {
width: { passthroughMapper: { attrName: "zscore" } },
width: { defaultValue: 5, passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "promoter" } },
label: { passthroughMapper: { attrName: "promoter" } },
tooltipText: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}",
//tooltipText: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}",
tooltipText: { defaultValue: "", discreteMapper: edgeTooltipMapper },
//color: "#011e59",
//color: "#011e59",
color: { defaultValue: "#011e59", discreteMapper: edgeColorMapper },
color: { defaultValue: "#011e59", discreteMapper: edgeColorMapper },
Line 175: Line 130:
// initialization options
// initialization options
var options = {
                var options = {
swfPath: "swf/CytoscapeWeb",
                    // where you have the Cytoscape Web SWF
flashInstallerPath: "swf/playerProductInstall"
                    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);
             var vis = new org.cytoscapeweb.Visualization(div_id, options);
Line 194: Line 151:
.addListener("select", "", graphSelect)
.addListener("select", "", graphSelect)
.addListener("deselect", "", graphSelect);
.addListener("deselect", "", graphSelect);
var edges = vis.edges();
for (var i in edges) {
var data = edges[i].data;
if (z_max < data.zscore) { z_max = data.zscore; }
}
z_max = Math.ceil(z_max);
z_min = Math.floor(z_min);
$(".sliderbar").noUiSlider("init", { scale: [z_min, z_max], startMin: z_min, startMax: z_max, tracker: sliderTrack, change: sliderChange });
$("#cyto_zscore_filter_min").val(z_min);
$("#cyto_zscore_filter_max").val(z_max);
$("#cyto_zscore_min").html(z_min);
$("#cyto_zscore_max").html(z_max);
graphSelect();  // Empty
});
});
Line 222: Line 161:
nodeTooltipsEnabled: true,
nodeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
layout: { name: "ForceDirected", autoStabilize: true, maxTime: 120000, weightAttr: "zscore", weightNorm: "log", gravitation: -500 },
// hide pan zoom
// hide pan zoom
panZoomControlVisible: true
panZoomControlVisible: true

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"