Any way to dynamically set edge length

[Bowen Qiu]

I have a data value in my edges that I would like to use to set the
default length for edges. I know in the layout I can set restlength,
but that only seems like a static number. Can I use the
continuousMapper option to dynamically change the edge length?

Thanks

[Max Franz]

You can try the edge-weighted option in the force directed layout as an approximation.

[Benjamin Hitz]

Speaking of this, I have been fiddling around with the Force directed layout parameters with very little success (now, to be fair I am using a multi-graph which is quite complicated).

The values are documented:

• mass {Number}: The default mass value for nodes.
• gravitation {Number}: The gravitational attraction (or repulsion, for negative values) between nodes.
• tension {Number}: The default spring tension for edges.
• restLength {Number}: The default spring rest length for edges.
• drag {Number}: The co-efficient for frictional drag forces.
• iterations {Number}: The number of iterations to run the simulation.
• maxTime {Number}: The maximum time to run the simulation, in milliseconds.
• minDistance {Number}: The minimum effective distance over which forces are exerted. Any lesser distances will be treated as the minimum.
• maxDistance {Number}: The maximum distance over which forces are exerted. Any greater distances will be ignored.
• autoStabilize {Boolean}: A common problem with force-directed layouts is that they can be highly unstable. If this parameter is true and the edges are being stretched too much between each iteration, Cytoscape Web automatically tries to stabilize the network. The stabilization attempt is executed after the determined number of iterations, until each edge length seems constant or until the maxTime is reached. Set false if you think the results look worse than expected, or if the layout is taking too long to execute.
• weightAttr {String}: The name of the edge attribute that contains the weights. The default value is null, which means that the layout is unweighted with respect to edges. If you want to generate an edge-weighted layout, you just need to provide the name of the data attribute that should be used as weight.
• weightNorm {String}: The normalization method that is applied to the weight values when using a weighted layout (i.e. weightAttr != null). Possible values are: "linear", "invlinear" and "log". The default value is "linear".
• minWeight {Number}: The minimum edge weight to consider, if the layout is set to be weighted. Do not specify any value if you want the layout to get the minimum weight from the rendered edges data (filtered-out edges are ignored). Any edge with a weight bellow the minimum will be laid out the same as an edge with the minimum weight.
• maxWeight {Number}: The maximum edge weight to consider, if the layout is set to be weighted. Do not specify any value if you want the layout to get the maximum weight from the rendered edges data (filtered-out edges are ignored). Any edge with a weight above the maximum will be laid out the same as an edge with maximum weight.

But I am not precisely sure how this maps directly to the Energy function you are using (havent' dug into the AS code yet)

One "pseudo parameter" I was trying to set was to keep nodes from overlapping (my node size is 50px with various shapes).  I was trying to jigger the parameters and edge weights so that no node was < 25 px away (1 circular node radius).  Actually maybe a little 10px buffer as well.  Generally speaking the default parameters work pretty good 

the defaults from the demo are:

3 / -500 / 0.1 / auto / 0.4 / 400 / 30000 / 1 / 10000 / true  (unweighted so ignore the rest).  

So I assume those are the csw demo values.  I would like to take the "default graph" and with my graphs just "expand it" a bit.   The defaults tend to make a big "pile" of nodes that are highly (multiply) connected).   Also I would like it to converge in a few seconds at most! (30 is sort of ridiculous).   With maximum ~200 nodes ~1000 edges.

I have been reading a little about FD layout algorithms but no having much luck.

Just wondering what people's experiences with this are.

--

Ben Hitz 

Senior Scientific Programmer ** Saccharomyces Genome Database ** GO Consortium

Stanford University ** hi...@genome.stanford.edu

[Bowen Qiu]

So I've tried using the ForceDirected Option with Weight attribute in
the options.
var forceoptions = {
weightAttr: "PCC",
iterations: 200,
maxTime: 10000,
minWeight: -10000,
maxWeight: 10000,
};

var draw_options = {

network: txtFile,
// No edge labels
edgeLabelsVisible: false,


layout:{
name: "ForceDirected",
options: forceoptions

},

// set the style at initialisation
visualStyle: visual_style,

// hide pan zoom
panZoomControlVisible: true
};
// vis.draw(draw_options);
// document.getElementById("cytoscapeweb").innerHTML =
"debug";
$.ajax({
url: "http://localhost:8080/cisDecoder/docs/tree3.graphml",
dataType: "text/plain",
success: function(data){
draw_options.network = data;
txtFile = data;
vis.draw(draw_options);
}
}
);


an example of my edge data is below:

