Dash Flashcards
What are the import calls?
dash
dash_core_components as dcc
dash_html_components as html
How do you create the app?
app = dash.Dash()
How do you create the layout?
app. layout = html.Div(children=[
html. H1(‘Hello Dash!’)
])
How do you force the app to taclab?
if __name__ == ‘__main__’:
app.run_server(debug=False,host="hkg3pl0790o.hk.hsbc",port=55555)
Can you add divisions within divisions?
Yes
How do you add a new dividions?
app.layout = html.Div(children=[
html. H1(‘Hello Dash!’),
html. Div(‘Dash: web dashboards’)
])
How do you code a graph using core components?
dcc.Graph(id = '',
figure = {
'data':,
'layout';
}How do you enter the data into dcc.Graph?
figure = {
'data' :[
{'x':[1,2,3], 'y':[4,1,2], 'type': 'bar', 'name': 'SF'}
],
'layout':{
'title' : 'Bar plots'
}
}
How do you affect styling of html components?
html.H1(‘Hello’, style = {‘textAlign’: ‘center’, ‘color’: ‘’})
How do you affect the styling of dash core components?
In the layout add a dictionary:
'layout':{
'plot_bgcolor': '',
'paper_bgcolor':'',
'font':{'color':''},
'title':''
}
How do you change the colour behind plot?
In layout, ‘plot_bgcolor’:
How do you change the background color of the dashboard?
In layout ‘paper_bgcolor’:
How do you generate a graph using plotly?
app.layout = html.Div(
[dcc.Graph(
id = 'scatterplot',
figure = {
'data':[go.Scatter(
x = rand_x,
y = rand_y,
mode = 'markers'
)],
'layout':go.Layout(title = 'my scatter')
}
)
]
)
What does dcc.Graph take when using plotly?
id =
figure =
Within figure there is a dictionary with ‘data’ and ‘layout’ as keys
Does html.Div take a list or a dictionary?
([])
Do the figure within dcc.Graph take a list or a dictionary?
Dictionary
dcc.Graph or dcc.graph
dcc.Graph
What does dcc.Graph take?
(), then figure = {}
How do you add x axis title?
xaxis = {‘title: ‘name’} within layout brackers
Does style for html.Div come within the [] or outside?
Outside
What does style take for html.Div
style = {‘color’:’green’}
If you want to insert multiple Div within each other, where do you place the next one?
Inside the division list you want to insert it in i.e. before style
What are the 2 parts you need for a dropdown?
html. Label(),
dcc. Dropdown()
What are 2 parts within dropdown?
dcc.Dropdown(
options =
value = )
What is within options within dropdown?
A list, then a dictionary for each item with label and value
options = [{‘label’: ‘New York’,’value’:’NYC’}, {‘label’:’San Fran’: ‘value’: ‘SF’}]
For a slider, what are the inputs?
min
max
step
value
Does a slider take a list or not?
dcc.Slider(min = , max = )
How do you add a legend to the slider?
marks = {i: i for i in range(-10,10)}
Does marks take () or {} in dcc.Slider
{}
What does radioitems take?
options = [{}] with label and value key pairs
How do you add a gap between items?
Either wrap in a div or do html.P around one item
How do you display text in a more interesting way?
dcc.Markdown(children = variablewithtextin)
How do you get bold text
bold
How do you get italics?
italics
how do you get links?
How do you get headers?
Header
What do you have to enclose the markdown text within?
’’’ text here ‘’’
app.layout or app.Layout
app.layout
style = {} or style: {}
style = {}
Is the style inside or outside the square bracket?
Outside
What are the imports for interactive callsbacks?
from dash.dependencies import Input,Output
What is the format for dcc input?
dcc.Input(id=’my-id’, value=’initial value’, type=’text’),
How do you define a formula That takes a text input and returns it?
def update_output_div(input_value):
return 'You\'ve entered "{}"'.format(input_value)What is the callback structure?
@app.callback(
Output(component_id=’my-div’, component_property=’children’),
[Input(component_id=’my-id’, component_property=’value’)]
What is the component property for output?
Children
What is the component property for input?
Value
What goes into dcc.Input?
id =
value =
type =
What are the entries in Input and Output
Output(component_id=’my-div’, component_property=’children’),
[Input(component_id=’my-id’, component_property=’value’)]
How do you get an html.Div go go side by side?
style = {‘display’:’inline-block’}
How do you force the width of a div?
style = {‘width’: ‘48%’}
style = {‘width’: 48%} or style = {‘width’: ‘48%’}
style = {‘width’: ‘48%’}
Where do you set the color of the graph?
px.scatter(color=)
What does state take?
What you would have put in input
How do you import bootstrap?
import dash_bootstrap_components as dbc
How do you force app to use bootstrap?
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
What goes inside what? columns or rows?
columns go inside rows
How many columns are there by default?
12
What ist he code for rows and columns?
dbc. Row()
dbc. Col()
How do you change the width of columns / rows?
dbc.Row(dbc.Col( html.H3(‘hello’),with = {‘size’: 6, ‘offset’: 3}))
What are keys within width dictionary?
size, offset, order
What are the options to input within size for width?
1 - 12, auto, True. Auto will expand to how ever much it needs to
What does width belong to?
dbd.Col(width = {})
