View markdown source on GitHub

Visualizations: JavaScript Plugins

Contributors

AvatarSaskia Hiltemann AvatarYouri Hoogstrate AvatarBjörn Grüning AvatarAysam Guerler AvatarDannon Baker

Questions

Objectives

last_modification Last modification: Jul 9, 2021

Javascript Plugin Development in Galaxy


Tutorial Overview


Why visualizations?

Animated gif cycling through Anscombe's quartet and various variations that all have the same mean, SD, and correlation but look vastly different to someone's eyes.

X mean: 54.26, X SD: 16.76
Y mean: 47.83, Y SD: 26.93
Corr: -0.06

Speaker Notes Anscombe’s quartet, all these datasets have same mean, standard deviation and correlation, yet when visualizing them it is revealed they have vastly different structures.


Types of visualizations in Galaxy


Which should I use?

Flowchart. Only available on an external website? If yes use a display application. Does it need to be served (e.g. python), if yes use an interactive tool. Is it computationally intensive, then it needs to be a regular tool. Is it written in javascript? Then it shold be a generic plugin. If it passes all these tests it can be a charts plugin.


Charts Visualization Framework


Charts

A shared interface for a wide range of pure JavaScript visualization types i.e. bar diagrams, pie charts, scatter plots, heat maps and others.

Montage of several charts, bar, dot, stacked bar/line, box and whisker, and doughnut charts.

Reference: https://www.nvd3.org , https://www.jqplot.com


Chart Configuration - Bar chart example

A tool form with bar chart options shown on left and right.


If a plugin is unavailable, custom visualization types like this heat map here can be added.

A large zoomed out heatmap is shown with an inset highlighting a small portion.

Charts is able to pre-process large-scale data behind the scenes.

Showing Protein-Protein Interaction data from http://www.compsysbio.org/bacteriome/ .


Charts - PDB viewer example

Configuration for the protein viewer is shown on the left, a 3d structure of a protein shown on the right


Examples of 6 different visualisations in galaxy features an MSA, a couple graphs, RNA structure, and 3d visualisations of proteins


Community-driven plugins

Montage of several logos include D3, jqPlot, BioJS, Cytoscape, and NVD3.


Video Example

Video demonstrating several viz plugins.

Speaker Notes click the image to run the video


Key Points

Thank you!

This material is the result of a collaborative work. Thanks to the Galaxy Training Network and all the contributors! Galaxy Training Network This material is licensed under the Creative Commons Attribution 4.0 International License.