dash_bio.Circos Examples and Reference

see Circos in action.

Graph

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

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

from dash_docs.utils import DatasetLoader

app = dash.Dash(__name__)

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

circos_graph_data = json.loads(data)

app.layout = html.Div([
    dashbio.Circos(
        id='my-dashbio-default-circos',
        layout=circos_graph_data['GRCh37'],
        selectEvent={"0": "hover", "1": "click", "2": "both"},
        tracks=[{
            'type': 'CHORDS',
            'data': circos_graph_data['chords'],
            'config': {
                'tooltipContent': {
                    'source': 'source',
                    'sourceID': 'id',
                    'target': 'target',
                    'targetID': 'id',
                    'targetEnd': 'end'
                }
            }
        }]
    ),
    "Graph type:",
    dcc.Dropdown(
        id='histogram-chords-default-circos',
        options=[
            {'label': x, 'value': x}
            for x in ['histogram', 'chords']
        ],
        value='chords'
    ),
    "Event data:",
    html.Div(id='default-circos-output')
])

@app.callback(
    Output('default-circos-output', 'children'),
    Input('my-dashbio-default-circos', 'eventDatum')
)
def update_output(value):
    if value is not None:
        return [html.Div('{}: {}'.format(v.title(), value[v]))
                for v in value.keys()]
    return 'There are no event data. Click or hover on a data point to get more information.'

@app.callback(
    Output('my-dashbio-default-circos', 'tracks'),
    Input('histogram-chords-default-circos', 'value'),
    State('my-dashbio-default-circos', 'tracks')
)
def change_graph_type(value, current):
    if value == 'histogram':
        current[0].update(
            data=circos_graph_data['histogram'],
            type='HISTOGRAM'
        )

    elif value == 'chords':
        current[0].update(
            data=circos_graph_data['chords'],
            type='CHORDS',
            config={
                'tooltipContent': {
                    'source': 'source',
                    'sourceID': 'id',
                    'target': 'target',
                    'targetID': 'id',
                    'targetEnd': 'end'
                }
            }
        )
    return current

if __name__ == '__main__':
    app.run_server(debug=True)
Graph type:
Event data:

Customization

Inner And Outer Radii

Change the inner and outer radii of your Circos graph.

import json
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/circos_graph_data.json'
)
circos_graph_data = json.loads(data)

dashbio.Circos(
    layout=circos_graph_data['GRCh37'],
    tracks=[{
        'type': 'CHORDS',
        'data': circos_graph_data['chords']
    }],
    config={
        'innerRadius': 40,
        'outerRadius': 200
    }
)

Circos Properties

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

help(dash_bio.Circos)
```

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 the component to be used in Dash callbacks.

config (dict; optional):
Configuration of overall layout of the graph.

enableDownloadSVG (boolean; optional):
Allow for an SVG snapshot of the Circos graph to be downloaded.

enableZoomPan (boolean; optional):
Allow for zooming and panning the Circos graph.

eventDatum (dict; optional):
A Dash prop that returns data on clicking or hovering of the tracks.
Depending on what is specified for prop “selectEvent”.

layout (list of dicts; required):
The overall layout of the Circos graph, provided as a list of
dictionaries.

layout is a list of dicts with keys:

selectEvent (dict; optional):
A dictionary used to choose whether tracks should return data on
click, hover, or both, with the dash prop “eventDatum”. The keys of
the dictionary represent the index of the list specified for “tracks”.
Ex: selectEvent={ “0”: “hover”, “1”: “click”,
“2”: “both” },.

size (number; default 800):
The overall size of the SVG container holding the graph. Set on
initilization and unchangeable thereafter.

style (dict; optional):
The CSS styling of the div wrapping the component.

tracks (list of dicts; optional):
Tracks that specify specific layouts. For a complete list of tracks
and usage, please check the docs.

tracks is a list of dicts with keys:

Example Data