dash_bio.Speck Examples and Reference

See Speck in action.

Graph

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

import urllib.request as urlreq
import dash
from dash.dependencies import Input, Output
import dash_bio as dashbio
import dash_html_components as html
import dash_core_components as dcc
from dash_bio_utils import xyz_reader

from dash_docs.utils import DatasetLoader

app = dash.Dash(__name__)

data = DatasetLoader().load(
    "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz"
).decode("utf-8")

data = xyz_reader.read_xyz(datapath_or_datastring=data, is_datafile=False)

app.layout = html.Div([
    dcc.Dropdown(
        id='default-speck-preset-views',
        options=[
            {'label': 'Default', 'value': 'default'},
            {'label': 'Ball and stick', 'value': 'stickball'}
        ],
        value='default'
    ),
    dashbio.Speck(
        id='default-speck',
        data=data
    ),
])

@app.callback(
    Output('default-speck', 'presetView'),
    Input('default-speck-preset-views', 'value')
)
def update_preset_view(preset_name):
    return preset_name

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

Customization

Molecule Rendering Styles

Change the level of atom outlines, ambient occlusion, and more with the “view” parameter.

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

data = DatasetLoader().load(
    "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz"
).decode("utf-8")

data = xyz_reader.read_xyz(datapath_or_datastring=data, is_datafile=False)

dashbio.Speck(
    data=data,
    view={
        'resolution': 400,
        'ao': 0.1,
        'outline': 1,
        'atomScale': 0.25,
        'relativeAtomScale': 0.33,
        'bonds': True
    }
)

Scroll To Zoom

Allow for the scroll wheel to control zoom for the molecule.

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

data = DatasetLoader().load(
    "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz"
).decode("utf-8")

data = xyz_reader.read_xyz(datapath_or_datastring=data, is_datafile=False)

dashbio.Speck(
    data=data,
    scrollZoom=True
)

Speck Properties

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

help(dash_bio.Speck)
```

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 Dash callbacks.

data (list of dicts; optional):
The xyz file data; a list of atoms such that each atom has a
dictionary defining the x, y, and z coordinates along with the atom’s
symbol.

data is a list of dicts with keys:

presetView (a value equal to: ‘default’, ‘stickball’, ‘toon’ or ‘licorice’; optional):
One of several pre-loaded views: default, stick-ball, toon, and
licorice.

scrollZoom (boolean; optional):
The option of whether or not to allow scrolling to control the zoom.

view (dict; default speckView.new()):
An object that determines and controls various parameters related to
how the molecule is displayed.

view is a dict with keys:

Example Data