DEFAULT_COLORSCALE = ["#EF8A62", "#F7F7F7", "#67A9CF"]
DEFAULT_OPACITY = 0.8
mapbox_access_token = "pk.eyJ1IjoiYmVuam9uZXM0NzQ3IiwiYSI6ImNqczBoZWo1MzFlZ3Q0YW81YTFtcDVrN3AifQ.anJanZY5dXkl6JIC4P8RRQ"
'''
~~~~~~~~~~~~~~~~
~~ APP LAYOUT ~~
~~~~~~~~~~~~~~~~
'''
app.layout = html.Div(children=[
html.Div([
html.Div([
html.Div([
html.H4(children='SILVER'),
html.P('RESULTS Select year:'),
]),
html.Div([
dcc.Slider(
id='years-slider',
min=min(YEARS),
max=max(YEARS),
value=min(YEARS),
marks={str(year): str(year)
for year in YEARS},
),
],
style={
'width': 400,
'margin': 25
app.logger.setLevel(logging.DEBUG)
# To be able to assign callbacks before layout
app.config["suppress_callback_exceptions"] = True
# set layout options
app.title = 'RECYCLE RIGHT'
# Favicon
app.head = [
html.Img(src='assets/favicon.ico', ),
]
upload_tab = html.Div(
children=[
html.H4("Image Classifier"),
dcc.Upload(
id='upload_image',
children=html.Div(['Drag and Drop or ',
html.A('Select Files')]),
style={
'width': '100%',
'height': '40px',
'lineHeight': '20px',
'borderWidth': '2px',
'borderStyle': 'dashed',
'borderRadius': '10px',
'textAlign': 'center',
},
# Allow multiple files to be uploaded
multiple=False)
}),
html.Div(
style={
'width': '100%',
'padding': '20px',
'justify-content': 'center',
'display': 'flex',
'align-items': 'center'
},
id='answers_list',
children=[
dbc.Card(
color='dark',
outline=True,
children=[
dbc.CardHeader([html.H4('Results')]),
dbc.CardBody([
dash_table.DataTable(
id='answers_table',
columns=[{
"name": i,
"id": i
} for i in [
'Answer', 'Probability', 'Context',
'Article'
]],
style_table=style_table,
style_cell=style_cell,
style_as_list_view=True,
style_header=style_header,
style_data_conditional=
html.H6(["Made with ",
html.A('Dash', href = 'https://dash.plotly.com/',
style={'color':'#000000'},
target = '_blank)')],
style={'textAlign':'right'}),
html.H6("by Bruno Vieira Ribeiro - [email protected]",
style={'textAlign':'right'})
])
],
color='secondary',
inverse=False),
dbc.Row([
dbc.Col([
dbc.Card([
html.H4("Informações do jogo:"),
dbc.CardImg(id ="game-img",
src=meeples),
],
color='secondary',
inverse=False,
style={"width": "10rem"})
], width = {"size":2}),
dbc.Col([
dbc.Card([
dbc.CardBody([
html.P(id='game-info',
children ="Clique em um nó."),
])
],
color='secondary',
max_date_allowed=dt(2017, 12, 31),
start_date=dt(2016, 1, 1).date(),
end_date=dt(2017, 1, 1).date(),
)
#############################################################################
# Sidebar Layout
#############################################################################
sidebar = html.Div(
[
DS4A_Img, # Add the DS4A_Img located in the assets folder
html.Hr(), # Add an horizontal line
####################################################
# Place the rest of Layout here
####################################################
html.H4("Team 4"),
html.Hr(),
# dcc.Link(html.Button('back'), href='www.google.com'),
dbc.Nav([
dbc.NavLink(
html.Span([
html.I(className="fas fa-cloud",
style={"margin-right": "0.5rem"}),
"Exploratory Analysis",
], ),
href="/exploratory",
id="page-1-link",
className='text-dark',
),
dbc.NavLink(
html.Span([
html.Div(
children=[
html.Div(
children=[
html.Div(
className='float-left',
children=[
html.Img(src='data:image/png;base64,{}'.format(TAB1_SIDEBAR_RIGHT_CARD_1_IMG_1.decode()), height=60)
]
),
html.Div(
className='text-right ',
dir="rtl",
children=[
html.H4(
id="INFO_CARD_NUMBER_AQUIFER-TAB1_SIDEBAR_RIGHT_CARD1"
),
html.Span(
children="آبخوان"
)
]
)
],
className='card-body text-dark'
),
],
className='card border-dark my-2 bg-light'
),
html.Div(
children=[
html.Div(
style={
'width': '100%',
'margin-right': '-10px'
}),
],
style={
'display': 'inline-flex',
'width': '100%',
'margin-left': '-10px'
}),
dcc.Tabs([
dcc.Tab(
label='Job Opportunities',
children=[
html.Div(children=[
html.H4(jobs.iloc[0, 0], style={'font-size': '16pt'}),
html.P(dcc.Markdown(jobs.iloc[0, 1])),
],
style={
'display': 'inline-block',
'max-width': '600px',
'vertical-align': 'top'
}),
html.Div(
children=[
dcc.Graph(id='PlayerComWeek'),
# dropdown
html.Div(children=[
html.Label("State 1"),
html.Label("State 2"),
html.Label("Metric")
id='filters_tab2',
),
html.Div(
[
html.Div(
[
dcc.Graph(
id='movie_table'),
],
className=
'pretty_container eight columns',
),
html.Div(
[
html.Div([
html.H4(
'Movie Keywords:'),
html.
P(id=
'update_movie_keywords',
children=[
'Click the movie title to see its keywords'
]),
], ),
html.Div([
html.H4(
'Movie Overview:'),
html.
P(id=
'update_movie_overview',
children=[
'Click the movie title to see its overview'
html.Div(id='page-eda-content'), ], style={'background-color': 'black'})
# Page 6 Layout -------------------------------
page_6_layout = html.Div([
html.Div(className='row',
children=[
html.Div(
className='four columns div-user-controls', children=[
html.H1('Nelson Aalen Estimator'),
html.Hr(),
html.P(
'''This section contains the nelson aalen implementations which are made using lifelines and plotly modules.'''),
html.Hr(),
html.H4(
"The Nelson-Aalen approach can quickly give you a curve of cumulative hazard and estimate the hazard functions based on irregular time intervals."),
html.H4(
"Nelson-Aalen analysis is used to analyze how a given population evolves with time."),
html.H4(
"Here the time is the tenure(in months) for which the customer stayed in the company and the event is whether they churned or not.")
]),
html.Div(
className='eight columns div-for-charts bg-grey', children=[html.H2('Nelson Aalen plots on the teleco dataset'), dcc.Graph(id='naeplot',
config={
'displayModeBar': False},
animate=True,
figure=naefig
), ])
]),
html.Div(id='page-6-content'),
def regionCheckBoxes():
region_list = areas_df['Area name'].unique().tolist()
dicts_list = []
for region in region_list:
dicts_list.append({'label': region, 'value': region})
return dcc.Dropdown(id='region-check-boxes',
options=dicts_list,
value='London',
multi=False)
app.layout = html.Div(children=[
html.Div([
html.Div([html.H4('Covid-19 UK Cases and Deaths')],
className='four columns'),
html.Div([
html.H4('Daily UK Deaths: {:,}'.format(int(daily_deaths_increase)))
],
style={'color': 'rgb(99,110,250)'},
className='four columns'),
html.Div([html.H4('Total UK Deaths: {:,}'.format(max_deaths))],
style={'color': 'crimson'},
className='four columns')
],
className='twelve columns'),
html.Div([
html.Div([html.P('Select Region to see cases')],
className='one columns'),
html.Div([regionCheckBoxes()], className='five columns'),
from alpha_vantage.techindicators import TechIndicators
api_key = 'UTBNYS0PG96GKLDJ'
# pip install pyorbital
from pyorbital.orbital import Orbital
satellite = Orbital('TERRA')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
html.Div([
html.H2('Silicon Strategy (EBAY)'),
html.H4('Use the following information to make intelligent decisions for technology stocks decide between a bear or a bull strategy today'),
html.Div(id='live-update-text'),
dcc.Graph(id='live-update-graph', style={
'height': 800
},),
dcc.Interval(
id='interval-component',
interval=5*60*1000, # in milliseconds
n_intervals=0
)
])
)
@app.callback(Output('live-update-text', 'children'),
[Input('interval-component', 'n_intervals')])
style={'padding': '5px'})
],
style={
'width': '30%',
'border': '1px DodgerBlue solid',
'display': 'inline-block'
}),
# Results Table
html.Div(
[
dcc.Loading(id='results_table_load',
type='circle',
children=[
html.Div([
html.H4(id='results_table_header'),
dash_table.DataTable(id='results_table')
],
style={
'width': '50%',
'horizontalAlign': 'top'
})
])
],
style={
'width': '30%',
'display': 'inline-block',
'float': 'right',
'horizontalAlign': 'top'
}),
lg=3,
xl=3),
],
style={'padding-bottom': '30px'},
justify='around'),
dbc.Row([
dbc.Col([dbc.Card(dbc.CardBody([category()]), className='col-con')],
xs=12,
sm=12,
md=12,
lg=4,
xl=4),
dbc.Col([
dbc.Card(dbc.CardBody([
html.H4('Most Profitable Sub Category',
style={'color': 'white'},
className='text-center'),
dbc.RadioItems(id='radio_sub',
value='Sub Category',
className='text-center',
options=[
{
'label': 'Sub Category',
'value': 'Sub Category'
},
{
'label': 'Region',
'value': 'Region'
},
],
inline=True),
'background': '#fcc203',
'padding': '10px',
'padding-top': '0px'
},
children=[
html.Div(
style={'display': 'flex'},
children=[
html.H2('BeerMe',
className="tagline-400",
style={'padding-right': '10px'}),
html.Div(
style={'margin-top': '10px'},
children=[
html.H4(
'A Recommendation System for Untappd',
className="verticalLine-2 tagline")
])
])
]),
# tabs
# dcc.Tabs(id="tabs", value='cbf', children=[
# dcc.Tab(label='Existing User', value='existing-user'),
# dcc.Tab(label='Collaborative Filtering', value='collabfilt'),
# dcc.Tab(label='Hybrid', value='hybrid'),
# ]),
# page content
html.Div(id='page-content',
style={
# First Row
html.Div(
[
# Image and Input container left
html.Div(
[
html.Img(id="bike image",
height="180px",
src="assets/bike_flipped.jpg",
style={"border-radius": "20px"}),
# Title display
html.H1(children="How many bikes will be rented?"),
# We display the most important feature's name
html.H4(children="Prediction:",
style={"fontSize": "25px"}),
html.H2(id="prediction_result",
style={"fontSize": "60px"}),
],
className="pretty-container three columns"),
# Title and main-sliders container right
html.Div(
[
html.Div([
html.H1('Dashboard Capital Bikeshare',
style={
"textAlign": "center",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
)
app = dash.Dash()
app.layout = html.Div(children=[
html.H4(children='US Agricultural Exports (2011'),
generate_table(df)
])
if __name__ == '__main__':
app.run_server(debug=True)
sd_material_ui.Divider(),
html.Div([
spacer,
]),
html.Div([
html.Div([
html.Div([
html.P([html.Strong('Test for AppBar')]),
sd_material_ui.AppBar(
id='appbar',
children=sd_material_ui.Toolbar(
id='toolbar',
children=[
html.H4(children='AppBar'),
]),
)
]),
spacer,
html.Div([
html.P([html.Strong('Test for drawer')]),
sd_material_ui.Drawer(
id='drawer',
open=False,
children=[
html.P(id='drawer-close-input', children='X'),
html.H4(children='Drawer items'),
html.Ul(children=[
{'a': 'AA', 'b': 1},
{'a': 'AB', 'b': 2},
{'a': 'BB', 'b': 3},
{'a': 'BC', 'b': 4},
{'a': 'CC', 'b': 5},
{'a': 'CD', 'b': 6}
]
rows=DF_GAPMINDER.to_dict('records'),
columns=sorted(DF_GAPMINDER.columns),
print(rows)
print(columns)
app.layout = html.Div([
html.H4('Gapminder DataTable'),
dt.DataTable(
rows=DF_GAPMINDER.to_dict('records'),
# optional - sets the order of columns
columns=sorted(DF_GAPMINDER.columns),
row_selectable=True,
filterable=True,
sortable=True,
selected_row_indices=[],
id='datatable-gapminder'
),
html.Div(id='selected-indexes'),
dcc.Graph(
id='graph-gapminder'
),
],
brand="Performance Report",
brand_href="#",
sticky="top",
)
Image_1 = html.Div([
html.Img(src='data:image/png;base64,{}'.format(encoded_image_1.decode()),
height=750,
width=1183),
])
Image_2 = html.Div([
html.Img(src='data:image/png;base64,{}'.format(encoded_image_2.decode()),
height=750,
width=1183),
html.H4("Annualised Potential Savings:"),
dash_table.DataTable(
id='table',
columns=[{
"name": i,
"id": i
} for i in df.columns],
data=df.to_dict('records'),
),
],
style={'padding-bottom': '50px'})
body = dbc.Container(
[
dbc.Row([dbc.Col(html.H3("Fleet Level Overview - Monthly KPI"))]),
#Fleet level overview - AE
'label': '2013',
'value': '2013'
}, {
'label': '2014',
'value': '2014'
}, {
'label': '2015',
'value': '2015'
}, {
'label': '2016',
'value': '2016'
}],
value="2006"),
html.Br(),
html.Hr(style={'border-style': 'dotted'}),
html.H4("Small multiples of slope plots"),
html.Div([dcc.Graph(id='Vis-1-1', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-2', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-3', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-4', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-5', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-6', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-7', )]),
html.Br(),
html.Div([dcc.Graph(id='Vis-1-8', )]),
'Customer Issue Prediction App',
style={
'font-family': 'Helvetica',
"margin-left": "20",
"margin-bottom": "0"
},
className='eight columns',
)
],
className='row'),
html.Div([
html.H4(
'--Developed by Alisa Ai--',
style={
'font-family': 'Helvetica',
"margin-left": "10",
"margin-bottom": "0"
},
className='three columns',
)
],
className='row')
]),
#block 2
html.Div([
dcc.Store(id='memory'),
html.Div([
html.Div(
[
html.Label('Enter your complaints here: '),
type='number',
value='8',
min=4,
max=16,
step=1,
style={
'margin-left': "auto",
"margin-right": "auto",
'align': 'center'
})
])),
html.Div(
className="six columns",
children=[
html.Div([
html.Div(html.H4('Build your layout pattern'),
style={"text-align": "center"}),
html.Div(children=cyto.Cytoscape(
id='cytoscape-grid',
layout={
'name': 'grid',
'rows': nrow,
'panningEnabled': False,
'zoomingEnabled': False,
'userZoomingEnabled': False
},
stylesheet=my_stylesheet,
elements=nodes + edges,
style={
'width': '400px',
'height': '400px',
def model_prediction_tab():
global NUMBER_OF_WAVFILES, FILE_COUNT, CONFIG_DATAS
encoded_image_uploaded_file = NUMBER_OF_WAVFILES[FILE_COUNT]
encoded_image_uploaded_file = base64.b64encode(
open(encoded_image_uploaded_file, 'rb').read())
embeddings = generate_before_predict_BR.main(
NUMBER_OF_WAVFILES[FILE_COUNT], 0, 0, 0)
##############################################################################
# Get label names
##############################################################################
label_names = CONFIG_DATAS.keys()
##############################################################################
# Implementing using the keras usual training techinque
##############################################################################
prediction_probs, prediction_rounded = \
predict_on_wavfile_binary_relevance.predict_on_embedding(\
embedding = embeddings,
label_names = label_names,
config_datas = CONFIG_DATAS)
output_sound = []
for label_name, pred_round in zip(label_names, prediction_rounded):
if pred_round == 1:
output_sound += [label_name]
if len(output_sound) == 1:
output_sound = output_sound[0]
elif len(output_sound) == 0:
output_sound = 'None of the below'
else:
output_sound = str(output_sound)
return html.Div(
style={
'color': 'green',
'fontSize': 14
},
children=[
html.Audio(id='myaudio',
src='data:audio/WAV;base64,{}'.format(
encoded_image_uploaded_file),
controls=True,
style={"margin-top": "20px"}),
html.H4('Predictions rounded will be: ' + str(prediction_rounded)),
dcc.Graph(id='example',
figure={
'data': [{
'x':
label_names,
'y':
prediction_probs,
'marker': {
'color': 'rgb(158,202,225)'
},
'type':
'bar',
"text":
["{0:.2f}%".format(i) for i in prediction_probs],
"textposition":
'auto',
}],
'layout': {
'title': 'probabilistic prediction graph ',
'titlefont': {
'family': 'Courier New, monospace',
'size': 22,
'color': 'green'
},
'xaxis': {
'title': 'Labels of the sound',
'titlefont': {
'family': 'Courier New, monospace',
'size': 18,
'color': 'green'
}
},
'yaxis': {
'title': 'Percentage probabality',
'titlefont': {
'family': 'Courier New, monospace',
'size': 18,
'color': 'green'
}
},
'height': 400,
'font': {
'color': '#7f7f7f'
}
}
},
style={
'marginBottom': 20,
'marginTop': 45,
'color': 'black'
}),
html.P('Selected File : ' +
NUMBER_OF_WAVFILES[FILE_COUNT].split("/")[-1],
style={
'color': 'white',
'fontSize': 15
})
])
fig_line.add_trace(
go.Scatter(name=i,
x=dff['date_ym'].values,
y=dff['price'].values,
mode='lines',
marker_color=dff['color'].values[0]))
return fig_line
# ------------------------------------------------------------------------------
app.layout = html.Div(children=[
html.Div(
html.H1(children='Airbnb Listings Analysis',
style={'text-align': 'left'}), ),
html.Div(children=[
html.H4(children='Listing Counts By Review Volumes',
className='container_title'),
dcc.Graph(id='review_slct', config={'displayModeBar': False}),
],
className='twelve columns pretty_container',
style={
'width': '98%',
'margin-right': '0'
},
id='review-div'),
html.Div(
children=[
html.H4(children='Listing Locations', className='container_title'),
dcc.Dropdown(
id='slct_city',
options=[{
'label': 'Barossa Valley',
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from app import app
from funciones import importar_tablas, main_heuristicoB, formatear
import pandas as pd
import numpy as np
import plotly.graph_objs as go
import time
layout = html.Div([
dbc.Container([
dbc.Row([
dbc.Col(dbc.Card(html.H4(
children='MÉTODO HEURÍSTICO SIN RESTRICCIÓN DE INICIO',
className="text-center text-light bg-dark"),
body=True,
color="dark"),
className="mb-4")
]),
dbc.Row([
dbc.Col(dcc.Checklist(options=[{
'label': 'Mantener trazos',
'value': 'trazos'
}],
id='input_trazos',
value=['trazos'],
labelStyle={'font-size': 20},
inputStyle={
'size': 10,
],
style={
'overflowX': 'scroll',
'overflowY': 'scroll',
'maxHeight': '500px'
})
])
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.Div(children=[
html.H4(children='データ概要'),
generate_table(df, 5),
html.H5('shape: {} raws × {} columns'.format(df.shape[0], df.shape[1]))
],
style={'background': '#FFFFCC'}),
html.Div(children=[
html.Div(children=[
html.H5('目的変数を選択してください'),
dcc.Dropdown(id='select-target',
options=[{
'label': column,
'value': column
} for column in df.columns]),
html.Button(id="target-button", n_clicks=0, children="決定")
],
style={'width': '40%'}),
import pandas as pd
# %% EXAMPLE APPLICATION
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
data = [{'a': 1, 'b': 2, 'c': 3}, {'a': 10, 'b': 20, 'c': 30}]
df = pd.DataFrame(data)
def generate_table(dataframe, max_rows=10):
return html.Table([
html.Thead(html.Tr([html.Th(col) for col in dataframe.columns])),
html.Tbody([
html.Tr(
[html.Td(dataframe.iloc[i][col]) for col in dataframe.columns])
for i in range(min(len(dataframe), max_rows))
])
])
app.layout = html.Div(children=[
html.H4(children='US Agriculture Exports (2011)'),
generate_table(df)
])
if __name__ == '__main__':
app.run_server(debug=True)
#-----------------------
# DASH Implementation
#-----------------------
app.layout = html.Div([
html.Nav(children=[
html.H1(html.Center('Client Dashboard')),
html.H2(html.Center('Thibaut Bizet')),
html.Img(src="/assets/logo.png"),
]),
html.Div(className="box",
children=[
html.Div(className="dataframe",
children=[
html.H4('''Sales Distribution by Marketplace'''),
html.Iframe(src="assets/map.html",
width="100%",
height="600px"),
]),
html.Div(className="dataframe1",
children=[
html.H4('''Sales remuneration by units : '''),
generate_table(
comparaison[['marketplace', 'sales/units']]),
]),
html.Div(className="dataframe1",
children=[
html.H4('''Shipment price by units : '''),
generate_table(comparaison[[
'marketplace', 'shipping/units'
def layout_basic_params_div():
return html.Div([
html.
P('Default: 39-40nt oligos spaced <=30 nts apart, favoring melting temperatures between 70-80C. Some parameter combinations may not be feasible given the input sequence',
style={'margin-top': '25px'}),
html.Table(children=[
html.Tr([
html.Th('Min oligo length'),
html.Th('Max oligo length'),
html.Th('Max untiled length')
]),
html.Tr([
html.Td(
dcc.Input(id='min-oligo-input',
type='number',
min=5,
max=1000,
value='39'), ),
html.Td(
dcc.Input(id='max-oligo-input',
type='number',
min=5,
max=1000,
value='40')),
html.Td(
dcc.Input(id='max-untiled-input',
type='number',
min=5,
max=1000,
value='30'))
]),
html.Tr([
html.Td(html.H4('Tm range (lo/hi C)'), ),
html.Td([
dcc.Input(id='tm-low-input',
type='number',
min=40,
max=95,
value='70'),
]),
html.Td([
dcc.Input(id='tm-high-input',
type='number',
min=40,
max=95,
value='80'),
]),
]),
html.Tr([
html.Td(html.H4('Oligo name prefix'), ),
html.Td([
dcc.Input(id='oligo-prefix-input',
type='text',
placeholder='oligo',
value='oligo',
debounce=True),
# html.Abbr('?', title='Oligos will be named consecutively as "<PREFIX>_<NUM>"')
]),
html.Td(
# html.Button(id='go-button2', children=html.B('Calculate')),
# style = {'text-align': 'right'}
)
])
]),
])
color_ref = "3"
#### code to label:
code_set = orderCore[['code', 'label']].drop_duplicates()
#### Prepqre Dash apps
app = dash.Dash(__name__)
server = app.server
app.css.append_css(
{'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})
app.layout = html.Div([
html.Div([
html.H4(
id="header1", className="six columns", children="Feature space"),
html.H4(id="header2",
className="six columns",
children="selected accessions")
],
className="row"),
html.Div([
dcc.Graph(id='local_pca', className='six columns', animate=True),
html.Div(id='table-content', className='six columns')
],
className='row'),
html.Div([
html.Div(dcc.Markdown(
children=
"""**Fig. 1** relative distances among accessions given cluster profiles selected and analysed.
In fact, loadings plot\n of PCA run on the former."""),