Forum:Directions In Bioinformatics And Web-Based Data Visualization: Revisiting Javascript?

Question

[Josh Herr]

Over the past few years I've been sensing a trend in bioinformatics towards the development of scripts and stand-alone platforms for graphical data analysis and visualization coupled with statistical analysis -- all available in web applications – i.e. more cloud computing.

I do feel like many of the visualization programs I see being developed (see here for a good list) are in JavaScript and the frequency of dynamic web-based graphical displays of genomic data using the language are increasing.

The use of JavaScript for bioinformatics has been addressed here almost two years ago. Here are some links with "current" bioinformatics uses: The Sequence Manipulation Suite, bio-js, JBio, JBrowse.

My questions (from a novice scripter point-of-view) are:

What is your input on trying to learn JavaScript for graphical display of bioinformatic data?

Is knowing a little JavaScript/Java important for a bioinformatician, especially in the current direction of the discipline? (I guess a re-wording of the classic question: Is it better to be a generalist or a specialist?)

I haven’t really delved into Python for graphics too, but does anyone see a reason I should give JavaScript a try instead of just developing my Python and R proficiency in the area of data visualization? Is HTML5 going anywhere with bioinformatics data visualization for the web?

Just curious what your points of view might be...

[Martin A Hansen]

You are missing Jbrowse from your impressive.

[Josh Herr]

Thank you for the reminder! I have edited the post to include it.

Answer 1

[Ben]

Disclaimer: I have little experience with JavaScript. But for my 2¢ I have been impressed by (e.g.) Circos plots -- it can certainly produce nice cover images -- but in terms of useful data visualisation I think they're often overused. To your more general question, if your aim is to produce web applications then Javascript is of course a strong choice but there are other methods. For example are you aware of R packages such as Shiny? I think it's early days but there's future promise for more web integration of R, and in terms of producing static plots it's hard to beat.

Regarding Python, there are merits to using Matplotlib is you're already very familiar with the language but R is far superior in terms of breadth of packages.

[Josh Herr]

You're not the first person who has mentioned to me that I should investigate Shiny. I've also been told to give D3.js a try on the JavaScript side, so I will have to test drive both. Thanks for your input.

[Ben]

Cool, I'd be interested to hear how you get on.

Answer 2

[Damian Kao]

I come from a web developer's background, so I am a huge proponent of using javascript/html/css for data visualizations. I agree with the recently released oneZoom (http://www.onezoom.org/) tool that articulates the idea of escaping the paper paradigm. We are not taking advantage of web publishing by constructing figures meant for paper publishing.

Client-side browser technology has come a long way since Netscape. I think people are starting to see that we can actually load hundreds of thousands of data points into a browser and visualize it efficiently. I can easily visualize a MA-plot in a browser with 25,000 data points. I've actually written a couple of script that'll animate MA-plots from one time point to the next time-point in order to see how differentially regulated genes change along a time course.

The advantage of using browser tech to generate figures is that anyone with a modern browser can open it without having to install a server or packages. This also leads to the biggest problem I see with using browser technology which is the same-origin policy adopted by all major browsers. Basically, browsers cannot load local files through AJAX unless you set up a local server. To get around that, people had to resort to use the slower JSONP method which tricks the browser into loading data as a pseudo-javascript library. This is the method I've been using for most of the data visualizations I've done in javascript/html/css.

I have several blog posts on data visualization in javascript (mainly using d3.js): http://blog.nextgenetics.net/?c=data-visualization

[Ben]

+1 Great answer. The d3 + Python series on your blog is really interesting, I look forward to the rest of it!

[Josh Herr]

+1 for me too. Thanks for your links to your blog posts.

[Josh Herr]

Just found this awesome collection of JavaScript links on your blog. Thanks for posting this, it's excellent!

Answer 3

[Alex Reynolds]

