View markdown source on GitHub

Visualizations: JavaScript Plugins




last_modification Published: Jun 22, 2017
last_modification Last Updated: 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


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: ,

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 .

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 Tutorial Content is licensed under Creative Commons Attribution 4.0 International License.