<edge target="ko-7" source="otp-16">
<data
key="Pairwise_Common_Elements">AAATCA,AAATTA,ATGCAAA,CAAAAT,GCATTT</
data>
<data key="PCC">7080.0</data>
</edge>

Instead of weighing the edges according to their values, cytoscape
creates a perfect hexagon with the given data (6 data points).

> > On Fri, Jul 8, 2011 at 13:10, Bowen Qiu <bowen0...@yahoo.com> wrote:
> > I have a data value in my edges that I would like to use to set the
> > default length for edges. I know in the layout I can set restlength,
> > but that only seems like a static number. Can I use the
> > continuousMapper option to dynamically change the edge length?
>
> > Thanks
>
> --
> Ben Hitz
> Senior Scientific Programmer ** Saccharomyces Genome Database ** GO Consortium

> Stanford University ** h...@genome.stanford.edu

[Christian Tannus Lopes]

Could you please send us the graphml file, so we can test it?
Thanks,

Christian

[Bowen Qiu]

<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns
http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
<key id="Label" for="all" attr.name="label" attr.type="string"/>
<key id="Cluster_Name" for="node" attr.name="name" attr.type="string"/
>
<key id="Accrued_Elements" for="node" attr.name="accrued_elements"
attr.type="string"/>
<key id="Density" for="node" attr.name="density" attr.type="double"/>
<key id="Pairwise_Common_Elements" for="edge"
attr.name="pairwise_elements" attr.type="string"/>
<key id="PCC" for="edge" attr.name="PCC" attr.type="number"/>
<graph edgedefault="undirected">
<node id="dlp-9-01">
<data key="Label">dlp-9-01</data>
<data key="Cluster_Name">dlp-9-01</data>
<data
key="Accrued_Elements">AAAATA,AAATAT,AAATTA,AAATTAT,AATCAAT,AATTATG,ATAAAT,ATAATT,ATGCAAA,CAAAAT,CAATAA,GCATTT,GTGCCA,TAATTA,TATTGA</
data>
<data key="Density">502</data>
</node>
<node id="ko-7">
<data key="Label">ko-7</data>
<data key="Cluster_Name">ko-7</data>
<data
key="Accrued_Elements">AAAATA,AAATCA,AAATTA,AATCAAT,ATGCAAA,CAAAAT,GAAAAT,GCATTT,TCAATC</
data>
<data key="Density">554</data>
</node>
<node id="otp-16">
<data key="Label">otp-16</data>
<data key="Cluster_Name">otp-16</data>
<data
key="Accrued_Elements">AAATAT,AAATCA,AAATTA,AAATTAC,AATTATG,ATAAAT,ATAATT,ATGCAAA,ATTGAA,CAAAAT,CAATAA,CATTTT,GCATTT,GTAATT,TAATTA,TATTGA,TGTAAT,TTTTTG</
data>
<data key="Density">754</data>
</node>
<node id="robo3-21-02">
<data key="Label">robo3-21-02</data>
<data key="Cluster_Name">robo3-21-02</data>
<data
key="Accrued_Elements">AAAATA,AAATAT,AAATTA,ATAATT,ATGCAAA,ATTGAA,ATTTGCATAA,CAAAAT,CATTTT,GAAAAT,GCATTT</
data>
<data key="Density">540</data>
</node>
<node id="sema1a-19">
<data key="Label">sema1a-19</data>
<data key="Cluster_Name">sema1a-19</data>
<data
key="Accrued_Elements">AAAATA,AAATAT,AAATTA,AAATTAC,AATTATG,ATAAAT,ATAATT,ATGCAAA,ATTTGCATAA,CAAAAT,CAATAA,CATTTT,CCAAAA,GTAATT,GTGCCA,TGTAAT,TTTTTG</
data>
<data key="Density">541</data>
</node>
<node id="traf1-5">
<data key="Label">traf1-5</data>
<data key="Cluster_Name">traf1-5</data>
<data
key="Accrued_Elements">AAAATA,AAAATTA,AAATAT,AAATCA,AAATTA,AAATTAT,AATCAAT,ATAAAT,ATAATT,ATGCAAA,ATTCAAA,ATTGAA,CAATAA,CAATTG,CATTTT,CCAAAA,GAAAAT</
data>
<data key="Density">592</data>
</node>
<edge target="dlp-9-01" source="ko-7">
<data
key="Pairwise_Common_Elements">AAAATA,AAATTA,AATCAAT,ATGCAAA,CAAAAT,GCATTT</
data>
<data key="PCC">4610.0</data>
</edge>
<edge target="dlp-9-01" source="otp-16">
<data
key="Pairwise_Common_Elements">AAATAT,AAATTA,AATTATG,ATAAAT,ATAATT,ATGCAAA,CAAAAT,CAATAA,GCATTT,TAATTA,TATTGA</
data>
<data key="PCC">5570.000000000001</data>
</edge>
<edge target="dlp-9-01" source="robo3-21-02">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,ATAATT,ATGCAAA,CAAAAT,GCATTT</
data>
<data key="PCC">5020.0</data>
</edge>
<edge target="dlp-9-01" source="sema1a-19">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,AATTATG,ATAAAT,ATAATT,ATGCAAA,CAAAAT,CAATAA,GTGCCA</
data>
<data key="PCC">5520.000000000001</data>
</edge>
<edge target="dlp-9-01" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,AAATTAT,AATCAAT,ATAAAT,ATAATT,ATGCAAA,CAATAA</
data>
<data key="PCC">6889.999999999999</data>
</edge>