If you use JSON as a data interchange format between server and client, you can enable server-side compression of data so that the text exchanged can actually be a very small fraction of the full text file. Add caching support to that and you can end up with a speedy app (depending on the client's capabilities, of course).

I used d3.js to develop a regulatory network visualization tool we published with a paper for Cell, and it isn't too bad. If anything, staying away from Flash broadens the number of visitors who can visit our site; modern browsers provide mostly excellent support for HTML5 and SVG (with the notable exception of Microsoft's IE, which has inexplicably chosen to remain a proprietary web browser in an environment where Microsoft no longer has the influence to maintain its hegemony).

[girlwithglasses]

WebApollo (http://gmod.org/wiki/WebApollo) is a JS-based sequence annotation viewer/editor that sends data back and forth between server and client as JSON; because the amounts of data exchanged are tiny, you can have multiple concurrent editing sessions going on with real time updating. I would imagine that more and more applications are going to use this kind of model--small data packets going back and forth between client and server--rather than more traditional methods of editing and storing data in version control systems. As long as you have a solid conflict-resolution policy (easier said that done), it makes collaborative work so much easier!

Answer 4

[Philipp Bayer]

The problem I have with Javascript (and HTML5) is that the user's browser has to generate the visualisation - I think in most cases, that's too much data that has to be transferred for the sake of a visualisation.

Here's one project that (I think) does a reasonably good visualisation of biological data basically without JS: http://drzompo.uni-muenster.de/sequence/show/1818 (click on Sequence Diagram or Coverage Diagram). These graphs are generated server-side to lessen the load on the user.

Especially in life-sciences outside of bioinformatics I see a tendency to use older browsers (and IE...) so HTML5 might not be the best choice if your users are, for example, lab-biologists.

Personally, I'd rather have an un-animated static graph generated in R or Python on a page than a dynamic, snazzy-looking but slow (and error-prone without telling me why!) JS-graph.

[zoldello]

Nice comment.

However, by 2015, this comment is closer to an older way of doing things. There is a strong push for browsers to always be evergreen (Chrome, Firefox and Opera) and Microsoft is moving in this direction with Edge in Windows 10. Additionally, Microsoft will make a strong push toward forcing user to use new browsers in 2016 by not supporting older browser- Read this article. So, not only is HTML5 important, it is becoming a deciding factor with many pushes towards it. JavaScript transpilers is bring ES6 and even ES7 and ES8 proposed features to browsers.

Use of JavaScript web frameworks like Angular, Aurelia and Knockout and visualization tools like D#.js makes it easier to use JSON to build complicated visualization tools on the web and makes it more efficient and faster (when you cannot cache) to do them on the client than server.

Answer 5

[Sukhi Singh]

Bioinformatics have been moving forward significantly in terms of web applications and online data visualizations. I was really keen on converting all my R and perl codes to a web application, and did that for three web applications, WebModeller (web app for CLI of Modeller), BugPan Interface (A structured spreadsheet web interface for Neurophysiology data analysis-controls the terminal(STDIO) for a newly developed language BugPan) and csv plottter, using HighCharts JavaScript library.

My moral went down, when I started working with NGS, when the raw data size increased exponentially, though Galaxy is an answer to that. Still, it really depends whether your whole team is working on it, or you alone. I would absolutely recommend learning Prototype Javascript Framework which you can include in your perl/python code+R, to create really strong web applications.

Circos is an amazing visualization tool, though the web application is just a mere demo of it. HTML5 is being used these days in Bioinformatics but mostly for plots and little integration with perl/python, not as a standalone programs, that I have seen. 1 2 3.

Another thing I would highly recommend is to learn AJAX, it forms the core of fast, responsive and user friendly applications. Read this paper here, how AJAX is helping Bioinformatics Web Applications.

Cheers

[Josh Herr]

+1 Thank you for the suggestions. I have been using Circos for a while and knowing a little perl helps there. I am checking out Prototype.JS right now... Thanks for your HTML5 links too. My only experience with HTML5 has been with tweaking Krona to show some of my metagenomics data on the web.