Circos Examples and Reference


Default Circos

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

import json
import six.moves.urllib.request as urlreq
from six import PY3

import dash
import dash_bio as dashbio
import dash_html_components as html
import dash_core_components as dcc


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

data = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'circos_graph_data.json'
).read()

if PY3:
    data = data.decode('utf-8')

circos_graph_data = json.loads(data)

app.layout = html.Div([
    dashbio.Circos(
        id='my-dashbio-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',
        options=[
            {'label': x, 'value': x}
            for x in ['histogram', 'chords']
        ],
        value='chords'
    ),
    "Event data:",
    html.Div(id='circos-output')
])


@app.callback(
    dash.dependencies.Output('circos-output', 'children'),
    [dash.dependencies.Input('my-dashbio-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(
    dash.dependencies.Output('my-dashbio-circos', 'tracks'),
    [dash.dependencies.Input('histogram-chords', 'value')],
    state=[dash.dependencies.State('my-dashbio-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:

Inner And Outer Radii

Change the inner and outer radii of your Circos graph.

import json
from six.moves.urllib import request as urlreq
import dash_bio as dashbio

data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/circos_graph_data.json').read()
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
    }
)  

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

help(dash_bio.Circos)
```

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

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

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”.

id (string; optional): The ID of the component to be used in Dash callbacks

layout (dict; required): The overall layout of the Circos graph, provided as a list of dictionaries. layout has the following type: list of dicts containing keys ‘len’, ‘color’, ‘label’, ‘id’. Those keys have the following types:

  • len (number; required): The length of the block.
  • color (string; required): The color of the block.
  • label (string; required): The labels of the block.
  • id (string; required): The id of the block, where it will recieve data from the specified “track” id.

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

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.

tracks (dict; optional): Tracks that specify specific layouts. For a complete list of tracks and usage, please check the docs. tracks has the following type: list of dicts containing keys ‘id’, ‘data’, ‘config’, ‘type’, ‘tooltipContent’, ‘color’. Those keys have the following types:

  • id (string; optional): The id of a specific piece of track data.
  • data (list; required): The data that makes up the track. It can be a Json object.
  • config (dict; optional): The layout of the tracks, where the user can configure innerRadius, outterRadius, ticks, labels, and more.
  • type (optional): Specify the type of track this is. Please check the docs for a list of tracks you can use, and ensure the name is typed in all capitals.
  • tooltipContent (dict; optional): Specify what data for tooltipContent is displayed. The entry for the “name” key, is any of the keys used in the data loaded into tracks. Ex: “tooltipContent”: {“name”: “block_id”}, To display all data in the dataset use “all” as the entry for the key “name”. Ex: “tooltipContent”: {“name”: “all”} Ex: This will return (source) + ‘ > ‘ + (target) + ‘: ‘ + (targetEnd)’. “tooltipContent”: { “source”: “block_id”, “target”: “position”, “targetEnd”: “value” }, Ex: This will return (source)(sourceID) + ‘ > ‘ + (target)(targetID) + ‘: ‘ (target)(targetEnd)’. “tooltipContent”: { “source”: “source”, “sourceID”: “id”, “target”: “target”, “targetID”: “id”, “targetEnd”: “end” }. tooltipContent has the following type: string | dict containing keys ‘name’. Those keys have the following types: - name (string; required) | dict containing keys ‘source’, ‘sourceID’, ‘target’, ‘targetEnd’, ‘targetID’. Those keys have the following types: - source (string; required) - sourceID (string; optional) - target (string; required) - targetEnd (string; required) - targetID (string; optional)
  • color (dict; optional): Specify which dictonary key to grab color values from, in the passed in dataset. This can be a string or an object. If using a string, you can specify hex, RGB, and colors from d3 scale chromatic (Ex: RdYlBu). The key “name” is required for this dictionary, where the input for “name” points to some list of dictionaries color values. Ex: “color”: {“name”: “some key that refers to color in a data set”}. color has the following type: string | dict containing keys ‘name’. Those keys have the following types: - name (string; required)