<edge target="ko-7" source="otp-16">
<data
key="Pairwise_Common_Elements">AAATCA,AAATTA,ATGCAAA,CAAAAT,GCATTT</
data>
<data key="PCC">7080.0</data>
</edge>

<edge target="ko-7" source="robo3-21-02">
<data
key="Pairwise_Common_Elements">AAAATA,AAATTA,ATGCAAA,CAAAAT,GAAAAT,GCATTT</
data>
<data key="PCC">7260.0</data>
</edge>
<edge target="ko-7" source="sema1a-19">
<data key="Pairwise_Common_Elements">AAAATA,AAATTA,ATGCAAA,CAAAAT</

data>
<data key="PCC">7080.0</data>
</edge>

<edge target="ko-7" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAAATA,AAATCA,AAATTA,AATCAAT,ATGCAAA,GAAAAT</
data>
<data key="PCC">1520.0</data>
</edge>
<edge target="otp-16" source="robo3-21-02">
<data
key="Pairwise_Common_Elements">AAATAT,AAATTA,ATAATT,ATGCAAA,ATTGAA,CAAAAT,CATTTT,GCATTT</
data>
<data key="PCC">8129.999999999999</data>
</edge>
<edge target="otp-16" source="sema1a-19">
<data
key="Pairwise_Common_Elements">AAATAT,AAATTA,AAATTAC,AATTATG,ATAAAT,ATAATT,ATGCAAA,CAAAAT,CAATAA,CATTTT,GTAATT,TGTAAT,TTTTTG</
data>
<data key="PCC">8280.0</data>
</edge>
<edge target="otp-16" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAATAT,AAATCA,AAATTA,ATAAAT,ATAATT,ATGCAAA,ATTGAA,CAATAA,CATTTT</
data>
<data key="PCC">8790.0</data>
</edge>
<edge target="robo3-21-02" source="sema1a-19">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,ATAATT,ATGCAAA,ATTTGCATAA,CAAAAT,CATTTT</
data>
<data key="PCC">-1980.0</data>
</edge>
<edge target="robo3-21-02" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,ATAATT,ATGCAAA,ATTGAA,CATTTT,GAAAAT</
data>
<data key="PCC">-2260.0</data>
</edge>
<edge target="sema1a-19" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,ATAAAT,ATAATT,ATGCAAA,CAATAA,CATTTT,CCAAAA</
data>
<data key="PCC">9470.0</data>
</edge>
</graph>
</graphml>


On Jul 18, 2:28 pm, Christian Tannus Lopes <chrtan...@gmail.com>
wrote:

[Christian Tannus Lopes]

Congratulations! You've found a bug!

http://cbio.mskcc.org/cytoscape/bugs/view.php?id=2563

I've already fixed it, but will have to run more tests and prepare a new public release.

In the meantime, you can force the edge-weighted algorithm to work by changing the "PCC" attribute name to "weight", if possible.

Also notice that you cannot set the "PCC" attr.type to "number".

GraphML only accepts boolean, int, long, float, double, or string.

Thanks,

Christian

[Bowen Qiu]

So is there something I have to redownload to make it work? I've
changed the attr.type to double now and the name to "weight". Still
haven't gotten it to work. Is there a specific range the numbers
should ideally fall under in order for the networking to work?

Thanks

Bowen

On Jul 18, 4:18 pm, Christian Tannus Lopes <chrtan...@gmail.com>
wrote:
> Congratulations! You've found a bug!http://cbio.mskcc.org/cytoscape/bugs/view.php?id=2563

> ...
>
> read more »

[Christian Tannus Lopes]

Have you set the layout properly? It works if you open the attached XML file on the demo page (see attached screenshot)?

