dash_bio.Speck Examples and Reference

Speck

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

import urllib.request as urlreq
from dash import Dash, dcc, html, Input, Output, callback
import dash_bio as dashbio
from dash_bio.utils import xyz_reader

app = Dash(__name__)


data = urlreq.urlopen(
    'https://git.io/speck_methane.xyz'
).read().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
    ),
])

@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(debug=True)

Customization

Molecule Rendering Styles

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

import urllib.request as urlreq
import dash_bio as dashbio
from dash_bio.utils import xyz_reader



data = urlreq.urlopen(
    'https://git.io/speck_methane.xyz'
).read().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 urllib.request as urlreq
import dash_bio as dashbio
from dash_bio.utils import xyz_reader



data = urlreq.urlopen(
    'https://git.io/speck_methane.xyz'
).read().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:

symbol (string; optional)
x (number; optional)
y (number; optional)
z (number; optional)

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:

ao (number; optional)
aoRes (number; optional)
aspect (number; optional)
atomScale (number; optional)
atomShade (number; optional)
bondScale (number; optional)
bondShade (number; optional)
bondThreshold (number; optional)
bonds (boolean; optional)
brightness (number; optional)
dofPosition (number; optional)
dofStrength (number; optional)
fxaa (number; optional)
outline (number; optional)
relativeAtomScale (number; optional)
resolution (number; optional)
rotation (dict; optional)

rotation is a dict with keys:
spf (number; optional)
translation (dict; optional)

translation is a dict with keys:
- x (number; optional)
- y (number; optional)
zoom (number; optional)

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

style (dict; default { height: '600px', width: '600px', position: 'relative',}):
Generic style overrides on the plot div.

loading_state (dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a dict with keys:

component_name (string; optional):
Holds the name of the component that is loading.
is_loading (boolean; optional):
Determines if the component is loading or not.
prop_name (string; optional):
Holds which property is loading.