Speck Examples and Reference


Default Speck

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

import six.moves.urllib.request as urlreq
from six import PY3

import dash
import dash_bio as dashbio
import dash_html_components as html
import dash_core_components as dcc
from dash_bio_utils import xyz_reader

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

data = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'speck_methane.xyz'
).read()

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

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

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


@app.callback(
    dash.dependencies.Output('my-speck', 'presetView'),
    [dash.dependencies.Input('speck-preset-views', 'value')]
)
def update_preset_view(preset_name):
    return preset_name


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

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 six import PY3

import dash_bio as dashbio
from dash_bio_utils import xyz_reader


data = urlreq.urlopen("https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz").read()

if PY3:
    data = data.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 six import PY3

import dash_bio as dashbio
from dash_bio_utils import xyz_reader


data = urlreq.urlopen("https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz").read()

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

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

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

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

help(dash_bio.Speck)
```

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

data (dict; 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 has the following type: list of dicts containing keys ‘symbol’, ‘x’, ‘y’, ‘z’. Those keys have the following types:

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

presetView (a value equal to: ‘default’, ‘stickball’, ‘toon’, ‘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 has the following type: dict containing keys ‘aspect’, ‘zoom’, ‘translation’, ‘atomScale’, ‘relativeAtomScale’, ‘bondScale’, ‘rotation’, ‘ao’, ‘aoRes’, ‘brightness’, ‘outline’, ‘spf’, ‘bonds’, ‘bondThreshold’, ‘bondShade’, ‘atomShade’, ‘resolution’, ‘dofStrength’, ‘dofPosition’, ‘fxaa’. Those keys have the following types:

  • aspect (number; optional)
  • zoom (number; optional)
  • translation (dict; optional): translation has the following type: dict containing keys ‘x’, ‘y’. Those keys have the following types: - x (number; optional) - y (number; optional)
  • atomScale (number; optional)
  • relativeAtomScale (number; optional)
  • bondScale (number; optional)
  • rotation (dict; optional): rotation has the following type: dict containing keys . Those keys have the following types:
  • ao (number; optional)
  • aoRes (number; optional)
  • brightness (number; optional)
  • outline (number; optional)
  • spf (number; optional)
  • bonds (boolean; optional)
  • bondThreshold (number; optional)
  • bondShade (number; optional)
  • atomShade (number; optional)
  • resolution (number; optional)
  • dofStrength (number; optional)
  • dofPosition (number; optional)
  • fxaa (number; optional)