3Dmol.js And WordPress – A Few Simple Worked Examples

A short post describing how to get 3Dmol.js doing something practical in WordPress, hopefully sparing someone else some mild confusion and error messages. In retrospect, the setup is trivial and works beautifully – it's an excellent tool for bringing small molecules, proteins, nanostructures, and others to life with a loading time on-par with how long it takes pages on this site to load generally.

Custom HTML

All of the 3Dmol.js content goes into Custom HTML blocks. You can have as many of the "div" as you like in the same block or have them all separate. Place the script (below) above them all.

script

Into your first Custom HTML block, place the following:

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>

div (and comments)

I'm using 2NA5, my co-authored contribution to the RCSB Protein Data Bank (or at proteopedia), as the example for some of the peptide visualization capabilities. The breakdown by section that renders the structure you see is as follows:

<div style=
"height: 550px; 
width: 550px; 
margin: 20px 0px 20px 0px;
position: relative;" 

Defining viewer size and placement, with the specific 550px width here for the WordPress Twenty Seventeen theme I'm still using on this site (else go the full 1000px if you're doing a single-column page with the same theme). The "margin" here is to provide some space between the rendering window and any text above or below it.

class="viewer_3Dmoljs"

Direct from the Bioinformatics article: "HTML authors do not need to use JavaScript to embed 3D viewers within their websites. 3Dmol.js will automatically turn any HTML element annotated with the viewer_3Dmoljs class into a viewer."

data-pdb="2NA5"
data-href="/structures/2NA5.pdb"

If you're loading directly from the PDB, use data-pdb. If storing locally (or somewhere with a specific location), data-href and the directory structure off the main site is all you need. I've gone ahead and made a www.somewhereville.com/structures folder in my WordPress instance to keep .pdb and .mol2 files localized (hence the data-href above), else you can call directly from the link you're provided when you upload them to your site.

data-backgroundcolor="0xeeeeee" 

An almost-white background (instead of pure 0xffffff) to easily see the placement of the viewer for this example (and back to white backgrounds for the other structures below).

data-style1="stick:radius=0.1"
data-style2="sphere:radius=0.3"
data-style3="cartoon:color=spectrum"

The business-end of the rendering. This structure has three different data-style representations, for which you need to have a -style1 (here, thinned sticks), -style2 (here, scaled vdW spheres), -style3 (here, peptide backbone cartoon) to call them and to make your custom tweaks to the rendering (after the colons). If you're only going to use one data-style, you can skip the numbering. The "spectrum" style here for the cartoon applies a rainbow gradient to the backbone.

data-surface='opacity:.7;color:spectrum'

The surface styles work like the data styles. Note the colons and semicolons in changing the rendering. Here, the "spectrum" call for the data-surface provides the by-atom coloration on the surface as shown.

data-ui="true">
</div>

Show the controls so the user can play with the structure, close up the div, and that's it. The final block as one piece (for ease of copying + pasting) looks like the following:

<script src="https://3Dmol.org/build/3Dmol-min.js"></script>
<div style="height: 550px; width: 550px; margin: 20px 0px 20px 0px" class="viewer_3Dmoljs" data-pdb="2NA5" data-backgroundcolor="0xeeeeee" data-style1="stick:radius=0.1" data-style2="sphere:radius=0.3" data-style3="cartoon:color=spectrum" data-surface='opacity:.7;color:spectrum' data-ui="true"></div>

And the over-stylized results for 2NA5 is shown below:

Controls

To anyone wanting to drive the structure above or items below, these are the operations from the 3Dmol tutorial page (3dmol.org/doc/tutorial-url.html).

MovementMouse InputTouch Input
RotationPrimary Mouse ButtonSingle touch
TranslationMiddle Mouse Button or Ctrl+PrimaryTriple touch
ZoomScroll Wheel or Second Mouse Button or Shift+PrimaryPinch (double touch)
SlabCtrl+SecondNot Available

pdb and mol2

You will note that no hydrogen atoms are shown for the PDB 2NA5 file above (or any other .pdb file), nor are the H atoms shown for the crimp junction structure from the nano gallery shown below:

While one can play games in the .pdb file to show atoms where the H atoms are in the structure, a simple alternative is to convert the .pdb into a .mol2 with something like openbabel (how I did the conversion as shown below), after which all atoms are now represented:

… and also with a data-surface call added for show (which is to say, the surface is generated for the structure, not from anything PDB-specific).

And, to close up this first quick guide, a reproduction of the TX junction from the nano gallery is provided, with the div block to produce the six distinct chain colors and renderings as shown below:

<div style="height: 550px; width: 550px;  margin: 20px 0px 20px 0px; position: relative;" class="viewer_3Dmoljs" data-href="/structures/TX_DNA.pdb" data-backgroundcolor="0xffffff" 
data-select1='chain:A' 
data-surface1='opacity:.9;color:red' 
data-style1='stick:color=red'
data-select2='chain:B' 
data-surface2='opacity:.9;color:deepskyblue' 
data-style2='stick:color=deepskyblue'
data-select3='chain:C' 
data-surface3='opacity:.3;color:brown' 
data-style3='stick:color=brown'
data-select4='chain:D' 
data-surface4='opacity:.3;color:orange' 
data-style4='stick:color=orange'
data-select5='chain:E' 
data-surface5='opacity:.3;color:green' 
data-style5='stick:color=green'
data-select6='chain:F' 
data-surface6='opacity:.3;color:purple' 
data-style6='stick:color=purple'
data-ui="true"></div>

