Cytoscape and the Web
-
Upload
keiichiro-ono -
Category
Technology
-
view
104 -
download
0
description
Transcript of Cytoscape and the Web
![Page 1: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/1.jpg)
Cytoscape 3.1 and The Web
CSS3
JS
HTML5
+
Keiichiro Ono
Lab Meeting 2/4/2014
![Page 2: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/2.jpg)
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
![Page 3: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/3.jpg)
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
![Page 4: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/4.jpg)
Data Visualization Tools
http://selection.datavisualization.ch/
![Page 5: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/5.jpg)
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
![Page 6: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/6.jpg)
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…
![Page 7: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/7.jpg)
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…
![Page 8: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/8.jpg)
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
![Page 9: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/9.jpg)
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
![Page 10: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/10.jpg)
Integration to Cytoscape
New in Cytoscape 3.1.0: Export Networks and Visual Styles to Cytoscape.js Format
JS
![Page 11: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/11.jpg)
- Cytoscape Networks to Cytoscape.js JSON- Visual Styles to CSS
JS
![Page 12: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/12.jpg)
JS
![Page 13: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/13.jpg)
![Page 14: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/14.jpg)
![Page 15: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/15.jpg)
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
![Page 16: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/16.jpg)
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
![Page 17: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/17.jpg)
JavaScript
- Easy to learn - Easy to code - …and extremely easy to write unmaintainable
spaghetti code
That’s why we will provide templates
![Page 19: Cytoscape and the Web](https://reader033.fdocuments.us/reader033/viewer/2022051819/54c684564a7959b01a8b4572/html5/thumbnails/19.jpg)
TODO
- Plug into NDEx web site - More functions
- Expand network - Fully-featured table
browser - Code Cleanup &
Documentation
-