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()


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