Putting HTML output from SHAP into the Dash output layout callback

Dash Python
1

I am trying to make a dashboard where the output from shap forceplot is illustrated. Shap.forceplot is HTML decorated with json. The example is here

I made a very simple dashboard using the tutorial which should plot the desirable figure after clicking the submit

here is the code

import xgboost

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='input-cvr-state', type='text', value='12'),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state'),
    html.Div(id='output-shap')
])


@app.callback(Output('output-shap', 'children'),
              [Input('submit-button', 'n_clicks')],
              [State('input-cvr-state', 'value')])

def update_shap_figure(n_clicks, input_cvr):
    shap.initjs()

    # train XGBoost model
    X,y = shap.datasets.boston()

    model = xgboost.train({"learning_rate": 0.01}, xgboost.DMatrix(X, label=y), 100)

    # explain the model's predictions using SHAP values(same syntax works for LightGBM, CatBoost, and scikit-learn models)
    explainer = shap.TreeExplainer(model)
    shap_values = explainer.shap_values(X)

    # visualize the first prediction's explanation

    return(shap.force_plot(explainer.expected_value, shap_values[0,:], X.iloc[0,:])) # matplotlib=True

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

alternatively, I have posted this question on stackoverflow ( I didn’t know about here!)

2

Having the same question here. I’m wondering whether we need to build a custom dash component for this.

3

Yeah, shap uses D3 wrapped up in a React component. Since Dash uses React itself, you’re not going to be able to just use the Python library directly. The shap.initjs command is also explicitly meant for use in a notebook.

As @jpz says, you’ll need to convert the shap React components into Dash components.

4

Thanks for the reply. I’m not familiar with react.js and building a custom Dash component. I feel like it would be a nice open source project for that…

5

I am facing the same issue - I want to incorporate some SHAP explanation graphs into my DASH app.
Have you has any progress with this?