Forum: Directions In Bioinformatics And Web-Based Data Visualization: Revisiting Javascript?
gravatar for Josh Herr
8.2 years ago by
Josh Herr5.7k
University of Nebraska
Josh Herr5.7k wrote:

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.

Bio-Javascript? 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...

data forum visualization python R • 6.0k views
ADD COMMENTlink modified 8.2 years ago by Damian Kao15k • written 8.2 years ago by Josh Herr5.7k

You are missing Jbrowse from your impressive.

ADD REPLYlink written 8.2 years ago by Martin A Hansen3.0k

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

ADD REPLYlink written 8.2 years ago by Josh Herr5.7k
gravatar for Ben
8.2 years ago by
Edinburgh, UK
Ben2.0k wrote:

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.

ADD COMMENTlink modified 8.2 years ago • written 8.2 years ago by Ben2.0k

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.

ADD REPLYlink modified 8.2 years ago • written 8.2 years ago by Josh Herr5.7k

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

ADD REPLYlink written 8.2 years ago by Ben2.0k
gravatar for Damian Kao
8.2 years ago by
Damian Kao15k
Damian Kao15k wrote:

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 ( 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):

ADD COMMENTlink modified 8.2 years ago • written 8.2 years ago by Damian Kao15k

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

ADD REPLYlink written 8.2 years ago by Ben2.0k

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

ADD REPLYlink written 8.2 years ago by Josh Herr5.7k

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

ADD REPLYlink modified 8.2 years ago • written 8.2 years ago by Josh Herr5.7k
gravatar for Alex Reynolds
8.2 years ago by
Alex Reynolds31k
Seattle, WA USA
Alex Reynolds31k wrote:

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

ADD COMMENTlink modified 5.4 years ago • written 8.2 years ago by Alex Reynolds31k

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!

ADD REPLYlink written 8.0 years ago by girlwithglasses280
gravatar for Philipp Bayer
8.2 years ago by
Philipp Bayer6.9k
Philipp Bayer6.9k wrote:

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: (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.

ADD COMMENTlink written 8.2 years ago by Philipp Bayer6.9k

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


ADD REPLYlink modified 5.4 years ago • written 5.4 years ago by zoldello0
gravatar for Sukhi Singh
8.2 years ago by
Sukhi Singh10k
Sukhi Singh10k wrote:

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.


ADD COMMENTlink written 8.2 years ago by Sukhi Singh10k

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

ADD REPLYlink modified 8.2 years ago • written 8.2 years ago by Josh Herr5.7k
Please log in to add an answer.


Use of this site constitutes acceptance of our User Agreement and Privacy Policy.
Powered by Biostar version 2.3.0
Traffic: 2323 users visited in the last hour