Example:

var layout = {

    name:    "ForceDirected",

    options: { weightAttr: "weight" }

};

You can also try to change the restLength option, but it only changes the initial spring length.

The graphml key has to set be like this:

<key id="weight" for="edge" attr.name="weight" attr.type="double"/>

Thanks,

Christian

[Bowen Qiu]

Yeah. I still can't get it to work. I've made a smaller graphml file
below. This one just gives an equilateral triangle. Sorry for being so
difficult, but I guess I just have no idea what is going wrong. I've
tried running the file on the demo, and it still comes out as the same
triangle. Is there a limit to which the weight can be? For example I
have some negative numbers (coefficient correlations). Will this throw
off the network?

<graphml xmlns="http://graphml.graphdrawing.org/xmlns"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns
http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd">
<key id="Label" for="all" attr.name="label" attr.type="string"/>
<key id="Cluster_Name" for="node" attr.name="name" attr.type="string"/
>
<key id="Accrued_Elements" for="node" attr.name="accrued_elements"
attr.type="string"/>
<key id="Density" for="node" attr.name="density" attr.type="double"/>
<key id="Pairwise_Common_Elements" for="edge"
attr.name="pairwise_elements" attr.type="string"/>

<key id="weight" for="edge" attr.name="weight" attr.type="double"/>

<graph edgedefault="undirected">
<node id="rpr-7">
<data key="Label">rpr-7</data>
<data key="Cluster_Name">rpr-7</data>
<data
key="Accrued_Elements">AAAAGG,AAATCT,AAATTA,ATAAAT,ATGCAAA,ATTGAA,CCAAAA,GCATAAAT,GCATTT,GTAATT,TAATTA,TGTAAT,TGTCACT,TTTTTG</
data>
<data key="Density">544</data>

</node>
<node id="sema1a-19">
<data key="Label">sema1a-19</data>
<data key="Cluster_Name">sema1a-19</data>
<data
key="Accrued_Elements">AAAATA,AAATAT,AAATTA,AAATTAC,AATTATG,ATAAAT,ATAATT,ATGCAAA,ATTTGCATAA,CAAAAT,CAATAA,CATTTT,CCAAAA,GTAATT,GTGCCA,TGTAAT,TTTTTG</
data>
<data key="Density">541</data>
</node>
<node id="traf1-5">
<data key="Label">traf1-5</data>
<data key="Cluster_Name">traf1-5</data>
<data
key="Accrued_Elements">AAAATA,AAAATTA,AAATAT,AAATCA,AAATTA,AAATTAT,AATCAAT,ATAAAT,ATAATT,ATGCAAA,ATTCAAA,ATTGAA,CAATAA,CAATTG,CATTTT,CCAAAA,GAAAAT</
data>
<data key="Density">592</data>
</node>

<edge target="rpr-7" source="sema1a-19">
<data
key="Pairwise_Common_Elements">AAATTA,ATAAAT,ATGCAAA,CCAAAA,GTAATT,TGTAAT,TTTTTG</
data>
<data key="weight">-4.5</data>
</edge>
<edge target="rpr-7" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAATTA,ATAAAT,ATGCAAA,ATTGAA,CCAAAA</
data>
<data key="weight">41.8</data>

</edge>
<edge target="sema1a-19" source="traf1-5">
<data
key="Pairwise_Common_Elements">AAAATA,AAATAT,AAATTA,ATAAAT,ATAATT,ATGCAAA,CAATAA,CATTTT,CCAAAA</
data>

<data key="weight">-11.700000000000001</data>
</edge>
</graph>
</graphml>

here is my query and options for cytoscape.

