visualizing biological graphs in cytoscape.js

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

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





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





MeSH: Calcium

GO BP: Metal Ion TransportGO MF: Gated Channel ActivityGO MF: Cation Channel Activity

GO MF: Voltage-Gated Ion Channel Activity


MeSH: Signal Transduction


MeSH: Rats


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





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() {} });



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);



http://jsbin.com/vujug/2/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/

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

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

visualizing biological graphs in cytoscape.js

Data & Analytics