Three dimensional (3D) interactive visualization of protein structures - Shiny Contest Submission

Three dimensional (3D) interactive visualization of protein structures

Authors: Niels van der Velden

Abstract: shinyNGLVieweR was developed as a graphical UI for the NGLVieweR package and allows for the three dimensional (3D) visualization of protein structures directly in R.


Full Description: Which COVID-19 variants might be a cause of concern? How does a Snow Flea protect itself from ice crystals? Why are some bacteria toxic? If you want to know the answer to these questions, you will need to study their protein structures. So… How do you look at a protein structure? Using R and Shiny of course!

With this Shiny application you can interactively look at any protein structure in three dimensions (3D). You can upload your own structural file (PDB) or find a structure you are interested in on the database and upload it by its unique identifier code.

Let’s try to answer the above questions using the Shiny application!

Note: Use mouse for selection (left-click), rotate/move (left/right-click hold) and zooming (scroll wheel).

Which COVID-19 variants might be a cause of concern?

To answer this question, you will need to look at the COVID-19 spike protein which the virus uses to bind to our cells' receptors. You will find the structure under the examples tab code 6xcn. The structure highlights some of the mutations that can be found in the most common COVID-19 variants found around the world.


  • N501Y, lays in the protein domain that is involved in binding to the human cell receptor and helps the virus to latch on more tightly to human cells. Luckily, the mutation does not seem to help the virus evade current vaccines.
  • P681H, may help infected cells create new spike proteins more efficiently.
  • H69-V90 and Y144/145 deletions, are though to alter the shape of the spike protein and therefore may help it evade some antibodies.

Studying the structure of the spike protein has helped greatly in understanding how the virus spreads, evolves and causes disease. This knowledge has been used to develop new medications and vaccines.

How does a Snow Flea protect itself from ice crystals?

Well… It produces an antifreeze protein! You can find the structure of the protein under the examples tab code 2pne. In the structure you will see that the protein is covered in water molecules (red dots). These water molecules are spaced similarly to the water molecules in ice crystals. The protein can similarly bind to the geometric lattice of water molecules found in ice. By binding to the ice, it can prevent the crystals from growing thus being able to protect itself!

Antifreeze proteins are very useful and a purified protein from cold-water ocean pout has been used as a preservative in ice cream! For more information see: PDB-101: Molecule of the Month: Antifreeze Proteins.


Why are some bacteria toxic?

Bacteria must compete with other microorganisms for resources. To fend for themselves they are masters in the production of all kinds of toxins. One of the most beautiful protein toxins (in my opinion) is alpha-hemolysin produced by the pathogenic Staphylococcus aureus bacterium. You will find the protein structure under the examples tab code 7ahl. The structure consists of monomers that assemble into heptameric pores on the host cell membrane thereby causing the cells to burst.



R is extensively used by researchers for the analysis of Mass Spectrometry (MS) and Next Generation Sequencing (NGS) data. With this kind of data it is possible to identify where mutations occur in a protein sequence. I wrote the NGLVieweR package and Shiny application to make it more easy to map these mutations directly onto the protein structure.

What I love about the Shiny framework is that it allows you to take any JS library, turn it into a htmlwidget and combine it with R code. The application for instance shows you the protein sequence and it is possible to highlight residues by sequence matching. The data-wrangling that was needed to achieve this was done relatively easy using the tidyverse in R but would be very difficult to achieve using JavaScript alone.

Technical aspects of the application

  • The Shiny application was built as a showcase for the NGLVieweR package which is a htmlwidget build on top of the NGL.js library.
  • To structure the code the application was built using the golem package.
  • Users can overlay different surface, structure contact and label representations.
  • Any edits made in the application can be saved as a .ngl file and uploaded back to the application.
  • The protein sequence is shown with the help of r2d3 and flexbox. Data wrangling is performed using the tidyverse.

Please feel free to post any bugs, suggestions or ideas for the R package or Shiny application to the github page!

Keywords: golem, r2d3, NGLVieweR, tidyverse
Shiny app:
Repo: GitHub - nvelden/shinyNGLVieweR: Shiny UI for the NGLVieweR package
RStudio Cloud: Posit Cloud


Full image:


Awesome work! A really well done app.

1 Like

Thanks! I really like your app as well!

I haven't looked at your code yet - what libraries do you use to show proteins in 3D from within Shiny?

Very nice looking app. I wuld also like to ask what 3D library do you use?

It uses the NGL.js library which was written using WebGL and Three.js. I wrote a htmlwidget for the NGL.js library such that it can be used directly in R and Shiny. This is what turned into the NGLVieweR package. I wrote the Shiny application as a showcase of what can be done with the package.

Good Eye Catchy Application!!!
Great Work :ok_hand::ok_hand:

Love the app, it is actually very useful for people working with protein structures AND looks amazing! More convenient than dealing with pymol for many use cases. Great job!

1 Like