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

Demo

TODO

- Plug into NDEx web site - More functions

- Expand network - Fully-featured table

browser - Code Cleanup &

Documentation

-