def test_dbci001_graph_type(dash_duo): app = dash.Dash(__name__) app.layout = html.Div(simple_app_layout( dash_bio.Circos( id=_COMPONENT_ID, layout=_data['GRCh37'], ) )) histogram_layout = [ {'type': 'HISTOGRAM', 'data': _data['histogram'][:5]} ] simple_app_callback( app, dash_duo, component_id=_COMPONENT_ID, test_prop_name='tracks', test_prop_value=json.dumps(histogram_layout), prop_value_type='dict', validation_fn=lambda x: json.dumps(x) == json.dumps(histogram_layout) ) # there should be five bins in the histogram assert len(dash_duo.find_elements('path.bin')) == 5
def test_dbci002_inner_outer_radii(dash_duo): app = dash.Dash(__name__) app.layout = html.Div(simple_app_layout( dash_bio.Circos( id=_COMPONENT_ID, layout=_data['GRCh37'] ) )) change_radii_config = {'innerRadius': 20, 'outerRadius': 100} simple_app_callback( app, dash_duo, component_id=_COMPONENT_ID, test_prop_name='config', test_prop_value=json.dumps(change_radii_config), prop_value_type='dict', validation_fn=lambda x: x['innerRadius'] == change_radii_config['innerRadius'] and x['outerRadius'] == change_radii_config['outerRadius'] ) chr_one_div = dash_duo.find_element('path#chr1') assert int(chr_one_div.size['width']) == 41 assert int(chr_one_div.size['height']) == 81
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/sample_data/circos_graph_data.json').read() 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'] ],
dashbio.Circos( id='my-dashbio-circos', layout=j2['GRCh37'], style={'fontWeight': 100}, selectEvent={ "0": "hover", "1": "click", "2": "both" }, config={ 'innerRadius': 650 / 2 - 80, 'outerRadius': 650 / 2 - 40, 'ticks': { 'display': False, 'labelDenominator': 1000000 }, 'labels': { 'position': 'center', 'display': True, 'size': 11, 'color': '#fff', 'radialOffset': 75, }, }, tracks=[{ 'type': 'HIGHLIGHT', 'data': j4['cytobands'], 'config': { 'innerRadius': 650 / 2 - 80, 'outerRadius': 650 / 2 - 40, 'opacity': 0.3, 'tooltipContent': { "name": "name" }, 'color': { 'name': 'color' }, }, }], ),
# copy docs code here data = urlreq.urlopen( "https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-circos/data/graph_data.json" ).read().decode("utf-8") circos_graph_data = json.loads(data) component = html.Div(dashbio.Circos(id='my-dashbio-circos', layout=circos_graph_data['GRCh37'], tracks=[{ 'type': 'CHORDS', 'data': circos_graph_data['chords'], 'opacity': 0.7, 'color': { 'name': 'color' }, 'config': { 'tooltipContent': { 'source': 'source', 'sourceID': 'id', 'target': 'target', 'targetID': 'id', 'targetEnd': 'end' } } }]), style={ 'transform': 'scale(0.5)', 'width': '200vw', 'margin-left': '-50vw', 'margin-top': '-150px', 'text-align': 'center'
html.Div( [ # ➊ グラフの種類を選択するRadioItemsコンポーネント dcc.RadioItems( id="radio-value", options=[ {"label": "ヒストグラム外側表示", "value": "ヒストグラム外側表示"}, {"label": "ヒストグラム内側表示", "value": "ヒストグラム内側表示"}, ], value="ヒストグラム外側表示", ) ], style={"textAlign": "center"}, ), # ➋ Circosコンポーネント dashbio.Circos(id="circos", layout=circos_graph_data["GRCh37"]), ], style={"width": "60%", "margin": "5% auto"}, ) # ➌ 選択されたグラフのtracksを返り値とするコールバック @app.callback(Output("circos", "tracks"), Input("radio-value", "value")) def update_graph(selected_value): if selected_value == "ヒストグラム外側表示": return [ { # ➍ グラフの種類の設定。外側にヒストグラム表示 "type": "HISTOGRAM", # ➎ 表示グラフ用データ "data": circos_graph_data["histogram"], }
dashbio.Circos( # ➊ グラフの円枠を作成する layout=[ {"id": "1", "label": "1", "color": "lime", "len": 100}, {"id": "2", "label": "2", "color": "pink", "len": 200}, {"id": "3", "label": "3", "color": "purple", "len": 150}, {"id": "4", "label": "4", "color": "skyblue", "len": 70}, {"id": "5", "label": "5", "color": "yellow", "len": 180}, ], # ➋ 円枠以外のグラフを作成する tracks=[ { # ➌ 作成するグラフの種類を設定する "type": "CHORDS", # ➍ グラフのデータを渡す "data": [ { "source": {"id": "1", "start": 50, "end": 100}, "target": {"id": "3", "start": 30, "end": 50}, }, { "source": {"id": "1", "start": 30, "end": 50}, "target": {"id": "4", "start": 0, "end": 70}, }, { "source": {"id": "2", "start": 100, "end": 200}, "target": {"id": "5", "start": 30, "end": 50}, }, { "source": {"id": "3", "start": 100, "end": 150}, "target": {"id": "3", "start": 0, "end": 30}, }, ], "opacity": 0.7, "color": {"name": "color"}, "config": { # マウスホバー時に表示するデータを設定する "tooltipContent": { "source": "source", "sourceID": "id", "target": "target", "targetID": "id", "targetEnd": "end", } }, } ], )
"label": disease, "value": disease } for disease in df[cols[0]]], value=df[cols[0]].iloc[0]), dcc.Graph(id="barplot") ]), html.Div([ html.H3("Circos Graph"), dashbio.Circos(id="circos", layout=layout_data, tracks=[{ 'type': 'CHORDS', 'data': circos_data, 'config': { 'tooltipContent': { 'source': 'source', 'sourceID': 'id', 'target': 'target', 'targetID': 'id', 'targetEnd': 'end' } } }]) ]) ]) ]) layout_page_1 = html.Div([ html.H2('Circos Graph'), #Header of page #specify Circos graph layout
def get_circos(atlas=None, data=None): C_DATA, COLOR = get_circos_data(data) if atlas != None: for i in range(len(C_DATA['chords'])): if C_DATA['chords'][i]['id'] == atlas: C_DATA['chords'][i]['color'] = '#000000ff' else: C_DATA['chords'][i]['color'] = '#00000022' c = copy.deepcopy(COLOR) for i in range(66): p = excel_file['Module number'][i] C_DATA['cytobands'][i]['color'] = c[p - 1][0] if i == atlas: C_DATA['cytobands'][i]['color'] = C_DATA['GRCh37'][p - 1]['color'] del c[p - 1][0] return dash_bio.Circos( id='main-circos', selectEvent={ '0': 'hover', '1': 'click' }, layout=C_DATA['GRCh37'], config={ 'innerRadius': 240, 'outerRadius': 300, 'ticks': { 'display': False, 'labelDenominator': 10000 }, 'labels': { 'position': 'center', 'display': False, 'size': 6, 'color': '#000', 'radialOffset': 70, }, }, tracks=[ { 'type': 'HIGHLIGHT', 'data': C_DATA['cytobands'], 'config': { 'innerRadius': 240, 'outerRadius': 270, #'opacity': 0.3, 'color': { 'name': 'color' }, 'tooltipContent': { 'name': 'Name' }, }, }, { 'type': 'HIGHLIGHT', 'data': C_DATA['cytobands_out'], 'config': { 'innerRadius': 270, 'outerRadius': 300, #'opacity': 0.3, 'color': { 'name': 'color' }, 'tooltipContent': { 'name': "Name" }, }, }, { 'type': 'CHORDS', 'data': C_DATA['chords'], 'config': { 'tooltipContent': { 'source': 'source', 'sourceID': 'id', 'target': 'target', 'targetID': 'id', 'targetEnd': 'end', }, 'logScale': False, #'opacity': {'value' : 'opacity'}, 'color': { 'name': 'color' }, }, }, ], size=750, )