app.layout = html.Div([
html.Div([
html.Img(src=app.get_asset_url('logo.png'), style={'width': '30%', 'display': 'block', 'margin': 'auto'})
], className='banner'),
html.Div([
html.Div(
className="div-currency-toggles",
children=[
# html.P(
# className="six-col",
# children='',
# ),
# html.P(className="three-col", children="Value"),
html.Div(
id="pairs",
className="div-bid-ask",
children=[
get_row(get_realtime(pair))
for pair in CURRENCIES
],
),
],
),
html.Div([
# html.Label("Currency",
# style={'padding-left': '2px'}),
dcc.Dropdown(
id='currency',
options=[{'label': 'EUR/USD', 'value': 'eur_usd'}, {'label': 'BTC/USD', 'value': 'btc_usd'}],
value='eur_usd',
placeholder="Currency",
style={'width': '100%', 'display': 'inline-block'}
),
], style={'width': '100%', 'display': 'inline-block'}),
html.Br(),
html.Br(),
dcc.Tabs(id="tabs", children=[
dcc.Tab(label='Recurrent Neural Network ', value='rnn', selected_style={'backgroundColor': '#21252C', 'color': 'white'}),
dcc.Tab(label='Convolutional neural network', value='cnn', selected_style={'backgroundColor': '#21252C', 'color': 'white'}),
], value="rnn", colors={'border': 'gray', 'background': '#21252C'}),
html.Div([
dcc.Graph(id='graph'),
], className='twelve columns eur-usd-graph'),
html.Div([
dcc.Dropdown(id='type', options=[
{"label": "Line", "value": "line_trace"},
{"label": "Mountain", "value": "area_trace"},
{
"label": "Colored bar",
"value": "colored_bar_trace",
},
], value="line_trace", clearable=False, style={'width': '98%'}),
], className='twelve columns', style={'display': 'inline-block', 'width': '40%'}),
html.Div([
dcc.Dropdown(id='metric', options=[
{
"label": "Accumulation/D",
"value": "accumulation_trace",
},
{
"label": "Bollinger bands",
"value": "bollinger_trace",
},
{"label": "MA", "value": "moving_average_trace"},
{"label": "EMA", "value": "e_moving_average_trace"},
{"label": "CCI", "value": "cci_trace"},
{"label": "ROC", "value": "roc_trace"},
{"label": "Pivot points", "value": "pp_trace"},
{
"label": "Stochastic oscillator",
"value": "stoc_trace",
},
{
"label": "Momentum indicator",
"value": "mom_trace",
},
], clearable=True, style={'width': '100%'}, multi=True),
], className='twelve columns', style={'display': 'inline-block', 'width': '60%'}),
html.Div([
dcc.Graph(id='train'),
], className='twelve columns'),
dcc.Interval(id='update', interval=10 * 1000, n_intervals=0),
], className='row eur-usd-graph-row'),
], style={'padding': '0px 10px 15px 10px',
'marginLeft': '2%', 'marginRight': '2%',
'boxShadow': '0px 0px 5px 5px rgba(204,204,204,0.4)'})
app.layout = html.Div([
html.Div([ # page 1
html.A(['Print PDF'],
className="button no-print",
style={'position': "absolute", 'top': '-40', 'right': '0'}),
html.Div([ # subpage 1
# Row 1 (Header)
html.Div([
html.Div([
html.H5(
'Goldman Sachs Strategic Absolute Return Bond II Portfolio'),
html.H6('A sub-fund of Goldman Sachs Funds, SICAV',
style={'color': '#7F90AC'}),
], className="nine columns padded"),
html.Div([
html.H1(
[html.Span('03', style={'opacity': '0.5'}), html.Span('17')]),
html.H6('Monthly Fund Update')
], className="three columns gs-header gs-accent-header padded", style={'float': 'right'}),
], className="row gs-header gs-text-header"),
html.Br([]),
# Row 2
html.Div([
html.Div([
html.H6('Investor Profile',
className="gs-header gs-text-header padded"),
html.Strong('Investor objective'),
html.P('Capital appreciation and income.',
className='blue-text'),
html.Strong(
'Position in your overall investment portfolio*'),
html.P('The fund can complement your portfolio.',
className='blue-text'),
html.Strong('The fund is designed for:'),
html.P('The fund is designed for investors who are looking for a flexible \
global investment and sub-investment grade fixed income portfolio \
that has the ability to alter its exposure with an emphasis on interest \
rates, currencies and credit markets and that seeks to generate returns \
through different market conditions with a riskier investment strategy \
than GS Strategic Absolute Return Bond I Portfolio.' , className='blue-text'),
], className="four columns"),
html.Div([
html.H6(["Performance (Indexed)"],
className="gs-header gs-table-header padded"),
html.Iframe(src="https://plot.ly/~jackp/17553.embed?modebar=false&link=false&autosize=true", \
seamless="seamless", style={'border': '0', 'width': "100%", 'height': "250"})
], className="eight columns"),
], className="row "),
# Row 2.5
html.Div([
html.Div([
html.H6('Performance (%)',
className="gs-header gs-text-header padded"),
html.Table(make_dash_table(df_perf_pc),
className='tiny-header')
], className="four columns"),
html.Div([
html.P("This is an actively managed fund that is not designed to track its reference benchmark. \
Therefore the performance of the fund and the performance of its reference benchmark \
may diverge. In addition stated reference benchmark returns do not reflect any management \
or other charges to the fund, whereas stated returns of the fund do." ),
html.Strong("Past performance does not guarantee future results, which may vary. \
The value of investments and the income derived from investments will fluctuate and \
can go down as well as up. A loss of capital may occur." )
], className="eight columns"),
], className="row "),
# Row 3
html.Div([
html.Div([
html.H6('Fund Data',
className="gs-header gs-text-header padded"),
html.Table(make_dash_table(df_fund_data))
], className="four columns"),
html.Div([
html.H6("Performance Summary (%)",
className="gs-header gs-table-header padded"),
html.Table(modifed_perf_table, className="reversed"),
html.H6("Calendar Year Performance (%)",
className="gs-header gs-table-header padded"),
html.Table(make_dash_table(df_cal_year))
], className="eight columns"),
], className="row "),
], className="subpage"),
], className="page"),
html.Div([ # page 2
html.A(['Print PDF'],
className="button no-print",
style={'position': "absolute", 'top': '-40', 'right': '0'}),
html.Div([ # subpage 2
# Row 1 (Header)
html.Div([
html.Div([
html.H5(
'Goldman Sachs Strategic Absolute Return Bond II Portfolio'),
html.H6('A sub-fund of Goldman Sachs Funds, SICAV',
style={'color': '#7F90AC'}),
], className="nine columns padded"),
html.Div([
html.H1(
[html.Span('03', style={'opacity': '0.5'}), html.Span('17')]),
html.H6('Monthly Fund Update')
], className="three columns gs-header gs-accent-header padded", style={'float': 'right'}),
], className="row gs-header gs-text-header"),
# Row 2
html.Div([
# Data tables on this page:
# ---
# df_fund_info = pd.read_csv('https://plot.ly/~jackp/17544/.csv')
# df_fund_characteristics = pd.read_csv('https://plot.ly/~jackp/17542/.csv')
# df_fund_facts = pd.read_csv('https://plot.ly/~jackp/17540/.csv')
# df_bond_allocation = pd.read_csv('https://plot.ly/~jackp/17538/')
# Column 1
html.Div([
html.H6('Financial Information',
className="gs-header gs-text-header padded"),
html.Table(make_dash_table(df_fund_info)),
html.H6('Fund Characteristics',
className="gs-header gs-text-header padded"),
html.Table(make_dash_table(df_fund_characteristics)),
html.H6('Fund Facts',
className="gs-header gs-text-header padded"),
html.Table(make_dash_table(df_fund_facts)),
], className="four columns"),
# Column 2
html.Div([
html.H6('Sector Allocation (%)',
className="gs-header gs-table-header padded"),
html.Iframe(src="https://plot.ly/~jackp/17560.embed?modebar=false&link=false&autosize=true", \
seamless="seamless", style={'border': '0'}, width="100%", height="300"),
html.H6('Country Bond Allocation (%)',
className="gs-header gs-table-header padded"),
html.Table(make_dash_table(df_bond_allocation)),
], className="four columns"),
# Column 3
html.Div([
html.H6('Top 10 Currency Weights (%)',
className="gs-header gs-table-header padded"),
html.Iframe(src="https://plot.ly/~jackp/17555.embed?modebar=false&link=false&autosize=true", \
seamless="seamless", style={'border': '0'}, width="100%", height="300"),
html.H6('Credit Allocation (%)',
className="gs-header gs-table-header padded"),
html.Iframe(src="https://plot.ly/~jackp/17557.embed?modebar=false&link=false&autosize=true", \
seamless="seamless", style={'border': '0'}, width="100%", height="300"),
], className="four columns"),
], className="row"),
], className="subpage"),
], className="page"),
])
import dash_html_components as html
import dash_core_components as dcc
monthly_salary = html.Div(className="row mt-1",
children=[
html.Div(className="col-sm-4 mr-1",
children=["Monthly Salary (S$)"]),
dcc.Input(id="monthly-salary",
className="col-sm-2",
type="number",
value=0,
min=0,
pattern="[0-9]+")
])
bonus = html.Div(className="row mt-1",
children=[
html.Div(className="col-sm-4 mr-1",
children=["Annual Bonus (S$)"]),
dcc.Input(id="annual-bonus",
className="col-sm-2",
type="number",
value=0,
min=0,
pattern="[0-9]+")
])
rebates = html.Div(className="row mt-1",
children=[
html.Div(className="col-sm-4 mr-1",
children=["Total Tax Rebates (S$)"]),
# x = 'layout'
# y = 'rent'
# main_graph = MainGraph(df, ward, x, y)
app.layout = html.Div([
dcc.Dropdown(id='selectedWards',
options=wards,
value='shinagawa',
multi=True),
html.Div([
dcc.Dropdown(
id='x',
options=columns,
value='layout',
),
dcc.Dropdown(
id='y',
options=columns,
value='rent',
),
]),
html.Div(id='main-graph'),
html.Div(id='side-graph')
# dcc.Graph(
# id='main-graph',
# )
])
@app.callback(dash.dependencies.Output('main-graph', 'children'), [
dash.dependencies.Input('selectedWards', 'value'),
index_page = html.Div([
# This "header" will persist across pages
html.H2('Sample Analytics', style={'textAlign': 'center'}),
html.Div(
[
html.Div(
[
html.H5('2007 GPD Distribution',
style={'textAlign': 'center'}),
dcc.Graph(id='gGDPPie',
figure=go.Figure(data=[top7_trace])),
html.Div(id='gdpDistDiv')
#dcc.Link('Men earning detail', href='/apps/app1')
],
style={
'width': '70%',
'display': 'table-cell'
}),
html.Div([
html.
P('GDP distribution presented by pie chart, click on the pie chart to get detail information',
style={'textAlign': 'center'})
],
style={
'width': '30%',
'display': 'table-cell',
'verticalAlign': 'middle'
})
],
style={
'width': '100%',
'display': 'table'
}),
html.Div(
[
html.Div(
[
#html.H5('Gap distribution'),
#dcc.Graph(id='gGap', figure=go.Histogram(data=[advisor_trace]))
],
id='showinfo',
className="six columns"),
],
className="row"),
html.Div(
[
html.Div([
html.
P('GDP distribution historgram information. The distribution is very long tailed. US and China are two largest economic entities.',
style={'textAlign': 'center'})
],
style={
'width': '30%',
'display': 'table-cell',
'verticalAlign': 'middle'
}),
html.Div(
[
html.H5('2007 GDP Histogram',
style={'textAlign': 'center'}),
dcc.Graph(id='gGDPHist',
figure=go.Figure(data=[hist_trace])),
html.Div(id='gdpHistDiv')
#dcc.Link('Women earning detail', href='/apps/app2')
],
style={
'width': '70%',
'display': 'table-cell'
}),
],
style={
'width': '100%',
'display': 'table'
}),
html.Div(
[
html.H5('2007 GPD Table', style={'textAlign': 'center'}),
dt.DataTable(
rows=dfgdp2007.to_dict('records'),
# optional - sets the order of columns
columns=sorted(dfgdp2007.columns),
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'),
],
className="container")
])
app.layout = html.Div([
#########################Title
html.Div([html.H1("Transaction Network Graph")],
className="row",
style={'textAlign': "center"}),
#############################################################################################define the row
html.Div(
className="row",
children=[
##############################################left side two input components
html.Div(className="two columns",
children=[
dcc.Markdown(
d("""
**Time Range To Visualize**
Slide the bar to define year range.
""")),
html.Div(
className="twelve columns",
children=[
dcc.RangeSlider(id='my-range-slider',
min=2010,
max=2019,
step=1,
value=[2010, 2019],
marks={
2010: {
'label': '2010'
},
2011: {
'label': '2011'
},
2012: {
'label': '2012'
},
2013: {
'label': '2013'
},
2014: {
'label': '2014'
},
2015: {
'label': '2015'
},
2016: {
'label': '2016'
},
2017: {
'label': '2017'
},
2018: {
'label': '2018'
},
2019: {
'label': '2019'
}
}),
html.Br(),
html.Div(id='output-container-range-slider')
],
style={'height': '300px'}),
html.Div(className="twelve columns",
children=[
dcc.Markdown(
d("""
**Account To Search**
Input the account to visualize.
""")),
dcc.Input(id="input1",
type="text",
placeholder="Account"),
html.Div(id="output")
],
style={'height': '300px'})
]),
############################################middle graph component
html.Div(
className="eight columns",
children=[
dcc.Graph(id="my-graph",
figure=network_graph(YEAR, ACCOUNT))
],
),
#########################################right side two output component
html.Div(className="two columns",
children=[
html.Div(className='twelve columns',
children=[
dcc.Markdown(
d("""
**Hover Data**
Mouse over values in the graph.
""")),
html.Pre(id='hover-data',
style=styles['pre'])
],
style={'height': '400px'}),
html.Div(className='twelve columns',
children=[
dcc.Markdown(
d("""
**Click Data**
Click on points in the graph.
""")),
html.Pre(id='click-data',
style=styles['pre'])
],
style={'height': '400px'})
])
])
])
data_path = 'data/Mean_Temp_IMD_2017.csv'
df = pd.read_csv(data_path)
df = df.set_index('YEAR')
time_durations = df.columns
app.layout = html.Div([
html.Div([
html.Div([
dcc.Dropdown(id='time_durs',
options=[{
'label': i,
'value': i
} for i in time_durations],
value='Month')
],
style={
'width': '48%',
'display': 'inline-block'
})
]),
dcc.Graph(id='indicator-graphic')
])
@app.callback(Output('indicator-graphic', 'figure'),
[Input('time_durs', 'value')])
def update_graph(month):
dff = df[month]
page_layout = html.Div(children= [
html.Div(children=[
html.Div(children=[
html.Div(children=[
html.Center([
html.H3("COVID-19"),
html.H3("Dashboard")
])
], style= {
'width':'22%',
'display':'inline-block',
}, className= 'four columns'),
html.Div(children=[
html.Center([
html.B(children= [html.H3(format(total_cases_world,','), style={'color':'#FF3333'})]),
html.H5("Total cases in the world")
])
], style= {
'width':'22%',
'marginLeft':'8%',
'display':'inline-block',
'border':'thin lightgrey solid',
'box-shadow': '6px 6px 6px lightgrey',
'background-color': 'rgb(250, 250, 250)',
}, className= 'four columns'),
html.Div(children=[
html.Center([
html.B(children= [html.H3(format(int(total_recovered_world),','), style={'color':'#FF3333'})]),
html.H5("Total recoveries"),
])
], style= {
'width':'22%',
'marginLeft':'1%',
'display':'inline-block',
'border':'thin lightgrey solid',
'box-shadow': '6px 6px 6px lightgrey',
'background-color': 'rgb(250, 250, 250)',
}, className= 'four columns'),
html.Div(children=[
html.Center([
html.B(children= [html.H3(format(total_deaths_world,','), style={'color':'#FF3333'})]),
html.H5("Total deaths"),
])
], style= {
'width':'22%',
'display':'inline-block',
'marginLeft':'1%',
'border':'thin lightgrey solid',
'box-shadow': '6px 6px 6px lightgrey',
'background-color': 'rgb(250, 250, 250)',
}, className= 'four columns')
], style= {
'display':'inline-block',
'width':'100%',
}, className= 'row')
], style= {
'display':'inline-block',
'width':'100%',
'textAlign':'right'
}),
html.Hr(style={'height':'2px'}),
dcc.Tabs(
id= 'tab-select',
children= [
dcc.Tab(label= 'Country Statistics', value= 'tab-1'),
dcc.Tab(label= 'World Statistics', value= 'tab-2')
]
),
html.Br(),
html.Div(id= 'tab-content')
], style= {'width':'100%','backgroundColor':'white'})
fig.update_layout(hovermode='closest',
mapbox=dict(accesstoken=mapbox_access_token,
style='outdoors',
bearing=2,
center=go.layout.mapbox.Center(lat=-13,
lon=-53),
pitch=0,
zoom=3),
height=600)
fig.show()
return fig
def plot_tweets_per_destination():
fig = px.bar(tweets_per_dest, x='destination', y='tweets')
return fig
tweets_on_map = plot_tweets_map()
tweets_per_dest = plot_tweets_per_destination()
layout = html.Div([
html.H1('Travel mentions on Twitter (per destination)',
style={"textAlign": "center"}),
dcc.Graph(id='my-tweets', figure=tweets_on_map),
html.H1('Most travel destinations mentioned',
style={"textAlign": "center"}),
dcc.Graph(id='my-tweets-bar', figure=tweets_per_dest)
])
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
from datetime import datetime
import time
app = dash.Dash()
app.layout = html.Div(
[
html.Button("execute fast callback", id="button_3"),
html.Button("execute slow callback", id="button_4"),
html.Div(children="callback not executed", id="first_output_3"),
html.Div(children="callback not executed", id="second_output_3"),
html.Div(children="callback not executed", id="third_output_3"),
]
)
@app.callback(
Output("first_output_3", "children"),
Input("button_3", "n_clicks"))
def first_callback(n):
now = datetime.now()
current_time = now.strftime("%H:%M:%S")
return "in the fast callback it is " + current_time
@app.callback(
Output("second_output_3", "children"), Input("button_4", "n_clicks"))
def second_callback(n):
time.sleep(1)
def layout():
return html.Div(
id='forna-body',
className='app-body',
children=[
html.Div(
id='forna-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(id='forna-tabs', value='what-is', children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(className='control-tab', children=[
html.H4(className='what-is', children='What is FornaContainer?'),
dcc.Markdown('''
FornaContainer is a force-directed graph that is
used to represent the secondary structure of nucleic
acids (i.e., DNA and RNA).
In the "Add New" tab, you can enter a sequence
by specifying the nucleotide sequence and the
dot-bracket representation of the secondary
structure.
In the "Sequences" tab, you can select which
sequences will be displayed, as well as obtain
information about the sequences that you have
already created.
In the "Colors" tab, you can choose to color each
nucleotide according to its base, the structural
feature to which it belongs, or its position in
the sequence; you can also specify a custom color
scheme.
The example RNA molecule shown has ID
[PDB_01019](http://www.rnasoft.ca/strand/show_results.php?molecule_ID=PDB_01019)
on the [RNA Strand](http://www.rnasoft.ca/strand/) database.
''')
])
),
dcc.Tab(
label='Add New',
value='add-sequence',
children=html.Div(className='control-tab', children=[
html.Div(
title='Enter a dot-bracket string and a nucleotide sequence.',
className='app-controls-block',
children=[
html.Div(className='fullwidth-app-controls-name',
children='Sequence'),
html.Div(
className='app-controls-desc',
children='Specify the nucleotide sequence as a string.'
),
dcc.Input(
id='forna-sequence',
placeholder=initial_sequences['PDB_01019']['sequence']
),
html.Br(),
html.Br(),
html.Div(className='fullwidth-app-controls-name',
children='Structure'),
html.Div(
className='app-controls-desc',
children='Specify the RNA secondary structure '
'with a dot-bracket string.'
),
dcc.Input(
id='forna-structure',
placeholder=initial_sequences['PDB_01019']['structure']
),
]
),
html.Div(
title='Change some boolean properties.',
className='app-controls-block',
children=[
html.Div(className='app-controls-name',
children='Apply force'),
daq.BooleanSwitch(
id='forna-apply-force',
on=True,
color='#85002D'
),
html.Div(
className='app-controls-desc',
children='Indicate whether the force-directed layout ' +
'will be applied to this molecule.'
),
html.Br(),
html.Div(className='app-controls-name',
children='Circularize external'),
daq.BooleanSwitch(
id='forna-circularize-external',
on=True,
color='#85002D'
),
html.Div(
className='app-controls-desc',
children='Indicate whether the external loops ' +
'should be forced to be arranged in a circle.'
),
html.Br(),
html.Div(className='app-controls-name',
children='Avoid others'),
daq.BooleanSwitch(
id='forna-avoid-others',
on=True,
color='#85002D'
),
html.Div(
className='app-controls-desc',
children='Indicate whether this molecule should ' +
'"avoid" being close to other molecules.'
),
html.Br(),
html.Div(className='app-controls-name',
children='Label interval'),
dcc.Slider(
id='forna-label-interval',
min=1,
max=10,
value=5,
marks={i+1: str(i+1) for i in range(10)}
),
html.Div(
className='app-controls-desc',
children='Indicate how often nucleotides are ' +
'labelled with their number.'
)
]
),
html.Div(
className='app-controls-block',
children=[
html.Div(className='fullwidth-app-controls-name',
children='ID'),
html.Div(
className='app-controls-desc',
children='Specify a unique ID for this sequence.'
),
dcc.Input(id='forna-id', placeholder='PDB_01019')
]
),
html.Hr(),
html.Div(id='forna-error-message'),
html.Button(id='forna-submit-sequence', children='Submit sequence'),
])
),
dcc.Tab(
label='Sequences',
value='show-sequences',
children=html.Div(className='control-tab', children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className='fullwidth-app-controls-name',
children='Sequences to display'
),
html.Div(
className='app-controls-desc',
children='Choose the sequences to display by ID.'
),
html.Br(),
dcc.Dropdown(
id='forna-sequences-display',
multi=True,
clearable=True,
value=['PDB_01019']
)
]
),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className='fullwidth-app-controls-name',
children='Sequence information by ID'
),
html.Div(
className='app-controls-desc',
children='Search for a sequence by ID ' +
'to get more information.'
),
html.Br(),
dcc.Dropdown(
id='forna-sequences-info-search',
clearable=True
),
html.Br(),
html.Div(id='forna-sequence-info')
]
)
]
)
])
),
dcc.Tab(
label='Colors',
value='colors',
children=html.Div(className='control-tab', children=[
html.Div(
className='app-controls-name',
children='Color scheme'
),
dcc.Dropdown(
id='forna-color-scheme',
options=[
{'label': color_scheme,
'value': color_scheme}
for color_scheme in [
'sequence', 'structure', 'positions', 'custom'
]
],
value='sequence',
clearable=False
),
html.Div(
className='app-controls-desc',
id='forna-color-scheme-desc',
children='Choose the color scheme to use.'
),
html.Div(
id='forna-custom-colorscheme',
className='app-controls-block',
children=[
html.Hr(),
html.Div(
className='app-controls-name',
children='Molecule name'
),
dcc.Dropdown(
id='forna-custom-colors-molecule'
),
html.Div(
className='app-controls-desc',
children='Select the sequence to which the custom ' +
'color scheme will be applied. If none is selected, ' +
'the color scheme will be applied to all molecules.'
),
html.Br(),
html.Div(
className='app-controls-name',
children='Coloring range'
),
daq.ColorPicker(
id='forna-color-low',
label='Low',
labelPosition='top',
value={'hex': '#BE0000'}
),
daq.ColorPicker(
id='forna-color-high',
label='High',
labelPosition='top',
value={'hex': '#336AFF'}
),
html.Div(
className='fullwidth-app-controls-name',
children='Coloring domain'
),
html.Div(
className='app-controls-desc',
children='Specify a minimum and maximum value ' +
'which will be used to calculate intermediate ' +
'colors for nucleotides that have a numerical ' +
'value specified below.'
),
html.Br(),
dcc.Input(
id='forna-color-domain-low',
type='number',
value=1
),
dcc.Input(
id='forna-color-domain-high',
type='number',
value=100
),
html.Br(),
html.Br(),
html.Div(
className='fullwidth-app-controls-name',
children='Colors map'
),
html.Div(
className='app-controls-desc',
children='Specify the colors for each ' +
'nucleotide by entering the position of ' +
'the nucleotide into the left input box, ' +
'and either a) a string representation ' +
'of a color or b) a number within the ' +
'range specified above. Then, press the ' +
'"Submit" button,'
),
html.Br(),
dcc.Input(
id='forna-color-map-nucleotide',
type='number',
min=1,
placeholder=1
),
dcc.Input(
id='forna-color-map-color',
placeholder='green'
),
html.Br(),
html.Br(),
html.Button(
id='forna-submit-custom-colors',
children='Submit'
)
]
)
])
)
])
]),
html.Div(id='forna-container', children=[
dash_bio.FornaContainer(
id='forna',
height=500,
width=500
)
]),
dcc.Store(id='forna-sequences', data=initial_sequences),
dcc.Store(id='forna-custom-colors')
]
)
app.layout = html.Div([
html.Div([
html.Div([
dcc.RadioItems(
id='countries-radio',
options=[{'label': k, 'value': k} for k in all_options.keys()],
value='温度'
)
],
style={'width': '49%', 'height': '250px', 'float': 'center', 'display': 'inline-block'}
),
html.Div([
dcc.RadioItems(id='cities-radio')
],
style={'width': '49%', 'float': 'right', 'display': 'inline-block'}
),
html.Div([
html.Hr(),
html.Div(id='display-selected-values')
]),
html.Div([
dcc.Dropdown(
id='demo-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='NYC'
),
html.Div(id='dd-output-container')
]),
html.Hr(),
html.Div([
dcc.Slider(
id='my-slider',
min=0,
max=9,
marks={i: 'Label {}'.format(i) for i in range(10)},
value=5,
),
html.Div(id='slider-output-container')
]),
html.Hr(),
html.Div([
dcc.Checklist(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'SF'],
labelStyle={'display': 'inline-block'}
)
]),
html.Hr(),
html.Div([
dcc.DatePickerSingle(
id='my-date-picker-single',
min_date_allowed=dt(1995, 8, 5),
max_date_allowed=dt(2017, 9, 19),
initial_visible_month=dt(2017, 8, 5),
date=str(dt(2017, 8, 25, 23, 59, 59))
),
html.Div(id='output-container-date-picker-single')
]),
html.Hr(),
html.Div([
dcc.RadioItems(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL',
labelStyle={'display': 'inline-block'}
)
]),
])
])
app.layout = html.Div([
html.Div([
dcc.Dropdown(
id='column_type',
options=[{
'label': k,
'value': k
} for k in all_options.keys()],
value='item_part',
),
dcc.Dropdown(id='company_type', value='adidas'),
html.Div([
dcc.Input(id='startdate_input', type='Date',
value=dt.date.today()),
dcc.Input(id='enddate_input', type='Date', value=dt.date.today()),
]),
],
style={
'width': 200,
'height': 200
}),
html.Button(id='submit_button',
n_clicks=0,
children='Submit',
style={
'fontSize': 20,
'height': 50
}),
dcc.Graph(id='feature-graphic'),
dcc.Markdown(id='content_text', containerProps={'fontSize': 200}),
])
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
html.H1(
children='Hello Dash',
style={
'textAlign': 'center',
'color': colors['text']
}
),
html.Div(children='Dash: A web application framework for Python.', style={
'textAlign': 'center',
'color': colors['text']
}),
dcc.Graph(
id='example-graph-2',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text']
}
}
}
)
])
def upload_message(msg):
"""Method that creates a DIV with a message."""
return html.Div([msg],
style=get_default_style(borderStyle=None, margin=None))
dash_vtk.ImageData(
dimensions=[10, 10, 10],
spacing=[1, 1, 1],
origin=[-4, -4, -4],
children=[
dash_vtk.PointData([
dash_vtk.DataArray(
registration='setScalars',
values=field,
)
])
],
),
]),
])
# Dash setup
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(
style={
"width": "100%",
"height": "calc(100vh - 15px)"
},
children=[content],
)
if __name__ == "__main__":
app.run_server(debug=True)
# Create a Dash layout that contains a Graph component:
app.layout = html.Div([
dcc.Graph(
id='Practice Class',
figure={
'data': [
go.Scatter(x=x_values,
y=y_values,
mode='markers',
marker={
'size': 12,
'color': 'rgb(0,255,0)',
'symbol': 'circle',
})
],
'layout':
go.Layout(
title='Old Faithful Eruption Intervals Vs Duration',
xaxis={
'title':
'Duration of the current eruption in minutes (to nearest 0.1 minute)'
},
yaxis={
'title':
'Waiting time until the next eruption in minutes (to nearest minute)'
})
})
])
# Add the server clause:
# set up an layout
app.layout = html.Div(children=[
# append the visualization to the page
dcc.Graph(
id='example-graph',
figure={
# configure the data
'data': [
go.Scatter(
# setting x as fat, and y as calories (points represent data)
x= df['fat'],
y = df['calories'],
mode = 'markers',
text = df ['name'],
marker = {
'size': 12,
'color': 'rgb(0,255,0)'
}
)
],
# configure the layout of the visualization --
# set the title
'layout': {
'title': 'Fat vs. Calories',
'xaxis': {'title': 'Fat (g)'},
'yaxis': {'title': 'Calories'}
}
}
)
])
"type": "terrainRGB",
"applyColorScale": True,
"applyHillshading": True,
"ambientLightIntensity": 0.5,
"diffuseLightIntensity": 0.5
},
},
],
},
],
colorBar={"position": "bottomleft"},
defaultBounds=[[0, 0], [30, 30]],
mouseCoords={
"coordinatePosition": "bottomright",
},
updateMode="",
minZoom=-5,
)
app = dash.Dash(__name__)
app.layout = html.Div(
style={"height": "80vh"},
children=leaflet_map_1,
)
app.run_server(debug=True)
app.layout = html.Div([
html.Div([
#--header section
html.Div([
html.H1('Medical Book clustering'),
], style={'text-align': 'left','width': '49%', 'display': 'inline-block','vertical-align': 'middle'}),
html.Div([
html.H4('Project by E. kenneth'),
html.Label('NLP with Plotly Dash: An unsupervised approach to clustering medical acheological books for insight discovery. \
Hover flexibilty,\
principal component analysis for dimension reduction, \
and Kmeans clustering to visualize relationship among books.')
], style= {'width': '49%', 'display': 'inline-block','vertical-align': 'middle', 'font-size': '12px'})
], style={'background-color': 'white', 'box-shadow': 'black 0px 1px 0px 0px'}),
#--scaling section
html.Div([
html.Div([
html.Label('Cluster size: Default is optimum'),
dcc.RadioItems(
#---
id='cluster',
options = [{'label': i, 'value': i} for i in [str(x) for x in np.arange(2, 7, 1)]],
value = "3",
labelStyle={'display': 'inline-block'}
),
], style = {'display': 'inline-block', 'width': '20%'}),
html.Div([
html.Label('Number of Topics:'),
dcc.RadioItems(
#---
id='topic-number',
options = [{'label': i, 'value': i} for i in [str(x) for x in np.arange(5, 11, 1)]],
value = "5",
labelStyle={'display': 'inline-block'}
),
], style = {'display': 'inline-block', 'width': '20%'}),
html.Div([
html.Label('y-scale:'),
dcc.RadioItems(
#---
id='y-items',
options = [{'label': i, 'value': i} for i in ['Linear', 'Log']],
value = "Linear",
labelStyle={'display': 'inline-block'}
),
], style = {'display': 'inline-block', 'width': '20%'}),
#--- Token length
html.Div([
html.Label('Token length:'),
dcc.RadioItems(
#---
id='tokens',
options = [{'label': i, 'value': i} for i in [str(x) for x in np.arange(5, 11, 1)]],
value = "5",
labelStyle={'display': 'inline-block'}
),
], style = {'display': 'inline-block', 'width': '20%'}),
#--- Sort Tags
html.Div([
html.Label('Sort Tags'),
dcc.RadioItems(
#---
id='Sort-Tags',
options = [{'label': i, 'value': i} for i in ['A-z', 'Most Tags']],
value = "Most Tags",
labelStyle={'display': 'inline-block'}
),
], style = {'display': 'inline-block', 'width': '20%'})
], style={'background-color': 'rgb(204, 230, 244)', 'padding': '1rem 0px', 'margin-top': '2px','box-shadow': 'black 0px 0px 1px 0px','vertical-align': 'middle'}),
#-- Graphs
html.Div([
html.Div([
dcc.Dropdown(
#---
id='dd',
options =[{'label': i, 'value': i} for i in list(data.book_category_name.unique())],
value = [],
placeholder = 'Select a category',
multi = True,
),
dcc.Graph(id = 'scatter_plot',
# style={'width': '690px', 'height': '395px'},
config = config,
hoverData={'points': [{'customdata': ["06_07", "Paris", "Broussais, F.-J.-V.", "Histoire des phlegmasies ou inflammations chroniques (2 vols.)", 1808]}]}
),
# ], style = {'display': 'inline-block', 'width': '65%','background-color': 'white'}),
],style = {'display': 'inline-block', 'background-color': 'white', 'width': '65%', 'padding': '0 20','vertical-align': 'middle'}),
#--horizontal dynamic barplot
html.Div([
dcc.Graph(id = 'bar_plot',
config = config,
)
],style = {'display': 'inline-block', 'background-color': 'white', 'width': '35%','vertical-align': 'middle'}),
html.Div([
dcc.RangeSlider(
id='year-slider',
min=data.year_edited.min(),
max=data.year_edited.max(),
updatemode='drag',
value = [data.year_edited.min(), data.year_edited.max()],
marks={str(year): str(year) for year in range(data.year_edited.min(), data.year_edited.max(), 5)}
),
], style = {'background-color': 'white', 'display': 'inline-block', 'width': '65%', 'padding': '0px 20px 20px 20px','vertical-align': 'middle'}),
], style = {'background-color': 'white','margin': 'auto', 'width': '100%', 'display': 'inline-block'}),
#-- Footer section
html.Div([
#--footer section
html.Div([
html.Div([
html.H2(id = 'topic')], style = {'color':' rgb(35, 87, 137)'}),
html.Div([
html.Label(id = 'date')], style = {'color':' black', 'font-weight': 'bold', 'display': 'inline-block'}),
html.Div([
html.Label(id = 'author')], style = {'color':' black', 'font-weight': 'bold', 'display': 'inline-block', 'padding': '0px 0px 10px 35px'}),
html.Div([
html.Label(id = 'cat')], style = {'color':' black', 'font-weight': 'bold', 'display': 'inline-block', 'padding': '0px 0px 10px 35px'}),
html.Label(id = 'label'),
], style= {'width': '74%', 'display': 'inline-block','vertical-align': 'middle', 'font-size': '15px'}),
html.Div([
html.H2('Topics'),
# html.Label(id = 'topic-tags'),
html.Label(id = 'topic-tags', style={'text-align': 'center', 'margin': 'auto', 'vertical-align': 'middle'})
], style={'text-align': 'center','width': '25%', 'display': 'inline-block','vertical-align': 'middle'}),
], style={'background-color': 'rgb(204, 230, 244)', 'margin': 'auto', 'width': '100%', 'max-width': '1200px', 'box-sizing': 'border-box', 'height': '30vh'}),
#---
#main div ends here
],style = {'background-color': 'rgb(204, 230, 244)','margin': 'auto', 'width': '100%', 'display': 'block'})
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
dcc.Input(id='my-id', value='hi', type='text'),
html.H1(id='my-header', children='header')
])
@app.callback(Output('my-header', 'children'), [Input('my-id', 'value')])
def update(input_value):
return f'{input_value}' * 2
if __name__ == '__main__':
app.run_server()
import pandas as pd
from dash.dependencies import Input, Output, State
from layout import *
app = dash.Dash(__name__,external_stylesheets=external_stylesheets, suppress_callback_exceptions = True)
server = app.server
app.index_string = open('index.html', 'r').read()
app.layout = dbc.Container([line,
#cards,
#line,
#dbc.Row([dbc.Col(card, md=8)]),
dbc.Row(dbc.Col(html.Div(card))),
dbc.Row([bar_plots,country_time_series]),
dbc.Row([new_cases_daily,total_africa]),
line
],
fluid = True,
style={'backgroundColor':'#303030'}
)
@app.callback(
Output('map_graph', 'figure'),
[
#Input('count_type', 'value'),
Input('count_category', 'value')
app.layout = html.Div(
id="content",
children=[
html.Div(
id="title",
children=[
html.H2(
'Comparative Analysis of COVID-19 by Levitt Lab Stanford',
style={
'color': '#36393b',
'font-family': 'Courier',
'font-weight': 'bold',
'font-size': '30px'
})
]),
html.Button('Clear selection', id='clear-button'),
dash_table.DataTable(
id='datatable-interactivity-ids',
columns=[{
"name": i,
"id": i,
"selectable": True
} for i in df_ratio.columns],
data=df_ratio.to_dict('records'),
hidden_columns=['Location1'],
css=[{
"selector": ".show-hide",
"rule": "display: none"
}],
fill_width=True,
style_header={
'textAlign': 'center',
'font_size': '16px',
'backgroundColor': 'rgb(50, 50, 50)',
'color': 'white'
},
fixed_rows={
'headers': True,
'data': 0
},
style_cell={
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'maxWidth': 0,
'textAlign': 'center',
'backgroundColor': 'rgb(239,239,239)',
'color': 'black',
},
style_data={
'font_size': '16px',
},
style_table={
'maxHeight': '400px',
'overflowY': 'scroll',
'border': 'thin lightgrey solid'
},
style_cell_conditional=[
{
'if': {
'column_id': 'Cases'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Deaths'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Peak_C'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Peak_D'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Start_C'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Start_D'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Class'
},
'width': '7%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Smoothing'
},
'width': '8%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Deaths/Cases(%)'
},
'width': '10%',
'textAlign': 'center'
},
{
'if': {
'column_id': 'Location'
},
'textAlign': 'left'
},
],
filter_action="native",
sort_action="custom",
sort_by=[],
sort_mode="multi",
row_selectable="multi",
selected_rows=[],
page_action="native",
),
html.Div(
id="text",
children=[
html.
P('(1) Smoothing is done using the original lowess FORTRAN code (W. S. Cleveland, Bell Labs, 1985). (2) Classification Code: ‘c’ means Cases peaked, ‘C’ means at least half way down the peak, ‘d’, ‘D’ are same for Deaths. The category order is from most complete ‘cCdD‘ to least complete ‘====‘. (3) Start Cases (Start_C) is the day the total number of cases exceed 50. Days are counted from 22 January 2020. (4) Peak Cases (Peak_C) is day new cases peak. Within a category, data is sorted by increasing date cases peaked.',
style={
'color': '#36393b',
'font-family': 'Courier',
'font-size': '12px'
})
]),
html.Div(id='plot-container',
style={
'width': '100%',
'display': 'flex',
'flex-wrap': 'wrap'
}),
])
app.layout = html.Div(
id="app-container",
children=[
# Banner
html.Div(
id="banner",
className="banner",
children=[html.Img(src=app.get_asset_url("logo.png"))],
),
html.Div(id="Welcome",
className="welcome",
children=[description_card()]),
html.Div(id="Map", className="MapDisplay", children=[Map()]),
html.Div(id="Center-left",
className="Centerl",
children=[
StationControl(),
DateControl(),
TimeControl(),
html.Br(),
html.Br(),
dcc.Graph(id="history-graph", style={'width': 600}),
]),
html.Div(id="Center-right",
className="Centerr",
children=[
ConditionControl(),
dcc.Graph(id="weather-graph",
style={
'width': 600,
'margin-top': 75
}),
]),
html.Div(
id="bottom-column",
className="eight columns",
children=[
# Patient Volume Heatmap
html.Div(
id="graph-display",
children=[],
),
],
),
],
)
for day in last_7_days:
crypto['x'].append(day)
crypto['y'].append(((d['sparkline_in_7d']['price'][j] -
d['sparkline_in_7d']['price'][j - 23]) /
d['sparkline_in_7d']['price'][j]) * 100)
j += 23
crypto_data.append(crypto)
return crypto_data
app = dash.Dash()
request_data = requests.get(
"https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=5&page=1&sparkline=true&price_change_percentage='1h'"
).json()
crypto_data = get_live_data(request_data)
app.layout = html.Div(children=[
html.H1('Live Crypto Trends'),
dcc.Graph(
id='crypto',
figure={
'data': crypto_data,
'layout': {
'title':
'past week price trend in perecentage of top 5 crypto currencies'
}
})
])
if __name__ == '__main__':
app.run_server(debug=True)
def TimeControl():
return html.Div(
id="submit",
children=[
dcc.Dropdown(id='hour_of_day',
options=[
{
'label': '00:00',
'value': '0'
},
{
'label': '01:00',
'value': '1'
},
{
'label': '02:00',
'value': '2'
},
{
'label': '03:00',
'value': '3'
},
{
'label': '04:00',
'value': '4'
},
{
'label': '05:00',
'value': '5'
},
{
'label': '06:00',
'value': '6'
},
{
'label': '07:00',
'value': '7'
},
{
'label': '08:00',
'value': '8'
},
{
'label': '09:00',
'value': '9'
},
{
'label': '10:00',
'value': '10'
},
{
'label': '11:00',
'value': '11'
},
{
'label': '12:00',
'value': '12'
},
{
'label': '13:00',
'value': '13'
},
{
'label': '14:00',
'value': '14'
},
{
'label': '15:00',
'value': '15'
},
{
'label': '16:00',
'value': '16'
},
{
'label': '17:00',
'value': '17'
},
{
'label': '18:00',
'value': '18'
},
{
'label': '19:00',
'value': '19'
},
{
'label': '20:00',
'value': '20'
},
{
'label': '21:00',
'value': '21'
},
{
'label': '22:00',
'value': '22'
},
{
'label': '23:00',
'value': '23'
},
{
'label': '24:00',
'value': '24'
},
],
style={
'width': 135,
'height': 30,
'margin-top': 10,
'margin-left': 10
},
value=1),
],
)
dr.put_into_database(db, api, username)
#MAIN DASHBOARD
app = dash.Dash()
app.layout = html.Div(
style={'backgroundColor': cp.getColor('background')},
children=[
html.H1(children='Twitter Data Analysis',
style={
'font-family': 'Roboto',
'textAlign': 'center',
'color': cp.getColor('twitter_blue')
}),
#Engagement Graph
html.H3(children='Engagement based on Likes and Retweets'),
gp.processComparisonGraph(db),
#Sentiment Analysis
html.H3(children='Sentiment Analysis'),
gp.processSentimentGraph(
sa.getSentimentScore(dc.getListOfTweetsWithoutRetweets(db))),
#Top 5 Table
html.H3(children='Top 5 Tweets (based on number of likes)'),
gp.generate_table(db)
])
if __name__ == '__main__':
app.run_server(debug=False)
app.layout = html.Div([
html.Div(dcc.Graph(id='wheels-plot',
figure={
'data': [
go.Scatter(x=dframe['color'],
y=dframe['wheels'],
dy=1,
mode='markers',
marker={'size': 15})
],
'layout':
go.Layout(title='Test', hovermode='closest')
}),
style={
'display': 'inline-block',
'vertical-align': 'top',
'float': 'left'
}),
html.Div(html.Img(id='hover-data',
src='children',
height=300,
width='auto',
style={'paddingTop': '35'}),
style={
'width': '30%',
'display': 'inline-block',
'vertical-align': 'top'
})
])
layout = html.Div([
dcc.Markdown(dedent('''
# Cytoscape Layouts
The layout parameter of `cyto.Cytoscape` takes as argument a
dictionary specifying how the nodes should be positioned on the screen.
Every graph requires this dictionary with a value specified for the
`name` key. It represents a built-in display method, which is one of the
following:
- `preset`
- `random`
- `grid`
- `circle`
- `concentric`
- `breadthfirst`
- `cose`
All those layouts (along with their options), are described in the
[official Cytoscape documentation](http://js.cytoscape.org/#layouts).
There, you can find the exact keys accepted by your dictionary, enabling
advanced fine-tuning (demonstrated below).
If preset is given, the positions will be rendered based on the positions
specified in the elements. Otherwise, the positions will be computed by
Cytoscape.js behind the scene, based on the given items of the layout
dictionary. Let's start with an example of declaring a graph with a preset
layout:
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-1',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'preset'
}
)
'''),
dcc.Markdown(dedent('''
> Here, we provided toy elements using geographically positioned nodes. If
> you'd like to reproduce this example by yourself, check out the code
> below.
''')),
html.Details(open=False, children=[
html.Summary('View Elements Declaration'),
dcc.SyntaxHighlighter(dedent('''
nodes = [
{
'data': {'id': short, 'label': label},
'position': {'x': 20*lat, 'y': -20*long}
}
for short, label, long, lat in (
('la', 'Los Angeles', 34.03, -118.25),
('nyc', 'New York', 40.71, -74),
('to', 'Toronto', 43.65, -79.38),
('mtl', 'Montreal', 45.50, -73.57),
('van', 'Vancouver', 49.28, -123.12),
('chi', 'Chicago', 41.88, -87.63),
('bos', 'Boston', 42.36, -71.06),
('hou', 'Houston', 29.76, -95.37)
)
]
edges = [
{'data': {'source': source, 'target': target}}
for source, target in (
('van', 'la'),
('la', 'chi'),
('hou', 'chi'),
('to', 'mtl'),
('mtl', 'bos'),
('nyc', 'boston'),
('to', 'hou'),
('to', 'nyc'),
('la', 'nyc'),
('nyc', 'bos')
)
]
elements = nodes + edges
'''))
]),
dcc.Markdown(dedent('''
## Display Methods
In most cases, the positions of the nodes will not be given. In those
cases, one of the built-in methods can be used. Let's see what happens
when the value of `name` is set to `'circle'` or `'grid'`
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-2',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'circle'
}
)
'''),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-3',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'grid'
}
)
'''),
dcc.Markdown(dedent('''
## Fine-tuning the Layouts
For any given `name` item, a collection of keys are accepted by the layout
dictionary. For example, the
[`grid` layout](http://js.cytoscape.org/#layouts/grid)
will accept `row` and `cols`, the
[`circle` layout](http://js.cytoscape.org/#layouts/circle) accepts `radius`
and `startAngle`, and so forth. Here's is the grid layout
with the same graph as above, but with different layout options:
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-4',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'grid',
'rows': 3
}
)
'''),
dcc.Markdown(dedent('''
In the case of the circle layout, we can force the nodes to start and end
at a certain angle in radians (import `math` for this example):
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-5',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'circle',
'radius': 250,
'startAngle': math.pi * 1/6,
'sweep': math.pi * 2/3
}
)
'''),
dcc.Markdown(dedent('''
For the `breadthfirst` layout, a tree is created from the existing nodes
by performing a breadth-first search of the graph. By default, the root(s)
of the tree is inferred, but can also be specified as an option. Here is
how the graph would look like if we choose New York City as the root:
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-6',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'breadthfirst',
'roots': '[id = "nyc"]'
}
)
'''),
dcc.Markdown(dedent('''
Here is what would happen if we chose Montreal and Vancouver instead:
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-7',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'breadthfirst',
'roots': '#van, #mtl'
}
)
'''),
dcc.Markdown(dedent('''
> Notice here that we are not giving the ID of the nodes to the `roots`
> key, but instead using a specific syntax to select the desired elements.
> This concept of [selector is extensively documented in Cytoscape.js](http://js.cytoscape.org/#selectors),
> and will be further explored in [part 3](/cytoscape/styling).
> We follow the same syntax as the Javascript library.
## Physics-based Layouts
Additionally, the `cose` layout can be used to position the nodes using
a force-directed layout by simulating attraction and repulsion among the
elements, based on the paper by
[Dogrusoz et al, 2009](https://dl.acm.org/citation.cfm?id=1498047).
''')),
Display('''
cyto.Cytoscape(
id='cytoscape-layout-8',
elements=elements,
style={'width': '100%', 'height': '350px'},
layout={
'name': 'cose'
}
)
''')
])
app.layout = html.Div([
html.Div(
[
dcc.Graph(id='life-exp-vs-gdp'),
html.Label('Wybierz metrykę'),
dcc.Dropdown(id='column',
options=[{
'label': 'Korelacja',
'value': 'correlations'
}, {
'label': 'Feature importance',
'value': 'importance'
}],
value='importance',
clearable=False),
# html.Label('Show top'),
# dcc.Slider(
# id='expectancy-slider',
# min=3,
# max=10,
# value=3,
# step=None,
# marks=dict([(str(v),str(v)) for v in range(3,11)]+[('1000000000000', 'all')])
# ),
],
style={
'width': '70%',
'display': 'inline-block'
})
])
