ShapExplainers

This project contains the Angular components for the SHAP visual explainers:

1. Shap Additive Force
2. Shap Additive Force Array

Original code by https://github.com/slundberg/shap

 

Installation instructions

1. Run npm i shap-explainers
2. Add ShapExplainersModule to the imports array
3. Use the one of the following component selectors:
   • <shap-additive-force>
   • <shap-additive-force-array>
   • <shap-influence>

 

API - How to use the components

shap-additive-force component input parameters:

Changing the colors of the plot. Requires an array of 2 colors.
plotColors: string[] = ['rgb(222, 53, 13)', 'rgb(111, 207, 151)'];

Changing the x-axis type between log-odds (identity) or probabilities (logit).
link: 'logit' | 'identity' = 'identity';

Setting the base value (middle point) for the plot:
baseValue: number = 0.0;

Set the label(s) for the output variables
outNames: string[] = ['Color rating'];

Hide the plot bars:
hideBars: boolean = false;

Set the margin for the labels (labels show up when hovering the bars when not enough space to display the labels)
labelMargin: number = 0;

Hide the label attached to the base value
hideBaseValueLabel: boolean = false;

The data with the feature names and feature values
data: AdditiveForceData;

 

shap-additive-force-array component input parameters:

Set the offset from the top
topOffset: number = 28;

Set the offset from the left
leftOffset: number = 80;

Set the offset from the right
rightOffset: number = 10;

Set the height of the graph
height: number = 350;

Changing the colors of the plot. Requires an array of 2 colors.
plotColors: string[] = ['rgb(222, 53, 13)', 'rgb(111, 207, 151)'];

Changing the x-axis type between log-odds (identity) or probabilities (logit).
link: 'logit' | 'identity' = 'identity';

Setting the base value (middle point) for the plot:
baseValue: number = 0.0;

Set the label(s) for the output variables
outNames: string[] = ['Color rating'];

The data with the feature names and feature values
data: AdditiveForceArrayData

 

shap-influence component input parameters:

Changing the colors of the signs (+/-). Requires an array of 2 colors.
influenceColors: string[] = ['rgb(222, 53, 13)', 'rgb(111, 207, 151)'];

Set the prediction values
predictions: number[] = [1];

Set the prediction label names
predictionNames: string[] = ['Income']

Set the amount of influence labels that are being displayed
labelAmount: number = 7;

 

Interfaces

AdditiveForceData {
    featureNames: {
        [key: string]: string;
    };
    features: {
        [key: string]: { [key: string]: number };
    };
}

AdditiveForceArrayData {
    featureNames: {
        [key: string]: string;
    };
    explanations: {
        outValue: number;
        simIndex: number;
        features: {
            [key: string]: { value: number; effect: number; ind?: number };
        };
    }[];
}

InfluenceData {
    featureNames: {
        [key: string]: string;
    };
    valueNames: {
        [key: string]: string;
    };
    features: {
        [key: string]: { [key: string]: number };
    };
}

 

Repository

Deeploy-ml/shap-explainers