Cytoscape and the Web
-
Upload
keiichiro-ono -
Category
Technology
-
view
104 -
download
0
description
Transcript of Cytoscape and the Web
Cytoscape 3.1 and The Web
CSS3
JS
HTML5
+
Keiichiro Ono
Lab Meeting 2/4/2014
Web is the platform for data sharing
...but Cytoscape was born before HTML5 era
Web technologies are mature enough to implement complex scientific data visualization applications
Background
Lots of new tools & frameworks are available
...but Cytoscape was born before HTML5 era
- Prepare/integrate/analyze data with R/Python or traditional desktop applications
- Visualize & publish it as web apps
Trends …or New Standards
Data Visualization Tools
http://selection.datavisualization.ch/
Background
...but Cytoscape was born before HTML5 era
Why not integrate it to existing Cytoscape ecosystem?
Luckily, University of Toronto has developed a JavaScript library called cytoscape.js
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…
What is cytoscape.js?
No code/data level compatibility between Cytoscape and Cytoscape.js, but sharing concepts, such as Visual Styles
Need to write some code to use it on the web browsers…
Complete desktop application for network
analysis and visualization !
Written in Java !
Expandable by Apps !
For Users
A Javascript Library for network visualization, not a web application!
!Written in JavaScript
!Expandable by Extensions
!For Developers
JS
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
Integration to Cytoscape
New in Cytoscape 3.1.0: Export Networks and Visual Styles to Cytoscape.js Format
JS
- Cytoscape Networks to Cytoscape.js JSON- Visual Styles to CSS
JS
JS
Visualize Exported Files
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)
Again, you need to write some code to do this
Visualize Exported Files
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)
Again, you need to write some code to do this
Bower by Twitter
JavaScript
- Easy to learn - Easy to code - …and extremely easy to write unmaintainable
spaghetti code
That’s why we will provide templates
TODO
- Plug into NDEx web site - More functions
- Expand network - Fully-featured table
browser - Code Cleanup &
Documentation
-