G R A P H S I N C Y T O S C A P E . J SV I S U A L I Z I N G B I O L O G I C A L
Ben Kellerlinkedin.com/in/bjkeller
Seattle/Bellevue Graphs - Data, Processing, Algorithms Meetup6 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 W AY 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
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
CACNA2D4
CACNB3
GNB1
PCBD1
RIMS1
PPM1A
PRKACA
RYR2
SRI
CACNA1C
FAS
FADD
CNTN1
CRKL
HOOK1
KCNC1KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1B
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 TransportGO MF: Gated Channel ActivityGO MF: Cation Channel ActivityORMeSH Ion Channel Gating
MeSH: Phosphorylation
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Nerve Tissue Proteins
CRKL
ANK3
CABP1
CACNA2D4
CACNB3
GNB1
PCBD1
RIMS1
PPM1A
PRKACA
RYR2
SRI
CACNA1C
FAS
FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1B
SCN2A
None
C O N C E P T G R A P H
MeSH: Calcium
GO BP: Metal Ion TransportGO MF: Gated Channel ActivityGO MF: Cation Channel ActivityORMeSH Ion Channel Gating
MeSH: Phosphorylation
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Nerve Tissue Proteins
CRKL
ANK3
CABP1
CACNA2D4
CACNB3
GNB1
PCBD1
RIMS1
PPM1A
PRKACA
RYR2
SRI
CACNA1C
FAS
FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1B
SCN2A
None
MeSH: Calcium
GO BP: Metal Ion TransportGO MF: Gated Channel ActivityGO MF: Cation Channel ActivityORMeSH Ion Channel Gating
MeSH: Phosphorylation
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Nerve Tissue Proteins
MeSH: Calcium
GO BP: Metal Ion TransportGO MF: Gated Channel ActivityGO MF: Cation Channel Activity
GO MF: Voltage-Gated Ion Channel Activity
MeSH: Phosphorylation
MeSH: Signal Transduction
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Rats
MeSH: Nerve Tissue Proteins
MeSH Ion Channel Gating
CRKL
ANK3
CABP1
CACNA2D4
CACNB3
GNB1
PCBD1
RIMS1
PPM1A
PRKACA
RYR2
SRI
CACNA1C
FASFADD
CNTN1
HOOK1
KCNC1 KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1B
SCN2A
MeSH: Calcium
GO BP: Metal Ion TransportGO MF: Gated Channel ActivityGO MF: Cation Channel ActivityORMeSH Ion Channel Gating
MeSH: Phosphorylation
MeSH: Intercellular Signaling Peptides and Proteins
MeSH: Nerve Tissue Proteins
CRKL
ANK3
CABP1
CACNA2D4
CACNB3
GNB1
PCBD1
RIMS1
PPM1A
PRKACA
RYR2
SRI
CACNA1C
FAS FADD
CNTN1
HOOK1
KCNC1
KCNC2
SMAD3
SMAD2
PIK3R1
SPTBN4
SCN1B
SCNN1B
SCN2A
C Y T O S C A P E . J S
http://jsbin.com/reqeg/1/edit
( 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 Hvar 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' } } ] };
cy.load(graphelements);
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' };
http://jsbin.com/reqeg/10/edit
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)' };
http://jsbin.com/reqeg/9/edit
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);
http://jsbin.com/reqeg/7/edit
http://jsbin.com/vujug/2/edit
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/