dash_bio.NeedlePlot Examples and Reference

see NeedlePlot in action.

NeedlePlot

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

Show or hide range slider 
import json
import urllib.request as urlreq
from dash import Dash, html, dcc, Input, Output, callback
import dash_bio as dashbio

app = Dash(__name__)


data = urlreq.urlopen(
    'https://git.io/needle_PIK3CA.json'
).read().decode('utf-8')

mdata = json.loads(data)

app.layout = html.Div([
    "Show or hide range slider",
    dcc.Dropdown(
        id='default-needleplot-rangeslider',
        options=[
            {'label': 'Show', 'value': 1},
            {'label': 'Hide', 'value': 0}
        ],
        clearable=False,
        multi=False,
        value=1,
        style={'width': '400px'}
    ),
    dashbio.NeedlePlot(
        id='dashbio-default-needleplot',
        mutationData=mdata
    )
])

@callback(
    Output('dashbio-default-needleplot', 'rangeSlider'),
    Input('default-needleplot-rangeslider', 'value')
)
def update_needleplot(show_rangeslider):
    return True if show_rangeslider else False

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

Customization

Needle Style

Change the appearance of the needles.

import json
import urllib.request as urlreq
import dash_bio as dashbio


data = urlreq.urlopen(
    'https://git.io/needle_PIK3CA.json'
).read().decode('utf-8')

mdata = json.loads(data)

dashbio.NeedlePlot(
    mutationData=mdata,
    needleStyle={
        'stemColor': '#FF8888',
        'stemThickness': 2,
        'stemConstHeight': True,
        'headSize': 10,
        'headColor': ['#FFDD00', '#000000']
    }
)

Domain Style

Change the appearance of the domains.

import json
import urllib.request as urlreq
import dash_bio as dashbio


data = urlreq.urlopen(
    'https://git.io/needle_PIK3CA.json'
).read().decode('utf-8')

mdata = json.loads(data)

dashbio.NeedlePlot(
    mutationData=mdata,
    domainStyle={
        'displayMinorDomains': True,
        'domainColor': ['#FFDD00', '#00FFDD', '#0F0F0F', '#D3D3D3']
    }
)

NeedlePlot Properties

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

help(dash_bio.NeedlePlot)
```

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.

mutationData (dict; default { x: [], y: [], domains: [], mutationGroups: [],}):
The data that are displayed on the plot.

mutationData is a dict with keys:

  • domains (list; optional)

  • mutationGroups (list of strings; optional)

  • x (string | list; optional)

  • y (string | list; optional)

margin (dict; default {t: 100, l: 40, r: 0, b: 40}):
Margins of the plot.

xlabel (string; optional):
Title of the x-axis.

ylabel (string; optional):
Title of the y-axis.

rangeSlider (boolean; default False):
If True, enables a rangeslider for the x-axis.

needleStyle (dict; default { stemColor: '#444', stemThickness: 0.5, stemConstHeight: False, headSize: 5, headColor: [ '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999', '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999', '#e41a1c', ], headSymbol: 'circle',}):
Options for the needle marking single site mutations.

needleStyle is a dict with keys:

  • headColor (list | string; optional)

  • headSize (number; optional)

  • headSymbol (list | string; optional)

  • stemColor (string; optional)

  • stemConstHeight (boolean; optional)

  • stemThickness (number; optional)

domainStyle (dict; default { displayMinorDomains: False, domainColor: [ '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f', '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', ], textangle: 0,}):
Options for the protein domain coloring.

domainStyle is a dict with keys:

  • displayMinorDomains (boolean; optional):
    The prop x sometimes contains smaller domains (e.g. multi-site
    mutations), if True, these are displayed.

  • domainColor (list; optional)

  • textangle (number; optional):
    Sets the angle at which the domain annotation text is drawn with
    respect to the horizontal.

clickData (list; optional):
An array of the points on the graph that have been clicked with
Plotly.js clickEvents.

width (number | string; default 700):
Width of the Plot.

height (number | string; default 800):
Height of the Plot.

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.

Example Data