This is my first dash app. The idea of dash is to write whole webapps in Python.

In this exercise, proposals from companies are evaluated according to 4 criteria. The app shows the total score and a bar chart of the evaluation, selectable from a dropdown menu.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

total_score=3
d={
    'company':['x1','x2','x3','x4','x5'],
    'Criterion 1':[12,14,13,10,15],
    'Criterion 2':[23,18,18,17,24],
    'Criterion 3':[10,12,12,11,15],
    'Criterion 4':[20,20,20,20,20]
}
df=pd.DataFrame(d)
df.set_index('company',inplace=True)

app=dash.Dash()

options=[
    {'label':'Company 1','value':'x1'},
    {'label':'Company 2','value':'x2'},
    {'label':'Company 3','value':'x3'},
    {'label':'Company 4','value':'x4'}
]
    
app.layout= html.Div([
    dcc.Graph(id='graph'),
    dcc.Dropdown(id='picker',options=options,value='x1'),
    html.Div([
    html.H1('Total Score'),
    html.Div(['The total score for this company is ',html.Ins(id='total',style={'color':'red'}),' out of 100']),
    
             ])
])

@app.callback(Output('graph','figure'),
             [Input('picker','value')])
def update_figure(selected_company):
    filtered_df=df.loc[selected_company]
    trace=go.Bar(x=filtered_df.index,y=filtered_df,width=.4)
    
    return {'data':[trace],
            'layout':go.Layout(title='Company Scores',
                               xaxis={'title':'Criteria'},
                               yaxis={'title':'Scores'})
           }


@app.callback(Output('total','children'),
             [Input('picker','value')])
def update_div(selected_company):
    return df.loc[selected_company].sum()

if __name__=='__main__':
    app.run_server(debug=True)

Resources