Visualizing biological graphs in Cytoscape.js

G R A P H S I N C Y T O S C A P E . J S
V I S U A L I Z I N G B I O L O G I C A L
Ben Keller 
linkedin.com/in/bjkeller
Seattle/Bellevue Graphs - Data, Processing, Algorithms Meetup 
6 May 2014

B I O L O G I C A L G R A P H S

( S I G N A L I N G ) PAT H WAY S
N AT U R E N E U R O S C I E N C E 1 3 , 6 – 7 ( 2 0 1 0 ) D O I : 1 0 . 1 0 3 8 / N N 0 1 1 0 - 6

P R O T E I N - P R O T E I N I N T E R A C T I O N S
A B
http://www.stats.ox.ac.uk/~hamer/research.html

P R O T E I N - P R O T E I N I N T E R A C T I O N S
A B

E X A M P L E P P I G R A P H
ANK3
CABP1
CACNA
2D4
CACNB
3
GNB1
PCBD1
RIMS1
PPM1A
PRKAC
A
RYR2
SRI
CACNA
1C
FAS
FADD
CNTN1
CRKL
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1
B
SCN2A

AT T R I B U T E S
Tell us something about gene/protein:
• Where it occurs
• What it does
• What processes it contributes to
• What diseases it is implicated in
Allow us to ask
• do these genes belong together?
• do they work together?

P R O T E I N - A N N O TAT I O N G R A P H
MeSH: Calcium
GO BP: Metal Ion Transport
GO MF: Gated Channel Activity
GO MF: Cation Channel Activity
OR
MeSH Ion Channel Gating
MeSH: Phosphorylation
MeSH: Intercellular Signaling
Peptides and Proteins
MeSH: Nerve
Tissue Proteins
CRKL
ANK3
CABP1
CACNA
2D4
CACNB
3
GNB1
PCBD1
RIMS1
PPM1A
PRKAC
A
RYR2
SRI
CACNA
1C
FAS
FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1
B
SCN2A
None

C O N C E P T G R A P H
MeSH: Calcium
OR
MeSH: Nerve
Tissue Proteins
CRKL
ANK3
CABP1
CACNA
2D4
CACNB
3
GNB1
PCBD1
RIMS1
PPM1A
PRKAC
A
RYR2
SRI
CACNA
1C
FAS
FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1
B
SCN2A
None
MeSH: Calcium
OR
MeSH: Nerve
Tissue Proteins

MeSH: Calcium
GO MF: Voltage-Gated Ion Channel Activity
MeSH: Signal Transduction
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Rats
MeSH: Nerve Tissue Proteins
CRKL
ANK3
CABP1
CACNA
2D4
CACNB
3
GNB1
PCBD1
RIMS1
PPM1A
PRKAC
A
RYR2
SRI
CACNA
1C
FAS
FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1
B
SCN2A

MeSH: Calcium
OR
MeSH: Nerve
Tissue Proteins
CRKL
ANK3
CABP1
CACNA
2D4
CACNB
3
GNB1
PCBD1
RIMS1
PPM1A
PRKAC
A
RYR2
SRI
CACNA
1C
FAS FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1
B
SCN2A

( J S B I N ) H T M L
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meetup Cytoscape.js Lab</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
<div id="cy" style="height:90%;width:90%;position:absolute;left:0;top:0;"></div>
</body>
</html>
• jQuery
• cytoscape.js
• (your script)
container for graph

J S F I L E
$(document).ready(function(){
//cytoscape code goes here
});

C Y T O S C A P E S E S S I O N
var cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {}
});

G R A P H
var graphelements = {
nodes: [
{ data: { id: 'n1', name: ‘A' } },
{ data: { id: 'n2', name: ‘B' } },
{ data: { id: 'n3', name: ‘C' } },
{ data: { id: 'n4', name: ‘D' } }
],
edges: [
{ data: { id: 'e1', source: 'n1', target: 'n2' } },
{ data: { id: 'e2', source: 'n3', target: 'n2' } },
{ data: { id: 'e3', source: 'n4', target: 'n2' } }
]
};

A D D : S H O W N O D E L A B E L O N H O V E R
cy.on('mouseover','node',function(evt) {
var node = evt.cyTarget;
node.css('content','data(name)');
});
cy.on('mouseout','node',function(evt){
var node = evt.cyTarget;
node.css('*','');
});
(add after session definition)http://jsbin.com/reqeg/12/edit

A D D : S E T U P F O R S T Y L E S
var nodestyle = {};
var edgestyle = {};
!
var stylesheet = cytoscape.stylesheet(). 
selector("node").css(nodestyle).
selector(“edge").css(edgestyle);
!
var cy = cytoscape({
container: document.getElementById('cy'),
style: stylesheet,
ready: function() {}
});
http://jsbin.com/reqeg/11/edit

A D D : S E T N O D E S T Y L E
var nodestyle = {
'font-size': '12pt',
'min-zoomed-font-size': ‘9pt',
'text-halign': 'center',
'text-valign': 'center',
'color': 'white'
};

A D D : M A P P I N G AT T R I B U T E S ( 1 )
var nodestyle = {
'font-size': '12pt',
'min-zoomed-font-size': '9pt',
'text-valign': 'center',
'text-halign': 'center',
'color': 'white',
'width': 'mapData(degree,0,5,20,80)',
'height': 'mapData(degree,0,5,20,80)'
};

A D D : M A P P I N G AT T R I B U T E S ( 2 )
var degmap = {};
var nodes = cy.nodes();
for (var i = 0; i < nodes.length; i++) {
degmap[nodes[i].id()] = { degree: nodes[i].degree() };
}
cy.batchData(degmap);

L AY O U T S
var layoutopts = {
name: 'breadthfirst',
roots: ['n1','n26']
};
cy.layout(layoutopts);
• random
• preset
• grid
• circle
• concentric
• breadthfirst
• arbor *
• cose
• null (for algorithms)

A R B O R ( F O R C E - D I R E C T E D )
<script src="../node_modules/cytoscape/lib/arbor.js"></script>
<script src="../node_modules/cytoscape/dist/cytoscape.min.js"></script>

http://cytoscape.github.io/cytoscape.js/
http://bumbu.github.io/cytoscape.js/debug/

Visualizing biological graphs in Cytoscape.js

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (9)

Similar to Visualizing biological graphs in Cytoscape.js

Similar to Visualizing biological graphs in Cytoscape.js (20)

More from Benjamin Keller

More from Benjamin Keller (7)

Recently uploaded

Recently uploaded (20)

Visualizing biological graphs in Cytoscape.js