Education Corner

The “Molecule of the Month” series has been a cornerstone of PDB-101’s outreach initiative. The series was launched by creator David Goodsell in 2000. Each installment includes an introduction to the structure and function of the molecule, a discussion of the relevance of the molecule to human health and welfare, and suggestions for how visitors might view these structures and access further details. After the initial launch of the series, interactive JSmol were added to help readers to freely explore curated PDB structures. During an internship, Ryan and Xinyi diligently updated older articles to include JSmols views. While solving unique visual challenges, they learned more about structural biology and science communication.

Visual Media Bridges the Gap in Science Communication

How can we communicate new and emerging research with potential impacts on public health to the general population when scientific literacy is low and research complexity is challenging? Part of this problem can be solved by meeting community members where they are at in their science understanding, and allowing them to engage in the learning process. Visual media can engage and stimulate its audience by its own merits, and is a powerful tool in bridging this gap.

The motivation behind creating these interactive JSmols is to give readers agency in exploring the structures described in each Molecule of the Month article. The challenge of crafting effective visuals, and by extension effective science communication, is being intentional about design choices and the information we share. Creating these JSmols is an exercise in distilling the most important parts of our story while maintaining the context our audience needs to understand the story.

Creating the Story

Each “Molecule of the Month (MotM)” JSmol can be viewed as a unique story taking the audience through the protein’s structure-function relationships. How does the protein’s conformation change upon activation? Which domains contribute to a certain characteristic of the protein? What are the key amino acid residues responsible for the protein's ligand binding specificity? These are just some of the questions we hoped to answer while designing each JSmol. 

Throughout the JSmol development process, much of the story we aimed to convey was inspired by the existing content in MotM articles. The articles offer an engaging overview of the protein’s structure, functions, and interactions with other molecules alongside many examples of structures taken directly from the Protein Data Bank (PDB) archive. We used the article as a starting point and thought of ways to introduce new details through highlighting specific aspects of the proteins’ structures in our JSmols. After brainstorming some initial concepts, we often directly selected these structures from the articles to use in our JSmol designs. 

Other times, we had new ideas—such as a specific mechanism of activation—to illustrate the protein’s structure-function story. As many of the articles we were working with were from the early 2000’s, we searched through the PDB to find more recently deposited structures that best fulfilled our vision.

Preparing PDB Files

While some molecules only required a single structure to tell their stories, others required multiple structures or biological assemblies to illustrate their function. The Calcium Pump is a prime example, whose structure changes between calcium-bound and calcium-free states. In these cases, multiple PDB files can be combined into a single file using some of the tools available on RCSB.org. The Pairwise Structure Alignment tool can generate such files and appropriate position each structure before importing into JSmol.

“As I worked on the Calcium Pump MotM article, I faced the unique challenge of showcasing both the calcium-bound and calcium-free states. Leveraging PDB's Pairwise Structure Alignment tool, I generated a custom file containing both structures. The real challenge came with recalculating secondary structures and crafting a seamless script, allowing users to switch effortlessly between both states. Despite the complexity, the outcome proved to be one of the most rewarding experiences among all the articles I worked on."

~ Ryan Nini

Building the Script

Upon selecting one or more structures from the PDB, we load them into the JSmol software console, which visualizes a ball-and-stick rendering of the protein by default.

Then comes the fun part: inputting various commands into the console allows us to tinker with the structure’s rendering style, color, and size—on the level of the whole protein, to specific amino acids, to individual atoms. Other commands allow us to adjust the lighting, orientation, and zoom on the protein to create a more clear and engaging viewing experience that brings the protein to life. The JSmol software supports a vast array of commands that creates countless possibilities for protein visualization. After grasping the basics, we were able to explore more complex commands that allow us to zoom in on protein-ligand interactions and develop unique styles for creating the JSmols. 

“For JSmols such as the acetylcholine receptor, the amino acids involved in specific protein-ligand interactions were not readily available; I examined multiple scientific papers and figures to find the residue numbers. In the Antibodies MotM article, only one antibody structure had its hypervariable loops listed in a paper. The pairwise sequence alignment tool allowed me to compare their variable regions and manually determine the loops for the other two structures. The process of pinpointing these residues —though often tedious—was super interesting as I learned more about the complexities of the proteins’ structures along the way.”

~ Christine Zhang

For the Chaperones and Aminoacyl-tRNA Synthetases JSmols, combining selection terms for protein chains and atom type allowed us to give subtle color variations. Combined with z-depth functions that give a “fog” over parts of the molecules further away from the viewer, we were able to create a sense of depth and visual richness that isn’t achievable with default settings.

Once we land on a rendering that we are happy with, we compile all the commands into a main script that can be fed into the console all at once. For molecules that involve multiple structures or different visualizations of the same structure, we create separate scripts for radio buttons that allow viewers to flip between different views of the protein. These buttons enhance the clarity of the story we are trying to convey. Finally, we write a caption to tie the story together, and the finished product is uploaded to PDB-101. 

Some Visualizations Work Better Than Others

With feedback from David Goodsell, we realized that some renderings provide a much better avenue for communicating a clear scientific message to viewers. For instance, the backbone visualization allows users to gain a clear understanding of the individual amino acids in the protein and how they form the protein’s secondary structures. This type of view is not as apparent in space-filling or wireframe models. The effectiveness of a visualization is also determined by the sizing of the atoms. We varied the thickness of different parts of the molecule, such as specific side chains compared to the backbone.

Additionally, we spent a lot of time crafting an appropriate color palette for each structure—not only for aesthetic purposes, but for functional reasons as well. We followed standard coloring conventions for atoms such as oxygen, nitrogen, and sulfur. Different parts of the same protein were colored similarly to create a stark contrast against ligands and other molecules. These adjustments can make an immense difference in how the story is perceived by the audience. 

Taking all of these factors into account, some of the JSmols we designed had vastly different appearances based on which aspects of the protein's structure we wanted to highlight. In the amyloid-beta precursor protein JSmol, for example, the parallel beta-sheet formed by amyloid-beta monomers became easily noticeable after using a backbone representation coupled with a vibrant gradient. Furthermore, the salt bridge interactions, shown in thin wireframe and space-filling configurations, stand out from the rest of the structure.  For p53, the focus was to demonstrate how the protein fits to the major and minor grooves of the target DNA strand. A space-filling representation for the protein best shows the jig-saw-like fit, while the use of gray tones for the main bulk of the protein helped emphasize the colored amino acids that were interacting with the DNA.

Our journey through the world of protein structures and interactive JSmol models has been both enlightening and fulfilling. We curated compelling stories by researching suitable structures, adeptly prepared PDB files using RCSB PDB's tools, crafted scripts to showcase vital structures and functions, and intentionally selected visual representations to best bring these narratives to life. The creation of these dynamic JSmol models has allowed us to present the intricacies of proteins in a novel and captivating manner. We invite you to explore our collection of meticulously crafted JSmol models below, where each structure tells a captivating story of form and function. Step into the world of proteins, enriched with interactivity and insight, and experience the fascinating intersection of science, art, and education.