 Hello everyone, I am Jeremy and thank you all for listening to this presentation titled Viewing Multiple Interactive Plots Using Plotly and Tritoscope.js. Currently I am working in a lab which deals with a lot of lipids, hence I would like to start this presentation with an introduction of what lipids are. Lipids are organic compounds that are mostly insoluble in polar solvents such as water. Most common lipids are triglycerides and cholesterol, measured in the blood lipid panel test. The cell membrane is often described as a forceful lipid bilayer. Forceful lipid is another class of lipids by itself. A less known lipid called ceramide can be found in the skin used as a protective barrier as well as cell signalling during the wound healing and immunity response process. Given a sample, how does our lab measure the lipid inside, especially the uncommon ones? Well, we add some chemicals inside to separate the lipids from the DNA and proteins. Next, we create a list of transitions to tell the machine the mass spectrometer what kind of lipids to measure. The machine measured the lipids in the form of peaks given in a range of acquisition time. We integrate the area under the peaks and this is what we have here. It is ideal that the variation of peak areas should come only from the sample itself. However, in reality, such variation can come from other sources such as when different pipettes are used or the presence of contaminant ions. As the mass spectrometer is a very sensitive machine, variation from these external sources can also be measured as well. To check for the severity of these unwanted variations, we have to use quality control samples. One example is the batch quality control, or BQC. It is created by creating small eloquence of decided samples and pulling them together. The pulled samples are then reallocated back into new affidavits and these little eloquence here are the BQCs. They can be placed before the first sample at regular intervals in between the samples as well as after the last samples. We then plot this injection sequence bar chart using the area as the y-axis and the injection sequence as the x-axis. We then perform some statistical summary and we want to keep transitions whose BQC coefficient of variation is low. We then report these results as a PDF file containing injection sequence bar charts, one transition per page. However, as time passes, our last test began to accept samples that are very, very large up to a few thousands. As a result, static bar charts and scatter plots will no longer work as it is hard to see the points within the confined spaces of the static plots. In addition, the normal transitions have increased to over 500. This gives a PDF file of over 500 pages full of plots. Lastly, to improve the quality of our data, we have different QC sample types as well and this gives rise to new plots such as the ring plot plot and the dilution series plot. In the end, we'll have multiple PDF files with over 500 pages full of plots and looking at these plots individually is very tedious and time consuming. Hence, we need to find a better solution to this. Clearly, there is a need to switch the R packages that is able to give interactive plots and probably seems to be the natural choice for me. However, the distribution of such results to collaborators and managers remains a challenge. This is because interactive plots could not be stored in PDF files. While I did consider using Shiny, I was precluded from using it firstly because I lacked the expertise to maintain a secure web server to run these Shiny applications that meets the standard of the university's IT team. Secondly, I cannot expect my collaborators and managers to be able to install all these R packages and run the code to rebuild the Shiny application just to view the results. It is just too much work for them. Transcope.js is able to create these kind of outputs such that I can compress the folder into a Z file and send the data to them. And when they have the data, they can just double-click on this index.html file to give the results something like this, where they can see them or see all these plots. And they can also filter them based on their favorite classes. For example, we can see just the A-cell carnitines, for example, if there are 18 of them. And out of the 18 of them, we can see which one has high variation. So let's use this quality control, TQC, instead, and see how it goes. Well, we can see that the TQC was quite high because of something wrong with the machine in the beginning of the run. For the next transition, the variation is very high because of low signal, because most of the points are below the limit of detection. Now that I've given my reasons why I use these two packages, I would like to now share some tips and resources that will help you guys to be able to give these plots by yourself. Thanks to OpenScience, I am able to create a walkthrough example using Quattro, using a published Lipidomic data set. This slide shows that it is possible to create a new column full of plot-leap plots. And this is how it is done. You first use the Deploy Mutate to create this new column, and then you use the PMAT underscore plot function from Triloscope.js to create these plots. And then this is how I usually call the plots, like for some of the first for the first century's transition. This is how the dilution plot looks like. Providing metadata information as trend in JS diagnostics is important because it helps to improve the user experience, especially for those who are using it for the first time. This information can be displayed when pressing the information button here. On the other hand, you can also be seen when users hover onto the buttons at the panels. I have provided a step-by-step process of how you can do this in my Quattro example. Next, we go to results distribution. To export a Triloscope.js object, what you need to do is to set your working directory and then call the Triloscope function with the correct parameters in the RL console. Ensure that your folder path is correct and that self-contained is set to force to create these objects here. Clicking on the HTML file will give you the Triloscope plot and all you have to do is compress them to give you the ZIP file. To export a Quartro document with Triloscope.js objects, the changes that you need to make is on the Quartro YAML or YAML configuration. Ensure that it's set to force for the self-contained parameter and then clicking on the button render will give you these folders as well in green and in blue and then choosing all these highlighted folders you can compress them into a ZIP file and send to your collaborators. I have all these exported examples in my release section of this GitHub page. This GitHub page is also where the source code of my Quartro report is. With that, I would like to end my presentations with these three points, saying that quality control samples are useful to check for unwanted variation and that the quality plot and Triloscope.js package are useful in my work and there is a Quartro example to help you be able to do it by yourself and if you are missed the descriptions below in the image, it can be seen when you hover them or you can because they are alternative text and can be read using the screen reader. So here's how it goes. Chromebox spoken feedback is ready. Figure showing two workers praising the presenter for providing a good visualization report. With that, I end my presentation and I hope that you enjoy the conference.