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

1. +
HTML5
JS
CSS3
Cytoscape 3.1 and The Web
Keiichiro
Ono
Lab
Meeting
2/4/2014

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. 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. Data Visualization Tools
http://selection.datavisualization.ch/

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. 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. 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. 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. 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. Integration to Cytoscape
JS
New in Cytoscape 3.1.0:
Export Networks and Visual Styles to Cytoscape.js Format

11. - Cytoscape Networks to Cytoscape.js JSON
- Visual Styles to CSS
JS

12. JS

15. 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)

16. 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

17. JavaScript
- Easy to learn
- Easy to code
- …and extremely easy to write unmaintainable
spaghetti code
That’s why we will provide templates

18. Demo

19. TODO
- Plug into NDEx web site
- More functions
- Expand network
- Fully-featured table
browser
- Code Cleanup &
Documentation
-