Visualizations: JavaScript Plugins

name: inverse
layout: true
class: center, middle, inverse

</span></div>

</span></div>

---

# Visualizations: JavaScript Plugins

<div class="contributors-line">
		<a href="/training-material/hall-of-fame/shiltemann/" class="contributor-badge contributor-shiltemann"><img src="/training-material/assets/images/orcid.png" alt="orcid logo" width="36" height="36"/><img src="https://avatars.githubusercontent.com/shiltemann?s=36" alt="Saskia Hiltemann avatar" width="36" class="avatar" />
    Saskia Hiltemann</a><a href="/training-material/hall-of-fame/yhoogstrate/" class="contributor-badge contributor-yhoogstrate"><img src="https://avatars.githubusercontent.com/yhoogstrate?s=36" alt="Youri Hoogstrate avatar" width="36" class="avatar" />
    Youri Hoogstrate</a><a href="/training-material/hall-of-fame/bgruening/" class="contributor-badge contributor-bgruening"><img src="/training-material/assets/images/orcid.png" alt="orcid logo" width="36" height="36"/><img src="https://avatars.githubusercontent.com/bgruening?s=36" alt="Björn Grüning avatar" width="36" class="avatar" />
    Björn Grüning</a><a href="/training-material/hall-of-fame/guerler/" class="contributor-badge contributor-guerler"><img src="https://avatars.githubusercontent.com/guerler?s=36" alt="Aysam Guerler avatar" width="36" class="avatar" />
    Aysam Guerler</a><a href="/training-material/hall-of-fame/dannon/" class="contributor-badge contributor-dannon"><img src="https://avatars.githubusercontent.com/dannon?s=36" alt="Dannon Baker avatar" width="36" class="avatar" />
    Dannon Baker</a>
	</div>

</div>

<div class="footnote" style="bottom: 8em;">
  <i class="far fa-calendar" aria-hidden="true"></i><span class="visually-hidden">last_modification</span> Updated:   
  <i class="fas fa-fingerprint" aria-hidden="true"></i><span class="visually-hidden">purl</span><abbr title="Persistent URL">PURL</abbr>: <a href="https://gxy.io/GTN:S00053">gxy.io/GTN:S00053</a>
</div>

<div class="footnote" style="bottom: 5em;">

<i class="fas fa-file-alt" aria-hidden="true"></i><span class="visually-hidden">text-document</span><a href="slides-plain.html"> Plain-text slides</a> |

</div>

<div class="footnote" style="bottom: 2em;">
    <strong>Tip: </strong>press <kbd>P</kbd> to view the presenter notes
    | <i class="fa fa-arrows" aria-hidden="true"></i><span class="visually-hidden">arrow-keys</span> Use arrow keys to move between slides

</div>

???
Presenter notes contain extra information which might be useful if you intend to use these slides for teaching.

Press `P` again to switch presenter notes off

Press `C` to create a new window where the same presentation will be displayed.
This window is linked to the main window. Changing slides on one will cause the
slide to change on the other.

Useful when presenting.

---

### <i class="far fa-question-circle" aria-hidden="true"></i><span class="visually-hidden">question</span> Questions

- How can I make a custom JavaScript plugin?

---

### <i class="fas fa-bullseye" aria-hidden="true"></i><span class="visually-hidden">objectives</span> Objectives

- Learn how to add custom JavaScript plugins using the Galaxy Charts framework

---

# Javascript Plugin Development in Galaxy

---

## Tutorial Overview

- Why visualization?

- What are the available visualization types and which one should I use?

- Introduction to Charts

- Step-by-step guide to adding new visualizations

---

## 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.](../../images/anscombe-quartet-animated.gif)

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

???
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

- **Trackster** - built-in genome browser
- **Display applications**
  - UCSC Genome Browser
  - IGV
- **Galaxy tools**
  - JBrowse
  - Krona
- **Visualization plugins**
  - Charts
  - Generic
- **Interactive Environments**
  - Jupyter/Rstudio
  - IOBIO (bam/vcf visualizations)
  - Phinch (metagenomics visualizations)

---

## 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.](../../images/which_viz_flowchart.png)

---

## 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.](../../images/charts_examples.png)

Reference: [https://www.nvd3.org ](https://www.nvd3.org), [https://www.jqplot.com ](https://www.jqplot.com)

---

## Chart Configuration - Bar chart example

![A tool form with bar chart options shown on left and right.](../../images/charts_bar_config.png)

---

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.](../../images/charts_heatmap.png)

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

Showing Protein-Protein Interaction data from [http://www.compsysbio.org/bacteriome/ ](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](../../images/charts_pdbviewer.png)

---

![Examples of 6 different visualisations in galaxy features an MSA, a couple graphs, RNA structure, and 3d visualisations of proteins](../../images/charts_examples2.png)

---

## Community-driven plugins

![Montage of several logos include D3, jqPlot, BioJS, Cytoscape, and NVD3.](../../images/charts_community.png)

---

## Video Example

[![Video demonstrating several viz plugins.](../../images/charts_video.png)](https://vimeo.com/222709200)

???
click the image to run the video

---
### <i class="fas fa-key" aria-hidden="true"></i><span class="visually-hidden">keypoints</span> Key points

- Charts is a pluggable extension system for JS-only visualizations

- With three key files we can integrate any JS-only visualization into Galaxy

---

## Thank You!

This material is the result of a collaborative work. Thanks to the [Galaxy Training Network](https://training.galaxyproject.org) and all the contributors!

<div class="contributors-line">
		Authors: <a href="/training-material/hall-of-fame/shiltemann/" class="contributor-badge contributor-shiltemann"><img src="/training-material/assets/images/orcid.png" alt="orcid logo" width="36" height="36"/><img src="https://avatars.githubusercontent.com/shiltemann?s=36" alt="Saskia Hiltemann avatar" width="36" class="avatar" />
    Saskia Hiltemann</a><a href="/training-material/hall-of-fame/yhoogstrate/" class="contributor-badge contributor-yhoogstrate"><img src="https://avatars.githubusercontent.com/yhoogstrate?s=36" alt="Youri Hoogstrate avatar" width="36" class="avatar" />
    Youri Hoogstrate</a><a href="/training-material/hall-of-fame/bgruening/" class="contributor-badge contributor-bgruening"><img src="/training-material/assets/images/orcid.png" alt="orcid logo" width="36" height="36"/><img src="https://avatars.githubusercontent.com/bgruening?s=36" alt="Björn Grüning avatar" width="36" class="avatar" />
    Björn Grüning</a><a href="/training-material/hall-of-fame/guerler/" class="contributor-badge contributor-guerler"><img src="https://avatars.githubusercontent.com/guerler?s=36" alt="Aysam Guerler avatar" width="36" class="avatar" />
    Aysam Guerler</a><a href="/training-material/hall-of-fame/dannon/" class="contributor-badge contributor-dannon"><img src="https://avatars.githubusercontent.com/dannon?s=36" alt="Dannon Baker avatar" width="36" class="avatar" />
    Dannon Baker</a>
	</div>

</div>

</div>

Tutorial Content is licensed under <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.<br/>