Plotly Dash table callback v2

Question

I had the dependency between a slider, user input and a table working. Although, since updating from what I can only describe a basic pandas DataFrame created from a dictionary and having a simple calculation (based on threshold) within the dictionary. I am unable to make the table display and i am unsure where i am going wrong.

** Additional info:**

The threshold is defaulted to 0.5 and is updated via callbacks on user input (slider or manual input)
additional columns are added to the DataFrame df as the binary outputs based on the threshold
metrics are the calculations of y_true the and y_pred which is fr , the threshold this feeds in tried outputting the data and using a callback to update it. I was advised to just create the table in a callback and just use a "Div." to define its location in the display.

My code below:


import dash_bootstrap_components as dbc

import dash_core_components as dcc

import dash_html_components as html

import numpy as np

from scipy import stats

import plotly.graph_objs as go

from plotly.offline import init_notebook_mode, iplot

from datetime import datetime as dt

import dash_table

import pandas as pd

from sklearn import svm, datasets

import base64

import numpy as np

from sklearn.metrics import roc_auc_score, accuracy_score, cohen_kappa_score, recall_score, accuracy_score, precision_score, f1_score

from sklearn import metrics

from dash.dependencies import Input, Output```
import pandas as pd

from dash.dependencies import Input, Output

threshold = 0.5

# read data

data = pd.read_csv('data.csv')

#count columns in dataframe
count_algo = len(data.columns)


################################################################
########################  Body  ################################
################################################################


body = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H2("Slider + Manual entry test"),
                        dcc.Slider(
                            id="my-slider",
                            min=0,
                            max=1,
                            step=0.01,
                            marks={"0": "0", "0.5": "0.5", "1": "1"},
                            value=threshold,
                        ),
                        html.Div(id="update-table"),
                    ]
                ),
                dbc.Col(
                    [
                        html.Div(
                            [
                                html.Div(
                                    dcc.Input(
                                        id="input-box",
                                        max=0,
                                        min=1,
                                        step=0.01,
                                        value=threshold,
                                    )
                                ),
                                html.Div(id="slider-output-container"),
                            ]
                        )
                    ]
                ),
            ]
        )
    ]
)

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

app.layout = html.Div([body])


##############################################################
######################## callbacks ###########################
##############################################################


@app.callback(
    dash.dependencies.Output("slider-output-container", "children"),
    [dash.dependencies.Input("my-slider", "value")],
)
def update_output(value):
    threshold = float(value)
    return threshold


# call back for slider to update based on manual input
@app.callback(
    dash.dependencies.Output(component_id="my-slider", component_property="value"),
    [dash.dependencies.Input("input-box", "value")],
)
def update_output(value):
    threshold = float(value)
    return threshold


# call back to update table


@app.callback(
    dash.dependencies.Output("update-table", "children"),
    [dash.dependencies.Input("my-slider", "value")],
)
def update_output(value):
    #take value of threshold
    threshold = float(value)

    # add predicted 
    for i in data.iloc[:,1:]:
        data['predicted_"{}"'.format(i)] = (data[i] >= threshold).astype('int')

    table_data = pd.DataFrame.from_dict({
        "AUC":[roc_auc_score(data.actual_label, data[i]) for i in data.iloc[:,count_algo:]],
        "Accuracy":[accuracy_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Kappa":[cohen_kappa_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Sensitivity (Recall)": [recall_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]],
        "Specificity": [accuracy_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Precision": [precision_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]],
        "F1": [f1_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]]
    }, orient = 'index').reset_index()

    return html.Div([
        dash_table.DataTable(
            data=table_data.to_dict("rows"),
            columns=[{"id": x, "name": x} for x in table_data.columns],
            style_table={'overflowX': 'scroll'},
            style_cell={'width':100},
        )
    ])




if __name__ == "__main__":
    app.run_server()

data set used was from: codeload.github.com/andrewwlong/classification_metrics_sklearn/… — sam c

sam c sam c · Accepted Answer · 2019-11-26T12:31:54

I found a solution to the problem, but was not able to identify what the actual issue was. I have to assume its something to do with the order of the script (I could get an unpopulated table to appear). Anyway i resolved this by creating a function to populate and return the table (see below):

def roc_table(data,threshold):
    #count columns in dataframe
    count_algo = len(data.columns)

    for i in data.iloc[:,1:]:
        data['predicted_{}'.format(i)] = (data[i] >= threshold).astype('int')

    rock_table = {
        "AUC":[roc_auc_score(data.actual_label, data[i]) for i in data.iloc[:,count_algo:]],
        "Accuracy":[accuracy_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Kappa":[cohen_kappa_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Sensitivity (Recall)": [recall_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]],
        "Specificity": [accuracy_score(data.actual_label, data[i])for i in data.iloc[:,count_algo:]],
        "Precision": [precision_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]],
        "F1": [f1_score(data.actual_label, data[i], average = 'weighted')for i in data.iloc[:,count_algo:]]
    }   

    rock_table = pd.DataFrame.from_dict(rock_table, orient = 'index').reset_index()
    col = ['metrics']
    col.extend([x for x in data.iloc[:,count_algo:]])
    rock_table.columns = col    

    return rock_table

pluging roc_table(data) into the dash_table .div worked

Plotly Dash table callback v2

1 Answers