Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visualizing biological graphs in Cytoscape.js

5,725 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.

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/

×