rf.html

---
layout: base2
title: Random Forest
permalink: /rf.html
---
<style>
  svg {
      vertical-align: top;
      height: 250px;
      width: 400px;
      cursor: default;
      user-select: none;
  }
  canvas {
    cursor: pointer;
  }
  .content-container {
    text-align: center;
  }
  .content-container-row {
    text-align: center;
  }
  .content-container-cell {
    display: inline-block;
  }
  .control-panel {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
    padding-left: 0px;
  }
  .control-row {
    margin-bottom: 7px;
  }
  .control-cell {
    text-align: center;
  }
  .control-cell-full {
    text-align: center;
  }
  #data-canvas, .loss-plot-canvas {
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  }
  #data-canvas {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    width: 250px;
    height: 250px;
    min-width: 250px;
  }
  .loss-plot-canvas {
    width: 500px;
    height: 100px;
    cursor: default;
    background-color: var(--headbackcol);
  }
  @media screen and (max-width: 500px) {
    .loss-plot-canvas {
      width: 300px;
      height: 50px;
    }
  }
  </style>


<link type="text/css" href="assets/css/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="assets/js/npgmain.js"></script>
<script src="assets/js/randomforest.js"></script>
<script type="text/javascript">

var N= 10; //number of data points
var data = new Array(N);
var labels= new Array(N);
var tree= new forestjs.RandomForest();
var dirty= true;
var ss= 50.0; // scaling factor for drawing
var density= 10; // density of drawing. Decrease for higher resolution (but slower)
var avgerr= 0;
var drawSoft = true;
var options = {};
options.type = 1;

function myinit(){
  
  data[0]=[-0.4326  ,  1.1909 ];
  data[1]= [1.5, 3.0];
  data[2]=[0.1253 , -0.0376   ];
  data[3]=[0.2877 ,   0.3273  ];
  data[4]=[-1.1465 ,   0.1746 ];
  data[5]=[1.8133 ,   2.1139  ];
  data[6]=[2.7258 ,   3.0668  ];
  data[7]=[1.4117 ,   2.0593  ];
  data[8]=[4.1832 ,   1.9044  ];
  data[9]=[1.8636 ,   1.1677  ];
  
  labels[0]= 1;
  labels[1]= 1;
  labels[2]= 1;
  labels[3]= 1;
  labels[4]= 1;
  labels[5]= -1;
  labels[6]= -1;
  labels[7]= -1;
  labels[8]= -1;
  labels[9]= -1;
  
  data[10]=[-0.5 ,   -0.5  ];
  labels[10]= -1;
  data[11]=[1.0 ,   2.0 ];
  labels[11]= 1;
  data[12]=[1.0 ,   -1.0 ];
  labels[12]= 1;
  
  N= data.length;
  
  retrain();
}

function retrain(){
  tree.train(data, labels, options);
  dirty= true;
}
  
function update(){
}

function draw(){
    if(!dirty) return;
    
    ctx.clearRect(0,0,WIDTH,HEIGHT);
    
    // draw decisions in the grid
    for(var x=0.0; x<=WIDTH; x+= density) {
      for(var y=0.0; y<=HEIGHT; y+= density) {
        
        var dec= tree.predictOne([(x-WIDTH/2)/ss, (y-HEIGHT/2)/ss]);
        
        if(!drawSoft) {
            if(dec > 0.5) ctx.fillStyle = 'rgb(150,250,150)';
            else ctx.fillStyle = 'rgb(250,150,150)';
        } else {
            var ri= 250*(1-dec) + 150*dec;
            var gi= 250*dec + 150*(1-dec);
            ctx.fillStyle = 'rgb('+Math.floor(ri)+','+Math.floor(gi)+',150)';
        }
        
        ctx.fillRect(x-density/2-1, y-density-1, density+2, density+2);
      }
    }
    
    // draw axes
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(50,50,50)';
    ctx.lineWidth = 1;
    ctx.moveTo(0, HEIGHT/2);
    ctx.lineTo(WIDTH, HEIGHT/2);
    ctx.moveTo(WIDTH/2, 0);
    ctx.lineTo(WIDTH/2, HEIGHT);
    ctx.stroke();

    // draw datapoints.
    ctx.strokeStyle = 'rgb(0,0,0)';
    for(var i=0;i<N;i++) {
      if(labels[i]==1) ctx.fillStyle = 'rgb(100,200,100)';
      else ctx.fillStyle = 'rgb(200,100,100)';
      drawCircle(data[i][0]*ss+WIDTH/2, data[i][1]*ss+HEIGHT/2, 5);
    }
    
    ctx.fillStyle= 'rgb(0,0,0)';
    dirty= false;
}

function mouseClick(x, y, shiftPressed){
  
  // add datapoint at location of click
  data[N] = [(x-WIDTH/2)/ss, (y-HEIGHT/2)/ss];
  labels[N] = shiftPressed ? 1 : -1;
  N += 1;
  
  retrain();
}

function keyUp(key){
  
  if(key==82) { // 'r'
    retrain();
  }
  
}

function keyDown(key){
}

// UI stuff
function refreshTrees(event, ui) {
  var numTrees = Math.floor(ui.value);
  $("#treesreport").text("number of trees = " + numTrees);
  options.numTrees= numTrees;
  retrain();
}

function refreshDepth(event, ui) {
  var maxDepth = Math.floor(ui.value);
  $("#depthreport").text("max depth = " + maxDepth);
  options.maxDepth = maxDepth;
  retrain();
}

function refreshTries(event, ui) {
  var tries = Math.floor(ui.value);
  $("#triesreport").text("hypotheses / node = " + tries);
  options.numTries = tries;
  retrain();
}

$(function() {
    
    $("#slider1").slider({
        orientation: "horizontal",
        slide: refreshTrees,
        max: 200,
        min: 1,
        step: 1,
        value: 100
    });

    $("#slider2").slider({
        orientation: "horizontal",
        slide: refreshDepth,
        max: 12,
        min: 2,
        step: 1,
        value: 4
    });
    
    $("#slider3").slider({
        orientation: "horizontal",
        slide: refreshTries,
        max: 50,
        min: 1,
        step: 1,
        value: 10
    });
    
});
</script>

<body onLoad="NPGinit(10);" class="text-center">

<p>
<b><i class="fas fa-mouse"></i></b> &nbsp; Red <space style="padding:.5rem"></space>
<b>SHIFT + <i class="fas fa-mouse"></i></b> &nbsp;Green <space style="padding:.5rem"></space>
<b>R</b> &nbsp;Retrain
</p>

<canvas id="NPGcanvas" width="330" height="330">Browser not supported.</canvas><br /><br />

<center>
<button type="button" class="btn btn-new btn-sm" onclick="options.type = 1-options.type; retrain();">1D vs 2D</button>
<button type="button" class="btn btn-new btn-sm" onclick="drawSoft= !drawSoft; dirty= true;">Hard vs Soft</button>
<span style="display:block; height: 20px;"></span>

<div id="optsdiv">
<div style="width:300px; margin-left: 5px;"><div id="slider1"></div><br/><span id="treesreport"> # of trees = 100</span></div><br>
<div style="width:300px; margin-left: 5px;"><div id="slider2"></div><br/><span id="depthreport"> Max depth = 4</span></div><br>
<div style="width:300px; margin-left: 5px;"><div id="slider3"></div><br/><span id="triesreport"> Hypotheses per node = 10</span></div><br>
</center>
<br />
<p>Credit to @karpathy.</p>
</div>


</body>