index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Feature selection with Boruta.js online | StatSim Select</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link type="text/css" rel="stylesheet" href="https://statsim.com/port/css/port.css" media="screen"/>
    <link rel="icon" type="image/png" href="https://statsim.com/app/images/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="https://statsim.com/app/images/favicon-16x16.png" sizes="16x16">
    <link type="text/css" rel="stylesheet" href="https://statsim.com/assets/common.css" media="screen"/>
    <style>
      a { color: #19BCB0 }
      .rejected { color: #CE2A62 }
      .file-field .btn { background: #BBB }
      .file-field .btn:hover { background: #AAA }
      .confirmed { color: #19BCB0 }
      .grey-bar { background: #f5f5f5 }
      .custom-active { 
        background: #22BEB3 !important;
        background-image: linear-gradient(141deg, #27c9ba 0%, #1fc8db 51%, #2cb5e8 75%) !important;
      }
      .custom-active:hover { 
        opacity: 0.85;
      }
      .custom-hidden { display: none !important }
      .input-field { margin-bottom: 0 }
      .greeting { margin-top: 40px;}
      #port-container { margin: 70px 0 }
      #description { margin-top: 0 }
    </style>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-7770107-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-7770107-2');
    </script>
  </head>
  <body>
    <div class="status-bar grey-bar">
      <div class="container">
        <div class="row">
          <div class="col s12" style="font-size: 14px;">
            <div id="menu"></div>
            <a href="">StatSim</a> → <b>Select</b>
            <span class="version">Version: 0.2.0</span>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div id="port-container"></div>
      </div>
    </div>


    <div id="description" class="grey-bar">
      <div class="container">
        <div class="row">
          <div class="col m12">
            <h1>Feature selection with Boruta.js online</h1>
            <h2>Find all relevant variables in a dataset using a robust feature importance method</h2>
            <p>Feature selection methods try to identify important variables in a dataset. Many of those methods search for a minimal feature subset that can predict a target variable well. When you want to understand relationships between variables, it's more important to select all relevant variables, not just the minimal set. Boruta (<a href="http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.232.7660&rep=rep1&type=pdf">Kursa, Rudnicki 2010</a>) is one of the most advanced methods for such all-relevant feature selection. We <a href="https://github.com/zemlyansky/boruta.js">ported</a> the original Boruta algorithm to JavaScript, so you can use it online without installing R, Python, or sending data to some web server. All processing happens in the browser, on your local machine. </p>
          </div>
        </div>

        <div class="row features">
          <div class="col m3 feature">
            <h3>
              Select all relevant variables
            </h3>
            <p>
              Boruta makes it possible to select all critical features, not a minimal subset of them. That works even when some of them are correlated.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              Compare with shadow features
            </h3>
            <p>
              The script adds additional "shadow" variables during data processing. Comparing with them, you can check how variables of a dataset are better than noize.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              Choose from multiple models
            </h3>
            <p>
              The original Boruta lib uses the Random Forest method under the hood. We added more models that Boruta can use to calculate feature importance.
            </p>
          </div>
          <div class="col m3 feature">
            <h3>
              Make statistically grounded conclusions
            </h3>
            <p>
              Instead of having a hard threshold for feature selection, the script uses a probabilistic approach to reject or accept variables in a dataset.
            </p>
          </div>
        </div>

        <div class="row">
          <div class="col m12">
            <small>
              All processing and visualization happens in your browser. We don't see, collect or sell data you explore <br> 
            </small>
            <p>
              <a class="github-button" href="https://github.com/statsim/select" data-icon="octicon-star" data-show-count="true" aria-label="Star statsim/select on GitHub">Star</a>
              <a class="github-button" href="https://github.com/statsim/select/issues" data-icon="octicon-issue-opened" data-show-count="true" aria-label="Issue statsim/select on GitHub">Issue</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://statsim.com/port/dist/port.js"></script>
    <script src="https://statsim.com/assets/common.js"></script>
    <script>
      var port = new Port({
        portContainer: document.getElementById('port-container'),
        schema: {
          "model": {
            "name": "Process",
            "method": "run",
            "type": "class",
            "url": "process.js",
            "worker": true,
          },
          "render": {
            "name": "Render",
            "method": "render",
            "type": "class",
            "url": "render.js"
          },
          "design": {
            "layout": "sidebar",
            "colors": "light"
          },
          "inputs": [
            { "type": "file", "name": "File", "reactive": true },
            { "type": "select", "name": "Target variable" },
            { "type": "select", "name": "Base model", 
              "options": [
                "Linear Regression",
                "Logistic Regression",
                "KNN Classifier",
                "RF Auto",
                "RF Classifier",
                "RF Regression",
                // "XGB Classifier",
                // "XGB Regression",
              ],
              "default": "RF Auto", 
              "onchange": (value) => { 
                if (value === 'Linear Regression' || value === 'Logistic Regression' || value === 'KNN Classifier') {
                  return {
                    'N estimators': {'className': 'hidden'},
                    'Max depth': {'className': 'hidden'},
                  }
                } else {
                  return {
                    'N estimators': {'className': ''},
                    'Max depth': {'className': ''},
                  }
                }
              }
            },
            { "type": "int", "name": "Max runs", "default": 60},
            { "type": "float", "name": "P value", "default": 0.01},
            { "type": "int", "name": "N repeats", "default": 5},
            { "type": "int", "name": "N estimators", "default": 100 },
            { "type": "int", "name": "Max depth", "default": 6 },
          ]
        }
      })
    </script>
    <script>
      fileElement = document.querySelector('input[type="file"]')
      fileElementBtn= document.querySelector('.file-field .btn')
      otherElements = document.querySelectorAll('.input-field:not(.file-field), #run')

      greeting = document.createElement('p')
      greeting.innerHTML = 'Choose a <b>CSV</b> file for feature selection'
      greeting.classList.add('greeting')
      outputs.appendChild(greeting)

      fileElementBtn.classList.add('custom-active')
      for (el of otherElements) {
        el.classList.add('custom-hidden')
      }

      fileElement.addEventListener('change', (e) => {
        if (e.target.files.length) {
          greeting.classList.add('hidden')
          fileElementBtn.classList.remove('custom-active')
          document.getElementById('run').classList.add('custom-active')
          for (el of otherElements) {
            el.classList.remove('custom-hidden')
          }
        }
      })
    </script>
  </body>
</html>`