Cytoscape and the Web

1,224 views

Published on

Introduction to the new feature for Cytoscape 3.1: export data to Cytoscape.js.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,224
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Cytoscape and the Web

  1. 1. + HTML5 JS CSS3 Cytoscape 3.1 and The Web Keiichiro Ono Lab Meeting 2/4/2014
  2. 2. Background Web technologies are mature enough to implement complex scientific data visualization applications Web is the platform for data sharing ...but Cytoscape was born before HTML5 era
  3. 3. Trends …or New Standards ...but Cytoscape was born before HTML5 era - Prepare/integrate/analyze data with R/Python or traditional desktop applications Visualize & publish it as web apps Lots of new tools & frameworks are available
  4. 4. Data Visualization Tools http://selection.datavisualization.ch/
  5. 5. Background ...but Cytoscape was born before HTML5 era Luckily, University of Toronto has developed a JavaScript library called cytoscape.js Why not integrate it to existing Cytoscape ecosystem?
  6. 6. What is cytoscape.js? A Javascript Library for network visualization, not a web application! Need to write some code to use it on the web browsers…
  7. 7. What is cytoscape.js? Need to write some code to use it on the web browsers… No code/data level compatibility between Cytoscape and Cytoscape.js, but sharing concepts, such as Visual Styles
  8. 8. JS Complete desktop application for network analysis and visualization A Javascript Library for network visualization, not a web application! ! ! Written in Java Written in JavaScript ! ! Expandable by Apps Expandable by Extensions ! ! For Users For Developers
  9. 9. I’m a user, not a programmer! Don’t worry. We will provide some useful utilities and samples to visualize networks created in Cytoscape with cytoscape.js JS
  10. 10. Integration to Cytoscape JS New in Cytoscape 3.1.0: Export Networks and Visual Styles to Cytoscape.js Format
  11. 11. - Cytoscape Networks to Cytoscape.js JSON
 - Visual Styles to CSS JS
  12. 12. JS
  13. 13. Visualize Exported Files Again, you need to write some code to do this But we will provide template HTML5 project code to cover 90% of your use cases, which is:
 ! - Display Network - Display Table Data - Expand network by talking to external services (databases)
  14. 14. Visualize Exported Files Again, you need to write some code to do this But we will provide template HTML5 project code to cover 90% of your use cases, which is:
 ! - Display Network - Display Table Data - Expand network by talking to external services (databases) Bower by Twitter
  15. 15. JavaScript - Easy to learn - Easy to code - …and extremely easy to write unmaintainable spaghetti code That’s why we will provide templates
  16. 16. Demo
  17. 17. TODO - Plug into NDEx web site - More functions - Expand network - Fully-featured table browser - Code Cleanup & Documentation -

×