Molecular visualization with 3DMol.js

3DMol.js is an intuitive and highly flexible library for visualizing molecular structures within scientific applications. The simplest way to display and style protein or chemical structures is through a URL with the appropriate query string, or by embedding 3Dmol parameters within an HTML tag:

The data-cid or data-pdb attributes specify the desired molecule and these identifiers are available at PubChem and Protein Data Bank. The above code will render an interactive viewer containing the following:

Supplying data-* attributes allows styling to be customized. For example, to highlight all tryptophan amino acid residues on chain B, or to display the structure in ‘cartoon’ style:

The API gives greater control over
how 3Dmol should interact with other events in the browser as well as greater flexibility over styling. The following script is based upon the extensive documentation it provides:, pertains to functional molecules, e.g. pharmaceuticals. It allows comparisons of 3D chemical structures, through 3Dmol.js, as well as allowing users to obtain commercial sources and relevant scientific literature.


Leave a Reply