Dash

Question 1

What are the import calls?

Answer 1

dash
dash_core_components as dcc
dash_html_components as html

Question 2

How do you create the app?

Answer 2

app = dash.Dash()

Question 3

How do you create the layout?

Answer 3

app. layout = html.Div(children=[
html. H1(‘Hello Dash!’)

])

Question 4

How do you force the app to taclab?

Answer 4

if __name__ == ‘__main__’:

 app.run_server(debug=False,host="hkg3pl0790o.hk.hsbc",port=55555)

Question 5

Can you add divisions within divisions?

Answer 5

Yes

Question 6

How do you add a new dividions?

Answer 6

app.layout = html.Div(children=[

html. H1(‘Hello Dash!’),
html. Div(‘Dash: web dashboards’)

])

Question 7

How do you code a graph using core components?

Answer 7

dcc.Graph(id = '',
figure = {
'data':,
'layout';
}

Question 8

How do you enter the data into dcc.Graph?

Answer 8

figure = {
'data' :[
{'x':[1,2,3], 'y':[4,1,2], 'type': 'bar', 'name': 'SF'}
],
'layout':{
'title' : 'Bar plots'
}

}

Question 9

How do you affect styling of html components?

Answer 9

html.H1(‘Hello’, style = {‘textAlign’: ‘center’, ‘color’: ‘’})

Question 10

How do you affect the styling of dash core components?

Answer 10

In the layout add a dictionary:
'layout':{
'plot_bgcolor': '',
'paper_bgcolor':'',
'font':{'color':''},
'title':''

}

Question 11

How do you change the colour behind plot?

Answer 11

In layout, ‘plot_bgcolor’:

Question 12

How do you change the background color of the dashboard?

Answer 12

In layout ‘paper_bgcolor’:

Question 13

How do you generate a graph using plotly?

Answer 13

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') 
    }

)

]
)

Question 14

What does dcc.Graph take when using plotly?

Answer 14

id =
figure =

Within figure there is a dictionary with ‘data’ and ‘layout’ as keys

Question 15

Does html.Div take a list or a dictionary?

Answer 15

([])

Question 16

Do the figure within dcc.Graph take a list or a dictionary?

Answer 16

Dictionary

Question 17

dcc.Graph or dcc.graph

Answer 17

dcc.Graph

Question 18

What does dcc.Graph take?

Answer 18

(), then figure = {}

Question 19

How do you add x axis title?

Answer 19

xaxis = {‘title: ‘name’} within layout brackers

Question 20

Does style for html.Div come within the [] or outside?

Answer 20

Outside

Question 21

What does style take for html.Div

Answer 21

style = {‘color’:’green’}

Question 22

If you want to insert multiple Div within each other, where do you place the next one?

Answer 22

Inside the division list you want to insert it in i.e. before style

Question 23

What are the 2 parts you need for a dropdown?

Answer 23

html. Label(),

dcc. Dropdown()

Question 24

What are 2 parts within dropdown?

Answer 24

dcc.Dropdown(
options =
value = )

Question 25

What is within options within dropdown?

Answer 25

A list, then a dictionary for each item with label and value

options = [{‘label’: ‘New York’,’value’:’NYC’}, {‘label’:’San Fran’: ‘value’: ‘SF’}]

Question 26

For a slider, what are the inputs?

Answer 26

min
max
step
value

Question 27

Does a slider take a list or not?

Answer 27

dcc.Slider(min = , max = )

Question 28

How do you add a legend to the slider?

Answer 28

marks = {i: i for i in range(-10,10)}

Question 29

Does marks take () or {} in dcc.Slider

Answer 29

{}

Question 30

What does radioitems take?

Answer 30

options = [{}] with label and value key pairs

Question 31

How do you add a gap between items?

Answer 31

Either wrap in a div or do html.P around one item

Question 32

How do you display text in a more interesting way?

Answer 32

dcc.Markdown(children = variablewithtextin)

Question 33

How do you get bold text

Answer 33

bold

Question 34

How do you get italics?

Answer 34

italics

Question 35

how do you get links?

Answer 35

links

Question 36

How do you get headers?

Answer 36

Header

Question 37

What do you have to enclose the markdown text within?

Answer 37

’’’ text here ‘’’

Question 38

app.layout or app.Layout

Answer 38

app.layout

Question 39

style = {} or style: {}

Answer 39

style = {}

Question 40

Is the style inside or outside the square bracket?

Answer 40

Outside

Question 41

What are the imports for interactive callsbacks?

Answer 41

from dash.dependencies import Input,Output

Question 42

What is the format for dcc input?

Answer 42

dcc.Input(id=’my-id’, value=’initial value’, type=’text’),

Question 43

How do you define a formula That takes a text input and returns it?

Answer 43

def update_output_div(input_value):
return 'You\'ve entered "{}"'.format(input_value)

Question 44

What is the callback structure?

Answer 44

@app.callback(
Output(component_id=’my-div’, component_property=’children’),
[Input(component_id=’my-id’, component_property=’value’)]

Question 45

What is the component property for output?

Answer 45

Children

Question 46

What is the component property for input?

Answer 46

Value

Question 47

What goes into dcc.Input?

Answer 47

id =
value =
type =

Question 48

What are the entries in Input and Output

Answer 48

Output(component_id=’my-div’, component_property=’children’),
[Input(component_id=’my-id’, component_property=’value’)]

Question 49

How do you get an html.Div go go side by side?

Answer 49

style = {‘display’:’inline-block’}

Question 50

How do you force the width of a div?

Answer 50

style = {‘width’: ‘48%’}

Question 51

style = {‘width’: 48%} or style = {‘width’: ‘48%’}

Answer 51

style = {‘width’: ‘48%’}

Question 52

Where do you set the color of the graph?

Answer 52

px.scatter(color=)

Question 53

What does state take?

Answer 53

What you would have put in input

Question 54

How do you import bootstrap?

Answer 54

import dash_bootstrap_components as dbc

Question 55

How do you force app to use bootstrap?

Answer 55

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

Question 56

What goes inside what? columns or rows?

Answer 56

columns go inside rows

Question 57

How many columns are there by default?

Answer 57

12

Question 58

What ist he code for rows and columns?

Answer 58

dbc. Row()

dbc. Col()

Question 59

How do you change the width of columns / rows?

Answer 59

dbc.Row(dbc.Col( html.H3(‘hello’),with = {‘size’: 6, ‘offset’: 3}))

Question 60

What are keys within width dictionary?

Answer 60

size, offset, order

Question 61

What are the options to input within size for width?

Answer 61

1 - 12, auto, True. Auto will expand to how ever much it needs to

Question 62

What does width belong to?

Answer 62

dbd.Col(width = {})