And give it a few seconds to throw the surfaces up.

Relevant links:

Finally! A Good Use For The Nano Gallery (Kudos To nanosonic.com)

An unlabeled version of the fused-diamondoid-carbon-nanotube-van-der-waals-crimp-junction found a home in the NanoSonic Nanotechnology Coloring Book (was originally at http://www.nanosonic.com/files/93.pdf), page 8 (I show it below (with mine shown a little more nano-sized)). I think that's pretty hip.

Kudos to Tom Moore for pointing it out.

Cover Art For The 7 May 2010 Issue Of The Journal Of Organic Chemistry – Notes On Presentation

The cover art for the 7 May 2010 issue of the Journal of Organic Chemistry accompanies the article by (2nd semester organic chemistry professor, co-author, and 2010 American Chemical Society James Flack Norris Award in Physical Organic Chemistry recipient) John E. Baldwin and Alexey P. Kostikov entitled "On the Stereochemical Characteristic of the Thermal Reactions of Vinylcyclobutane."

This Perspective outlines the stereochemical and mechanistic complexities inherent in the thermal reactions converting vinylcyclobutane to cyclohexene, butadiene, and ethylene. The structural isomerization and the fragmentation processes seem, at first sight, to be obvious and simple. When considered more carefully and investigated with the aid of deuterium-labeled stereochemically well-defined vinylcyclobutane derivatives there emerges a complex kinetic situation traced by 56 structure-to-structure transformations and 12 independent kinetic parameters. Experimental determinations of stereochemical details of stereomutations and [1,3] carbon sigmatropic shifts are now being pursued and will in time contribute to gaining relevant evidence casting light on the reaction dynamics involved as flexible short-lived diradical intermediates trace the paths leading from one d2-labeled vinylcyclobutane starting material to a mixture of 16 structures.

The cover image is meant to convey as much useful information as possible without any verbiage, although this is clearly not a concept meant to be crystal clear to a non-chemist (but kudos if you got the idea without my having to address it).

Included below are the four iterations involved in the cover draft, between which a considerable amount of verbal back-and-forth occurred (that is discussed briefly) to get what was intended to be presented. The iterations are provided both to show how different visions of what might be seen as the most-key of the key points change as content is presented to the client/researcher and, frankly, these all involved quite a bit of busy work and it seems a shame to not have them floating around somewhere accessible.

The original cover idea (above) was quite mundane but provided a bit more information (cryptic as it may appear to the non-mechanistic organic chemist) about what might be occurring in the absence of a brief read of the introduction of the article. This image emphasizes that a constant rearrangement occurs of the vinylcyclobutane (by the many, many arrows and the four different arrangements of deuteriums in the rearrangement) but does not address that the other 12 structures are products of reactions that are generated as the vinylcyclobutane rearranges and undergoes other but simultaneous intramolecular reactions. The absence of the connection between the rearrangement and the formation of products (which include the vinylcyclobutanes) removed this first iteration from the final running.

The second iteration (above) is a significant (well, I think so) improvement in the getting-across of the business end of the research. The vinylcyclobutane rearrangement is still central to the preferred emphasis of the cover (soon to go away) and the connection between the rearrangement and the formation of products is now hinted at directly by the use of the faded arrows. The second-tier information passed along in this image is that the vinylcyclobutane is one of the products, which is not stressed in the image (by the inclusion of four additional arrows from the central graphic (and, with that addition, the inclusion of arrows feeding the vinylcyclobutanes back into the center). If this had been an Angew. Chemie article, the circular design would have been a perfect fit.

It was at this point that a new piece of content was provided in the form of a medium-resolution digital photo of a piece of artwork by Anne Baldwin. The artwork was chosen as much for the colors as for the chaotic quality of the swirls, which was the one aspect of the entire process that the previous two images did not address and which Dr. Baldwin saw as the more significant point to convey. Some Gaussian blurring and a Gaussian basis set later, the new reactant/product combination as scrambled to complement the background and to make clear that one molecule (that at the arrow) lead to everything else in the image, including itself. The slight red halo around the deuterium (dark blue) is a result of an overlay of the blue spheres and red spheres rendered with slightly larger radii.

The arrow color and shading was stolen from Jean-Michel Folon. Example (The Cry) below. If you've one of the copies of La morte di un albero (mine is #630), see Comme un aimant (1971).

I admittedly prefer this (that is, the above cover idea) to the final version as the arrow indicates the forward direction of reactions and adds a hint of symmetry to an otherwise jumbled image.

As for the selected cover image (and final iteration, above), the considerable real estate taken up by the vinylcyclobutane in the previous image is recovered, which highlights the starting molecule differently and has the arrow simply angled into a less-busy space.

The final selection may make more sense in light of the image Baldwin chose to use for the graphical abstract.

A word to the perspective cover artist – This is a point that should be obvious but is often not until it is made obvious by an editor when it is much too late. Your images should be as LARGE as possible. Each of the images above is a 200 MB Photoshop file that would print without pixilation or granularity at 600 dpi on a 24" x 36" poster.