<script type="text/javascript">
var vis;
$(document).ready(function() {

// id of Cytoscape Web container div
var div_id = "cytoscapeweb";
var data= "hello";
var txtFile = "";
/*
if (window.XMLHttpRequest){
txtFile = new XMLHttpRequest();
}
else{
txtFile = new ActiveXObject("Microsoft.XMLHTTP");
}
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document
is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the
file.
data = txtFile.responseText;
document.getElementById("cytoscapeweb").innerHTML = data;
}
}
}
txtFile.open("GET", "http://localhost:8080/cisDecoder/docs/
tree3.graphml", true);
txtFile.send();
*/




// initialization options
var options = {
swfPath: "CytoscapeWeb",
flashInstallerPath: "playerProductInstall"
};

vis = new org.cytoscapeweb.Visualization(div_id,
options);
function rand_color() {
function rand_channel() {
return Math.round( Math.random() * 255 );
}

function hex_string(num) {
var ret = num.toString(16);

if (ret.length < 2) {
return "0" + ret;
} else {
return ret;
}
}

var r = rand_channel();
var g = rand_channel();
var b = rand_channel();

return "#" + hex_string(r) + hex_string(g) +
hex_string(b);
}

// visual style we will use
var visual_style = {
global: {
backgroundColor: "#ABCFD6"
},
nodes: {
shape: "Ellipse",
borderWidth: 3,
borderColor: "#ffffff",
size: {
defaultValue: 25,
continuousMapper: { attrName: "density",
minValue: 15, maxValue: 50 }
},
labelHorizontalAnchor: "center"
},
edges: {
color: "#0B94B1",
width: 1
}
};



function filter_pcc(value) {
vis.filter("edges", function(edge) {
return edge.data.pcc >= value;
});
}


vis.ready(function() {
// set the style programmatically

document.getElementById("color").onclick =
function(){
visual_style.global.backgroundColor =
rand_color();
vis.visualStyle(visual_style);
};

// add a listener for when nodes and edges are
clicked
vis.addListener("click", "nodes", function(event)
{
handle_click(event);
})
.addListener("click", "edges", function(event) {
handle_click(event);
});

function handle_click(event) {
var target = event.target;

clear();
print("event.group = " + event.group);
for (var i in target.data) {
var variable_name = i;
var variable_value = target.data[i];
print( "event.target.data." +
variable_name + " = " + variable_value );
}
}

function clear() {
document.getElementById("note").innerHTML =
"";
}

function print(msg) {
document.getElementById("note").innerHTML +=
"<p>" + msg + "</p>";

}

});
// document.getElementById("cytoscapeweb").innerHTML =
"debug";

var draw_options = {

network: txtFile,
// No edge labels
edgeLabelsVisible: false,

layout:{

name: "ForceDirected",
options: {weightAttr: "weight"}

},

// set the style at initialisation
visualStyle: visual_style,

// hide pan zoom
panZoomControlVisible: true
};
// vis.draw(draw_options);
// document.getElementById("cytoscapeweb").innerHTML
="debug";
$.ajax({
url: "http://localhost:8080/
cisDecoder/docs/tree3.graphml",
dataType: "text/plain",
success: function(data){
draw_options.network = data;
txtFile = data;
vis.draw(draw_options);
}
}
);

//document.getElementById("cytoscapeweb").innerHTML =
"debug";
});


function filter_pcc(value) {
vis.filter("edges", function(edge) {
return edge.data.pcc >= value;
});

}

function filter_reset(value) {
vis.filter("edges", function(edge) {
return edge.data.pcc <= value;
});

}

//Implement textual common element edge filter function (later)


</script>


Thanks a million!



On Jul 26, 12:36 pm, Christian Tannus Lopes <chrtan...@gmail.com>
wrote:

> ...
>
> read more »

[Christian Tannus Lopes]

Hi,

Next time, if you want to send your source code, please attached the files instead, because the XML code you sent is malformed.

I can only load the xml file if the "dataType" ajax option is "text", not "text/plain".
Now that I can run the code, I get the attached network (image), which looks correct to me, even if it does not look very nice, since the resulting weighted topology hides one of the edges. But that is just how it is in this case.

Thanks,
Christian

[Bowen Qiu]

Hi Christian,

So I looked into the matter. Apparently when I transfer the files to
another computer and run it on the local host there the map appears
properly. I haven't checked the browser version, but that might what
is causing all the problems. I currently am using Firefox 3.6.17.

Bowen

On Jul 27, 11:34 am, Christian Tannus Lopes <chrtan...@gmail.com>
wrote:

>  network_weight.png
> 21KViewDownload

> ...
>
> read more »

[Bowen Qiu]

Hi,

So I logged back on today, and everything is working. I really don't
know how that happened, but I think it might've had something to do
with my html file not being up to date. So after fiddling around with
pathing and cleaning everything up everything worked perfectly.

Thanks!
Bowen

> ...
>
> read more »

[Hanne Gielis]

I have the same problem. I tried to use "Prefuse force directed layout" to attach continuous values to the length of my edges. 

This was already my interaction variable in the set-up of my network. However, I was not able to select that again as edge attribute so I loaded the variable again as an edge attribute. However, Cytoscape never shows the values that are in there. Afterwards, I can click on the variable as edge attribute and the graph changes but not correctly and when I check back he said "none" as edge attribute. Any idea what the problem can be here?

Many thanks!

Hanne

Op vrijdag 8 juli 2011 19:10:40 UTC+2 schreef Bowen Qiu: