Question about some features in Cytoscape.js (or D3.js)

Question

[tunl]

We need to use a network visualization tool to display our protein interaction network.

We need to automatically represent different types of nodes in different shapes and colors, represent different node prizes in varying darkness of node, and represent different edge weights in varying width of edge. Currently we are able to set these manually in Cytoscape. I am wondering what are the programming ways to set these automatically in Cytoscape.js?

We are also looking for the following features that we can automatically display (automatically set through programming) :

(1) show arrows on edges.

(2) show different color on the border of node.

(3) place nodes in layers (at bottom, middle, top locations of the window) for different types of nodes.

Can Cytoscape.js support the above features?

What about D3.js?

Would you recommend Cytoscape.js or D3.js for the above purpose?

Thank you very much for your advice!

[LLTommy]

I don't know if cytoscape supports all this, but I would think so. To do this from scratch with no previous d3 experience might take a while, so I am not sure if that is the way to go..... but there are many other javascript libraries out there, there is more than d3!

Anyway, things you should also think about - how many nodes you want to display? Does this have to be interactive? Do you want to have this on a website or do you want to create 'just images'? - because if so you, you can also look into other technologies than javascript!

[tunl]

Thank you so much for your advice!

We'd need to put this on a website. And the number of nodes could be a lot and is up to the user's input. We will set these features by default through programming, but users can change other settings manually if they want. So I guess we'd need it to be interactive.

So you mean Cytoscape.js is better than D3.js for these features?

Thanks a lot!

[LLTommy]

As Alex mentioned below, of course you can do these things with d3. But still I say d3 is not the only option. Do you have javascript programmers in your team? What is your timeframe for this project? Is the backend infrastructure in place already - e.g. is the API that serves the data implemented and is 'only' the javascript part missing (and is this API available? Have you thought that the API structure already?)? Also - if I ask about the number of nodes 'a lot' is no real answer. :p. You have to think about it, if we talk about 100s of nodes, it is hard at a certain point to make a graph still useful. If we talk 1000s of nodes, in addition, you might (will) also face performance issues.

You could do all or most of these things with d3, another library that I like and which can do almost all the things you ask for, is vis js - it is not as flexible as d3, but on the other hand less complicated - so if you have no one with javascript experience and/or d3 experience, you might want to look at it. One feature that I see as maybe challenging is your request for 'layers'. Potentially, if you don't want to spent too much time on this and are happy not to have all features, we could also force your data into this ontology visualisation.

[tunl]

Thank you a lot for your advice!

I’m a java programmer, but I never used javascript before. Could you please give me some ideas about how hard (and how long) it would be to pick up javascript for someone who can program in java?

So if Cytoscape.js can support these features, does it mean Cytoscape.js already has “Extensions” which we could use to support these features?

I am not very clear about what API you are referring to here? Could you please elaborate on this a little bit?

Thank you so much!

[LLTommy]

I did not talk about cytoscape (check the post again) since I never did programming with it so I can not answer these questions and can not compare it with other frameworks.

It is impossible to say 'how long it would take' to pick up javascript. Javascript, just like java, is a pretty big language so you can also spend your entire career 'just' doing javascript and learning new stuff. Javascript is different than Java and I don't know your Java/prorgamming skills in first place, so I don't know how to answer that question.

However, if you have no experience with javascript/css/html (because you will need the others as well!), then it is save to assume that we rather talk about months, not weeks for you to finish this task. In web development, there is also a huge difference between making a rough prototype work and to make it 'production' ready - meaning that it looks good with all the details working. The small details need a lot of time.

Also, just from your question, it seems that you don't know too much about webdev - and if that is the case, there is a lot more to consider/learn than only javascript. If you want to display dynamically a protein interaction network. How is that data making its way to the browser? I figured that you have a database and that you extract relevant data from it and ship it via an API that javascript could then access. How did you plan to offer the raw data? Where is/do you plan to store the raw data? Without data there is no visualisation!

d3 is powerful as Alex pointed out, however if you have no experience with webdev and javascript it is the wrong place to start, in my opinion. Or at least there are a lot of basics you have to learn first before you can go there.

So that all comes back to the question I had at the beginning. What is your timeframe, how much time do you want to invest in this, how important is this visualisation to you (your group?). And depending on this you might have to make a decision.... that can be to drop the whole plan, to invest the time to do it yourself and learn about all these things or to hire somebody with the skills as Alex pointed out, which obviously costs money but will get you there way quicker.

Answer 1

[Alex Reynolds]

The d3 library will let you do everything you're asking about.

Some samples are out there for rendering force-directed directional graphs in d3, for instance: http://bl.ocks.org/d3noob/5141278

To annotate a graph node, circle SVG elements have stroke and fill parameters that let you set the color and width of the edge and interior of a node.

If you need to show multiple graphs in one application window (layers?), I'm not sure that Cytoscape does this, but you can absolutely do this with d3 by assigning a unique id name to every element in the SVG document. (I use this approach for my regulatory network viewer to show networks from two cell types next to each other, for instance.)

If you want other features not on your list, like graph analysis algorithms — say, like running A* to find the shortest path between two nodes — that functionality is not really part of d3, although you could write them for your graph, depending on your graph's underlying data structure. Doing those sorts of tasks is probably where Cytoscape is better than d3.

The d3.js library will definitely give you the most flexibility to do what is on your shopping list, but you'll have to roll up your sleeves and write some code.

[tunl]

Thank you so much for your advice!

Actually, what I mean about “we need to show the network in layers” is that we have 3 different types of nodes, we want to put each type of nodes at different locations (bottom, middle, and top) of the window, but there are edges between different types of nodes. They are not separate graphs (still just one network). Can Cytoscape.js support this? What about D3.js?

So for D3.js, in terms of “you'll have to roll up your sleeves and write some code”, for someone like me without javascript experience (but can program in Java), how hard would it be? How much of coding would be involved?

Thanks a lot!

[Alex Reynolds]

Java and Javascript are different enough — and the code style that d3 uses is also somewhat unique to it — that I would suggest you hire a JS coder.

[tunl]

Thanks a lot!

So Cytoscape.js is easier to program with than D3.js right? If I go with Cytoscape.js by sacrificing some features, how hard would it be for me to pick up Javascript and work with Cytoscape.js?

Thanks again!

[Alex Reynolds]

I think you'll want a programmer knowledgeable in JavaScript, but that's just my opinion.