shap force plot에서 waterfall의 계산 방법과 shap 그래프를 웹에서 보여주는 방법에 대해

딥러닝에서 나온 데이터를 웹에 출력을 해주는 경우가 발생했다.

 

거기에서 제시했던 것은 shap plot이라는 것을 통해서 나온것과 비슷하게 진행을 하는 것이었다.

 

https://shap.readthedocs.io/en/latest/index.html

Welcome to the SHAP documentation — SHAP latest documentation

 

뭐 데이터 사이언티스트가 분석/연구 할때 쓰이는 데이터를 시각적으로 보여주는 라이브러리인듯 하다.(정말 대충 알고 있음...)

 

저 라이브러리는 출력을 해주는 차트가 여러개 있는데 그 중에서 force plot이라는 차트가 있다. 해당 차트는 html, js로 내보내기가 가능하며 github에 해당 코드가 존재한다. stackoverfllow나 다른 참고할 글들을 보며 방법을 찾았었지만 가장 좋은것은 역시 html, js로 출력을 하는것이고 나머지느 다른 것들은 이미지로 출력? 뭐 이런 방법 들이었다.

 

https://github.com/slundberg/shap

GitHub - slundberg/shap: A game theoretic approach to explain the output of any machine learning model.

위의 링크는 force plot을 javascript로 출력 시키는 코드가 있는 git이다.  javascript/visualizers에 있는것만 웹에서 사용 가능.

 

일단 가장 큰 문제는 html, js로 출력을 할 수 있는 그래프가 한정적이라는 점이다. 내가 필요한것은 force plot 외에 waterfall과 waterfall을 이용해서 그린 또 다른 그래프였다.(실제로 두 그래프는 bar chart와 line chart와 비슷한 형태이다)

 

여기서 발생한 가장 큰 문제는 waterfall을 bar chart를 이용해서 출력 시키면 되지만 어떻게 각 bar들의 시작점과 종료점을 계산 하느냐 였다.(나는 데이터쪽 전문가가 아니기에 모름...). 그럼 결국은 내가 직접 분석을 해야하는 상황.

 

//waterfall python 샘플 코드

import xgboost
import shap

# train XGBoost model
X,y = shap.datasets.adult()
model = xgboost.XGBClassifier().fit(X, y)

# compute SHAP values
explainer = shap.Explainer(model, X)
shap_values = explainer(X)

plot = shap.plots.waterfall(shap_values[0])

 

위의 코드를 실행하면 waterfall그래프가 출력된다.

 

위에 이미지는 출력된 그래프와 그 데이터를 직접 출력하여 나타낸 엑셀이다.

 

글이 길어질거 같아 결론을 먼저 적는다.

1. shape value를 절대값으로 내림차순 정렬

2. 막대 그래프의 시작점과 종료지점을 계산

3. 그래프 출력

 

여기에서 2번 계산을 어떻게 하는지는 아래와 같다.

간단하게 설명하자면 막대 그래프의 시작 값과 종료 값을 loop를 돌면서 아래의 공식을 이용하여 계산하면 된다.

 

 

시작 값 / 종료 값

제일 처음 shape value가 음수 : output value / output value + shape value

제일 처음 shape value가 양수 : base value / base value + shape value

2022-06-03 수정

제일 처음 shape value가 음수 : outputvalue / outputvalue - shape value

제일 처음 shape value가 양수 : outputvalue - shape value / output value

 

이전 shape value가 음수 or 양수 -> 음수 or 양수 형태로 비교

마이너스 -> 마이너스 : 이전 태그의 종료점 / 이전 태그의 종료점 - shape value

마이너스 -> 플러스 : 이전 태그의 종료점 - shape value / 이전 태그의 종료점

 

플러스 -> 마이너스 : 이전 태그의 시작점 / 이전 태그의 시작점 - shape value

플러스 -> 플러스 : 이전 태그의 시작점 - shape value / 이전 태그의 시작점

 

해당 계산을 하여 만든 최종 웹의 결과물은 아래와 같다.

 

 

위에서 force plot은 git에서 받은 소스를 사용하였고, 아래에 있는 2개의 차트는 chart.js를 사용하여 계산값을 적용 시켰다. 일부 노출되면 안 될것 같은 값들이 있어 해당 값들은 전부 안 보이게 처리 하였다.

*마지막 그래프는 4번째 그래프에서 radius가 들어간 부분을 이은 것이다.

 

글을 너무 내가 편한대로 적다보니 정보 전달이 잘 되지 않을것 같다.

 

혹시라도 위의 내용과 관련해서 더 자세한 설명이나 궁금한점 있으신분은 댓글 부탁 드립니다.