This tutorial goes over how to create visualizations with MSMExplorer-d3. MSMExplorer-d3 is intended to help researchers quickly visualize Markov state models of molecular dynamic simulations. This tutorial will go over how to load Markov state model data, interact with your visualizations, create transition state pathways, and add meaningful representations of molecules to your visualizations.

MSMExplorer-d3 Tutorial

1. Build an MSM

Use MSMBuilder to generate an MSM from your molecular dynamics simulations.

2. Select your MSM Settings

In the Markov States tab, which appears first by default, two different parameters are available to customize: Probability cutoff and Resize nodes.

A. Probability cutoff

This parameter dictates which edges should be trimmed from the graph visualization. This can be useful if you only care about higher probability transitions or just want a more asthetically pleasing graph.

B. Resize nodes

This parameter allows for several options to adjust the size of nodes based on different graph properties, such as pagerank, first eigenvector, second eigenvector, and closeness centrality. Each of these properties will highlight states that may have some importance in the Markov state model. pagerank is the default option.

3. Upload MSM data

Find the transition probability matrix file, which MSMBuilder will create as a matrix market formatted file. This file should be named tProb.mtx by default in your project folder.

The matrix market file can then be dragged and dropped into MSMExplorer-d3's convenient "UPLOAD" box. The graph will be generated from this file and your settings automatically. Note that the size of the arrow is related to the directed transition probability between any two states.

4. Interacting with your visualization

A force-directed graph should appear on the right side of the page once you've uploaded a matrix market file. Interacting with the visualization panel is intuitive: you can click and drag nodes to rearrange them; drag the visualization screen to pan in any direction; and scroll within it to zoom in or out.

5. Creating transition state pathways

Click on Transition Paths. Here, you can create transition state pathways using Djikastra's algorithm as implemented by MSMBuilder's CalculateTPT.py tool. Settings include: Input source states, Input sink states, and Number of top paths.

A. Input source states

Here you can type in a comma-separated list of source states, or reactants.

B. Input sink states

Here you can type in a comma-separated list of sink states, or products.

C. Number of top paths

Select the number of top paths desired, as determined by Djikastra's algorithm. Default is 5. Maximum is 10.


When you are done configuring your settings, click on "Generate". The transition pathways will appear in the visualization panel. Source states will appear in blue, sink states in red, and transition states in gray. Note that the size of the arrow is related to the bottleneck flux along a given path (i.e. the top path with have the largest arrows along it).

6. Adding molecule logos

Now that your transition state pathways have been generated, you can also add images of the molecular states that each node in the pathway (or transition graph) represents with ease.

First, click on the Add Logos tab and then select a state from the State selection menu. You can now load a PDB of the state by clicking the "LOAD PDB" button on the lower left side of the panel. An interactive molecular stucture should appear in the round window in the center of the panel. Go ahead and play around with it. You can click + drag to rotate the structure; scroll to zoom in or out; click control + drag to translate; and control + scroll to adjust the clipping plane.

When you have your structure just as you want it to appear in the graph, click "ADD LOGO". The node will automatically be replaced with the representation you created in the Add Logos panel.

Repeat this step for each state you wish to add a structure, and, within just a few minutes, you can create a publication quality visualization.

7. Saving your visualization

MSMExplorer-d3 allows you to save your graph visualization as a high quality PNG. All you have to do is click on the "Save Graph" tab on the upper left corner of the page.