HR Analytics

MATLAB Production Server demo

HTML

<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,600,500,900,800,700' rel='stylesheet' type='text/css'>

<div id="navbar">
  <div class="container">
    <div class="logo">Hr Analytics: Employee Attrition  Predictive Modelling</div>
    <label for="hide" class="nav-colapse">menu</label> 
    <input type="checkbox" id="hide">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Data Analysis</a></li>
				<li><a href="#">Risk Analysis</a></li>
    </ul> 
  </nav>
   </div>
</div>
<div class="hero"></div>











<h2>HR Analytics - MATLAB Production Server Demo</h2>
<p>Predict which valuable employees are at risk for turnover. The model is built using <a href="https://www.kaggle.com/ludobenistant/hr-analytics">this Kaggle dataset</a>.</p>
<h3>Retrieve Employee Data and Score Turnover Risk</h3>
<div id="msgbox" class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <span id="message"></span>
</div>
<div id="main">
  <p>
    <label><span>Minimum Evaluation Score (0.0 - 1.0):</span>
      <br />
      <input type="text" class="n" name="eval" value="0.8">
    </label>

    <p>
      <label><span>Minimum Time Spent @ Company (1-10):</span>
        <br />
        <input type="text" class="n" name="time" value="4">
      </label>
    </p>
    <p>
      <label><span>Number of Records to Get (1-50):</span>
        <br />
        <input type="text" class="n" name="num" value="10">
      </label>
    </p>
    <p id="buttons">
      <input type="button" name='retrieve' value="Get Data">
    </p>
</div>

<div id="container">
  <p></p>
  <div id="data_table"></div>
</div>

<div class="logo_container hidden-xs hidden-sm">
  <a href="http://www.mathworks.com/index.html?s_tid=gn_logo" class="svg_link pull-left">
    <img src="http://www.mathworks.com/images/responsive/global/pic-header-mathworks-logo.svg" class="mw_logo" alt="MathWorks">
  </a>
</div>

CSS

#main {
  width: 400px;
}

#container {
  width: 400px;
}

#sample_table {
  font-size: 14pt;
}

body {
  background: #FFFFFF;
  font-family: 'Open Sans', sans-serif;
}

hr {
  margin: 30px 100px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #ccc;
}

td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #ccc;
  color: #333;
  background-color: #fff;
}

th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #ccc;
  color: #333;
  background-color: #f0f0f0;
}

.note {
  font-size: small;
}

.alert {
  padding: 20px;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.logo_container {
  margin-top: 5px;
  margin-bottom: 6px;
  float: left;
  width: 200px;
}

.risk90 {
  background-color: #ff6666;
}

.risk80 {
  background-color: #ff9999;
}

.risk70 {
  background-color: #ffcccc;
}

.risk60 {
  background-color: #ffe6e6;
}

.risk10 {
  background-color: #b4e4b4;
}

JavaScript

// This function runs when the page is loaded
$(document).ready(function() {
  var idx = []; // initlaize gloabl variable
  var Y = []; // // initlaize gloabl variable
  $('#message').text('Enter data pull criteria below.');

  // This captures the onclick event on get data button
  $('input:button[name="retrieve"]').click(function() {
    $("#msgbox").css("background-color", "#4CAF50"); // default background color
    var eval = $("input[name='eval']").val(); // input text
    eval = Number($.trim(eval)); // trim white space
    var time = $("input[name='time']").val(); // input text
    time = Number($.trim(time)); // trim white space
    var num = $("input[name='num']").val(); // input text
    num = Number($.trim(num)); // trim white space

    // Call MATLAB Production Server and pass the user input
    getSamplesMPS(eval, time, num);
  });
});

/* Function to get sample data from MATLAB production Server
   MATLAB Production Server is running a custom MATLAB
   function on Amazon AWS (see the URL). 
   This function uses AJAX to post JSON object to the server
   and parse the JSON response object */

function getSamplesMPS(eval, time, num) {
  // Create a simple AJAX request to the MATLAB Production Server
  $.ajax({
    url: 'http://ec2-52-38-254-185.us-west-2.compute.amazonaws.com:31415/hr_analytics/getSamples',
    type: "POST",
    timeout: 5000, // sets timeout to 5 seconds
    // Pass input arguments in "rhs" and we get one return value ("nargout")
    data: JSON.stringify({
      "rhs": [eval, time, num], // input arguments
      "nargout": 1 // number of return values
    }),
    contentType: 'application/json',
    success: function(data) {

      // Parse the response and display it on the page.
      if (data.hasOwnProperty('lhs')) { // if data has lhs property
        var jsonResponse = JSON.parse(data.lhs[0].mwdata[0]); // parse its content as JSON
        idx = jsonResponse.idx; // update gloabl variable
        Y = jsonResponse.Y; // update...