Viewing Multiple Interactive Plots With plotly And trelliscopejs

For uRos2022 Conference

Jeremy Selva

jauntyjjs.github.io/uRos2022

Introduction to Lipids

Lipids are organic compounds that are mostly insoluble in polar solvents like water.

The most common ones are cholesterol and triglycerides in blood lipid panel test.

First figure on the top left is a picture of a trained medical professional drawing blood samples from a person's arm symbolising a blood lipid panel test.

How Lipids are measured (Targeted Lipidomics)

Figure showing the workflow of how lipids are measured in a targeted lipidomics settings. Samples are first converted to lipid extracts. From a given list of transitions to measure, lipids in the extracts are measured using liquid chromatography and mass spectrometry. In the example, a transition from an internal standard Ceramide d eighteen one twelve zero is measured. This results in chromatogram peaks which the user needs to integrate the area under curve. In the case of the internal standard Ceramide d 18 1 12 0, it is four hundred and seventy nine thousand and twenty five. After the peaks are integrated for all samples and transtions, the peak area data are exported for further processing.

Quality Control (QC) Samples

QC samples helps to check the severity of variation from external sources such as contaminant ions.

We want to keep molecules that gives a low variation on the QC samples.

Plots are exported as pages in a pdf file.

Figure showing an injection sequence of internal standard Ceramide d eighteen one twelve zero as a bar chart. The y axis is peak area while the x axis is the injection sequence. The different colours on the bar chart repsresent the different QC sample type. The important ones are the ones in blue representing the BQC. The coefficient of variation of the BQC is around 0.085 which is a low value. Hence, the internal standard Ceramide d eighteen one twelve zero has a low interference from unwanted sources. This injection sequence bar chart is exported as a pdf file.

Motivation for using plotly and trelliscopejs

Today’s targeted lipidomics workflow can measure up to a few hundred molecules.

This gives a pdf file of over 500 pages.

Looking at these static plot individually to gain insights is tedious.


Figure showing an injection sequence

Motivation for using plotly and trelliscopejs

Out of > 500 molecules,

  • Can I have more info about the outlying samples in the red box ?
  • How many Ceramides have BQC CV over 20% ?
  • Can you plot the same data as a Raincloud Plot ?

Figure showing an injection sequence

Motivation for using plotly and trelliscopejs

Shiny was considered but

  • Lack expertises to maintain a secure web server to run Shiny applications.

  • Cannot expect collaborators/managers to install/run R packages and code to rebuild the Shiny application just to view the results.

Use plotly to make plots interactive.

Use trelliscopejs to explore interactive plots in an effective way and results distribution.

Figure showing the a workflow using plotly and trelliscopejs. plotly and trelliscopejs, represented by ther logos, are used to create a folder called Dilution Plot Folder. The Dilution Plot Folder contains a appfile folder, a lib folder and a html file call index. The folder is then compressed into a zip folder called Dilution Plot Folder.

Guidelines

A walk through example using Quarto is created on the below GitHub page.

Figure shows a walk through guide to create a Quarto interactive document with the use of plotly and trelliscopejs.

Examples

Exported examples are found under the Releases section in the below GitHub page.


Figure showing a GitHub page highlighting where the Releases section is. Double clicking on the Releases section will bring users to the exported examples which can be downloaded as zip files.

References

trelliscopejs Examples

trelliscopejs Presentation

Thank you and enjoy the conference…

Figure showing two workers praising the presenter for providing a good visualisation report.