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 
using Dash, DashBio
using StringEncodings, HTTP, JSON

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash(external_stylesheets=external_stylesheets)

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = html_div([
    "Show or hide range slider",
    dcc_dropdown(
        id="default-needleplot-rangeslider",
        options=[
            Dict("label" => "Show", "value" => 1),
            Dict("label" => "Hide", "value" => 0)
        ],
        clearable=false,
        multi=false,
        value=1,
        style=Dict("width" => "400px")
    ),
    dashbio_needleplot(
        id="dashbio-default-needleplot",
        mutationData=mdata
    )
])

callback!(app,
    Output("dashbio-default-needleplot", "rangeSlider"),
    [Input("default-needleplot-rangeslider", "value")]
) do show_rangeslider
    return (show_rangeslider == 1) ? true : false
end

run_server(app, "0.0.0.0", debug=true)

Customization

Needle Style

Change the appearance of the needles.

using Dash, DashBio
using StringEncodings, HTTP, JSON

app = dash()

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = dashbio_needleplot(
    mutationData=mdata,
    needleStyle=Dict(
        "stemColor" => "#FF8888",
        "stemThickness" => 2,
        "stemConstHeight" => true,
        "headSize" => 10,
        "headColor" => ["#FFDD00", "#000000"]
    )
)

run_server(app, "0.0.0.0", debug=true)

Domain Style

Change the appearance of the domains.

using Dash, DashBio
using StringEncodings, HTTP, JSON

app = dash()

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = dashbio_needleplot(
    mutationData=mdata,
    domainStyle=Dict(
        "displayMinorDomains" => true,
        "domainColor" => ["#FFDD00", "#00FFDD", "#0F0F0F", "#D3D3D3"]
    )
)

run_server(app, "0.0.0.0", debug=true)

NeedlePlot Properties

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 (Array; optional)

  • mutationGroups (Array of Strings; optional)

  • x (String | Array; optional)

  • y (String | Array; 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 (Bool; 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 (Array | String; optional)

  • headSize (Real; optional)

  • headSymbol (Array | String; optional)

  • stemColor (String; optional)

  • stemConstHeight (Bool; optional)

  • stemThickness (Real; 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 (Bool; optional):
    The prop x sometimes contains smaller domains (e.g. multi-site
    mutations), if true, these are displayed.

  • domainColor (Array; optional)

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

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

width (Real | String; default 700):
Width of the Plot.

height (Real | 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 (Bool; optional):
    Determines if the component is loading or not.

  • prop_name (String; optional):
    Holds which property is loading.

Example Data