Embedded Files
- 3Dmol.js Overview
3Dmol.js is an object-oriented, webGL based JavaScript library for molecular visualization. It is a library designed especially for drawing three-dimensional structures of proteins, but it can also be used for drawing small molecules.
As an example, if you display ethanol using a 3Dmol.js, it will look like the purple box below (if not, try reloading the page.)
- py3Dmol
py3Dmol is a IPython widget that runs an interactive 3Dmol.js in Jupyter Notebooks.
One of the features of py3Dmol is that once the molecules are loaded, they can be rendered even if the IPython kernel is not running, so even if you share a notebook as an ipynb file with someone, you still can move the structure on the other side.
- Installing
Using Conda
Using pip
- Basic Usage
py3Dmol makes the structure in some steps:
Firstly, creating the py3Dmol.view object which is like making a workspace for py3Dmol to work. Seconndly, adding the molecules we want to draw on the view object. Then, Setting the drawing style.
- Creating a drawing area
py3Dmol.view()
To start with, it is necessary to generate a drawing area which, by default, has a width of 640 and a height of 480. Other options are shown below:
width: Width of drawing area.default is 640
height: Drawing area height: default is 480
viewergrid: (m,n) creates a grid of vertical m and width n
linked: To control all models together at same time. Default is true
query: loading a compound from the database and set it in the drawing area
- Adding Molecules
Compound retrieval from the database
By using the query option, it is possible to retrieve information about compounds from PDB and PubChem.
query=’pdb:pdb-id‘
query=’cid:pubchem-id‘
Adding molecules to draw
To include a molecule in the view object that has been created, the addModel method is utilized, which supports standard formats such as .pdb, .sdf (mol), .xyz, and .mol2.
However, if RDKit is employed, the Mol object should be converted to a mol block format using the Chem.MolToMolBlock method before being used with addModel.
Note that almost all option settings in py3Dmol must be specified in the dictionary type.
view.addModel(data, format, options)
- Styling
Setting the background color
The color of the drawing area can be defined by using a Hex Color (in hexadecimal format) or by specifying the name of the color. If the color is not specified, the default is white.
view.setBackgroundColor(color)
Zoom in on a designated atom
The camera zooms in to the center of the molecule
view.zoomTo()
Setting the drawing style
Setting the style of the drawing format for the specified part. Wire (LINE) Model, Stick model, or Space-Filling (CPK) Model
line: Wire Model
cross: Cross Model
stick: Bar Model
sphere: Space Filling Model
cartoon: Display secondary structure in manga
view.setStyle(style)
- Viewing the Model
To display the contents of the view object on Jupyter notebook.
view.show()
view.render()
- py3Dmol in Action
- Loading structure and viewing in different styles
In this example, we will see:
Getting Caffeine structure from PubChem
Displaying Caffeine on a 3 x 1 vertical grid
Setting different drawing style separately for each grid
Setting different background color for each grid
Viewing Models
To retrieve the three-dimensional structure of Caffeine from PubChem, with a compound ID (cid) of 2519, the query parameter should be set to 'cid:2519'. The structure will be automatically loaded into the view object that has been created.
Additionally, the viewergrid parameter is set to (1,3), which means that the imported structure will appear in all three grids.
Subsequently, all modifications to the view object, such as adding molecules, setting drawing styles, adjusting the background, etc., will be clearly specified for which grid they are intended by using the viewer=(m,n) notation.
Styling the wire model
The wire model allows the following settings, and in this case, the line thickness is set using linewidth.
linewidth: Lineweight
colorscheme: Color setting for each element using the ColorschemeSpec type
Styling the Stick model
The Stick model can be customized with various settings, and it is necessary to pass an empty dictionary even if no settings are being adjusted at the moment.
radius: Atomic radius
singleBonds: Whether all bonds are represented as single bonds, default is False
colorscheme: Color setting for each element using the ColorschemeSpec type
Styling the Space-filling model
The space-filling model can be customized with different settings, and even if no settings are being adjusted at the moment, it is also necessary to pass an empty dictionary.
radius: Rewrite van der Waals radius settings
scale: Van der Waals radius is scaled by a set ratio
colorscheme: Color setting for each element using the ColorschemeSpec type
Here is the full code and the output!
- Color Customization and Partial Selection of molecule
Py3Dmol provides several options for selecting substructures within a molecule. In this particular case, we will illustrate the selection process using the Insulin molecule. The example involves selecting specific chains (such as A and B) using the "chain" option, and selecting zinc atoms using their element symbol with the "elem" option.
resn: Name of residue
elem: Element symbols (e.g. 'H', 'Ca')
chain: The chain number set in the PDB (e.g. 'A')
resi: Residue Number
Styling Cartoon or Manga model
color: ColorSpec color setting of strands.
style: style of cartoon rendering (trace, oval, rectangle (default), parabola, edged)
ribbon: Whether or not to draw the ribbon with a constant width
arrows: Whether to display arrows to indicate the direction of the β sheet
thickness: Strand thickness.Default is 0.4
opacity: set opacity from 0-1
Adding Molecular Surfaces: addSurface(type, style)
Add a molecular surface (surface) such as Van der Waals surface (VDW)The style of the surface can be specified by:
opacity: Opacity
colorscheme: Color setting for each element using the ColorschemeSpec type
Code:
Page updated
Google Sites
Report abuse