Skip to content

Instantly share code, notes, and snippets.

@JasonFreeberg

JasonFreeberg/html_example.html

Created August 30, 2017 21:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JasonFreeberg/8609a457f638b8554a37a8f5c0602719 to your computer and use it in GitHub Desktop.
Save JasonFreeberg/8609a457f638b8554a37a8f5c0602719 to your computer and use it in GitHub Desktop.
Download ZIP
Model Interpretor
Raw
html_example.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h3>
Model Interpretor
</h3>
<small>
Input values for the user's predictors to see their effect on churn probability.
<br>
<br>
</small>
</div>
<div class="col-xs-12">
<form>
<div class="form-group row">
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Error Count</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="error" value="10">
</div>
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Months Inactive</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="inactive" value="10">
</div>
</div>
<div class="form-group row">
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Deposit Amount</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="deposit" value="321.21">
</div>
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Total Amount</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="total" value="1221.10">
</div>
</div>
<div class="form-group row">
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Transfer amount</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="transfer" value="430.10">
</div>
<label for="lgFormGroupInput" class="col-xs-1 col-form-label ">Days Between Login</label>
<div class="col-xs-5">
<input class="form-control form-control-lg" id="between" value="8.1">
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">
<div class="well">
<p>
Calculated probability of churn: <p id='output'>0.56</p>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
setInterval(function() {do_this()}, 0);
console.log( "ready!" );
function ilogit(x){
var prob_scale = Math.exp(x)/(1+Math.exp(x));
return prob_scale.toPrecision(2)
}
function do_this(){
var ids = [
['#error', +0.18],
['#inactive', +0.12],
['#deposit', -.005],
['#total', -.002],
['#transfer', -.005],
['#between', +0.3]
];
var total = 0
for(i=0; i < ids.length; i++) {
var value = +$(ids[i][0]).val();
var coef = ids[i][1];
total += value*coef;
};
$('#output').text(ilogit(total));
//console.log('Total on logit scale:', total);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment