dash_bio.AlignmentChart Examples and Reference

see AlignmentChart in action.

Graph

An example of a default AlignmentChart component without any extra properties

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

from dash_docs.utils import DatasetLoader

app = dash.Dash(__name__)

data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta'
).decode('utf-8')

app.layout = html.Div([
    dashbio.AlignmentChart(
        id='my-default-alignment-viewer',
        data=data
    ),
    html.Div(id='default-alignment-viewer-output')
])

@app.callback(
    Output('default-alignment-viewer-output', 'children'),
    Input('my-default-alignment-viewer', 'eventDatum')
)
def update_output(value):
    if value is None:
        return 'No data.'
    return str(value)

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

Customization

Color Scales

Change the colors used for the heatmap.

import dash_bio as dashbio
import urllib.request as urlreq

from dash_docs.utils import DatasetLoader

data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta'
).decode('utf-8')

dashbio.AlignmentChart(
    data=data,
    colorscale='hydro',
    conservationcolorscale='blackbody'
)

Show/Hide Barplots

Enable or disable the secondary bar plots for gaps and conservation.

import urllib.request as urlreq
import dash_bio as dashbio

from dash_docs.utils import DatasetLoader

data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta'
).decode('utf-8')

dashbio.AlignmentChart(
    data=data,
    showconservation=False,
    showgap=False
)

Tile Size

Change the height and/or width of the tiles.

import urllib.request as urlreq
import dash_bio as dashbio

from dash_docs.utils import DatasetLoader

data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta'
).decode('utf-8')

dashbio.AlignmentChart(
    data=data,
    tilewidth=50
)

Consensus Sequence

Toggle the display of the consensus sequence at the bottom of the heatmap.

import dash_bio as dashbio
import urllib.request as urlreq

from dash_docs.utils import DatasetLoader

data = DatasetLoader().load(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta'
).decode('utf-8')

dashbio.AlignmentChart(
    data=data,
    showconsensus=False
)

AlignmentChart Properties

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

help(dash_bio.AlignmentChart)
```

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 of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

colorscale (string | dict; default 'clustal2'):
Colorscale in ‘buried’, ‘cinema’, ‘clustal’, ‘clustal2’, ‘helix’,
‘hydrophobicity’ ‘lesk’, ‘mae’, ‘nucleotide’, ‘purine’, ‘strand’,
‘taylor’, ‘turn’, ‘zappo’, or your own colorscale as a {‘nucleotide’:
COLOR} dict. Note that this is NOT a standard plotly colorscale.

conservationcolor (string; optional):
Color of the conservation secondary barplot, in common name, hex, rgb
or rgba format.

conservationcolorscale (string | list; default 'Viridis'):
Colorscale of the conservation barplot, in Plotly colorscales (e.g.
‘Viridis’) or as custom Plotly colorscale under a list format. Note
that this conservationcolorscale argument does NOT follow the same
format as the colorscale argument.

conservationmethod (a value equal to: ‘conservation’ or ‘entropy’; default 'entropy'):
Whether to use most conserved ratio (MLE) ‘conservation’ or normalized
entropy ‘entropy’ to determine conservation, which is a value between
0 and 1 where 1 is most conserved.

conservationopacity (number | string; optional):
Opacity of the conservation secondary barplot as a value between 0 and
1.

correctgap (boolean; default True):
Whether to normalize the conservation barchart By multiplying it
elementwise with the gap barchart, as to lower the conservation values
across sequences regions with many gaps.

data (string; optional):
Input data, either in FASTA or Clustal format.

eventDatum (string; optional):
A Dash prop that returns data on clicking, hovering or resizing the
viewer.

extension (string; default 'fasta'):
Format type of the input data, either in FASTA or Clustal.

gapcolor (string; default 'grey'):
Color of the gap secondary barplot, in common name, hex, rgb or rgba
format.

gapcolorscale (string | list; optional):
Colorscale of the gap barplot, in Plotly colorscales (e.g. ‘Viridis’)
or as custom Plotly colorscale under a list format. Note that this
conservationcolorscale argument does NOT follow the same format as the
colorscale argument.

gapopacity (number | string; optional):
Opacity of the gap secondary barplot as a value between 0 and 1.

groupbars (boolean; default False):
If both conservation and gap are enabled, toggles whether to group
bars or to stack them as separate subplots. No effect if not both gap
and conservation are shown.

height (number | string; default 900):
Width of the Viewer. Property takes precedence over tilesheight if
both are set.

numtiles (number; optional):
Sets how many tiles to display across horitontally. If enabled,
overrides tilewidth and sets the amount of tiles directly based off
that value.

opacity (number | string; optional):
Opacity of the main plot as a value between 0 and 1.

overview (a value equal to: ‘heatmap’, ‘slider’ or ‘none’; default 'heatmap'):
Toggles whether the overview should be a heatmap, a slider, or none.

scrollskip (number; default 10):
If overview is set to ‘scroll’, determines how many tiles to skip with
each slider movement. Has no effect if scroll is not enabled (such as
with overview or none).

showconsensus (boolean; default True):
Displays toggling the consensus sequence, where each nucleotide in the
consensus sequence is the argmax of its distribution at a set
nucleotide.

showconservation (boolean; default True):
Enables the display of conservation secondary barplot where the most
conserved nucleotides or amino acids get greater bars.

showgap (boolean; default True):
Enables the display of gap secondary barplot where the sequence
regions with the fewest gaps get the greatest bars.

showid (boolean; default True):
Toggles displaying sequence IDs at left of alignment.

showlabel (boolean; default True):
Toggles displaying sequence labels at left of alignment.

textcolor (string; optional):
Color of the nucleotide labels, in common name, hex, rgb or rgba
format. If left blank, handled by the colorscale automatically.

textsize (number | string; default 10):
Size of the nucleotide labels, as a number.

tickstart (number | string; optional):
Determines where to start annotating the first tile. If let blank will
be automatically determined by Plotly. Equivalent to Plotly’s tick0
property. Does not function if overview mode ‘slider’ is applied.
(Current bug).

ticksteps (number | string; optional):
Determines at what interval to keep annotating the tiles. If left
blank will be automatially determined by Plotly. Equivalent to
Plotly’s dtick property. Does not function if overview mode ‘slider’
is applied. (Current bug).

tileheight (number; default 16):
Sets how many pixels each nucleotide/amino acid on the Alignment Chart
takes up vertically. If enabled, set height dynamically.

tilewidth (number; default 16):
Sets how many pixels each nucleotide/amino acid on the Alignment Chart
takes up horizontally. The total number of tiles (numtiles) seen
horizontally is automatically determined by rounding the Viewer width
divided by the tile width. the Viewwer width divided by the tile
witdth.

width (number | string; optional):
Width of the Viewer. Property takes precedence over tileswidth and
numtiles if either of them is set.

Example Data