Visualizing biological graphs in Cytoscape.js

4,591 views

Published on

Discusses using Cytoscape.js to use attributes to annotate a molecular interaction graph. Walks through example with links to working code on JSBin.

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
4,591
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
63
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Visualizing biological graphs in Cytoscape.js

  1. 1. 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
  2. 2. B I O L O G I C A L G R A P H S
  3. 3. ( 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
  4. 4. 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
  5. 5. 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
  6. 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
  7. 7. 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
  8. 8. 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?
  9. 9. 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
  10. 10. C O N C E P T 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 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
  11. 11. MeSH: Calcium GO BP: Metal Ion Transport GO MF: Gated Channel Activity GO 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 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
  12. 12. 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
  13. 13. C Y T O S C A P E . J S
  14. 14. http://jsbin.com/reqeg/1/edit
  15. 15. ( 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
  16. 16. J S F I L E $(document).ready(function(){ //cytoscape code goes here });
  17. 17. 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() {} });
  18. 18. 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' } } ] };
  19. 19. cy.load(graphelements);
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. http://jsbin.com/vujug/2/edit
  26. 26. 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)
  27. 27. 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>
  28. 28. http://cytoscape.github.io/cytoscape.js/ http://bumbu.github.io/cytoscape.js/debug/

×