dash_bio.Molecule2dViewer Examples and Reference

see Molecule2dViewer in action.

Graph

An example of a default Molecule2dViewer component without any extra properties.

import json
import six.moves.urllib.request as urlreq
from dash_docs.utils import DatasetLoader
from six import PY3
import dash
from dash.dependencies import Input, Output
import dash_bio as dashbio
import dash_html_components as html

app = dash.Dash(__name__)

model_data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'mol2d_buckminsterfullerene.json'
)

if PY3:
    model_data = model_data.decode('utf-8')

model_data = json.loads(model_data)

app.layout = html.Div([
    dashbio.Molecule2dViewer(
        id='dashbio-default-molecule2d',
        modelData=model_data
    ),
    html.Hr(),
    html.Div(id='default-molecule2d-output')
])

@app.callback(
    Output('default-molecule2d-output', 'children'),
    Input('dashbio-default-molecule2d', 'selectedAtomIds')
)
def update_selected_atoms(ids):
    if ids is None or len(ids) == 0:
        return "No atom has been selected. Select atoms by clicking on them."
    return "Selected atom IDs: {}.".format(', '.join([str(i) for i in ids]))

if __name__ == '__main__':
    app.run_server(debug=True)

Customization

Selected Atom Ids

Highlight specific atoms in the molecule.

import json
import six.moves.urllib.request as urlreq
from dash_docs.utils import DatasetLoader
import dash_bio as dashbio

model_data = DatasetLoader().load('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol2d_buckminsterfullerene.json')

dashbio.Molecule2dViewer(
    id='molecule2d-selectedatomids',
    modelData=json.loads(model_data),
    selectedAtomIds=list(range(10))
)

Model Data

Change the bonds and atoms in the molecule.

import json
import six.moves.urllib.request as urlreq
from dash_docs.utils import DatasetLoader
import dash_bio as dashbio

model_data = DatasetLoader().load('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol2d_buckminsterfullerene.json')

model_data = json.loads(model_data)
for atom in model_data['nodes']:
    atom.update(atom='N')
for bond in model_data['links']:
    bond.update(distance=50.0, strength=0.5)

dashbio.Molecule2dViewer(
    id='molecule2d-modeldata',
    modelData=model_data
)

Molecule2dViewer Properties

Access this documentation in your Python terminal with:
```python

help(dash_bio.Molecule2dViewer)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (string; optional):
The ID used to identify this component in callbacks.

height (number; default 500):
The height of the SVG element.

modelData (dict; default { nodes: [], links: [],}):
Description of the molecule to display.

modelData is a dict with keys:

selectedAtomIds (list of numbers; optional):
The selected atom IDs.

width (number; default 500):
The width of the SVG element.

Example Data