kernel density estimator

by John Doe

JavaScript

//canvas
var W = 680
var H = 300
var cvs = null
var ctx = null
var data = [0.3, 0.6, -0.2]
function main(){
  var slider = document.createElement('input') // slider for kernel width scaling
  slider.type = 'range'
  slider.id = 'h'
  slider.name = 'h'
  slider.min = 0
  slider.step = 0.05
  slider.max = 2
  slider.oninput = function(){
    redraw()
  }
  document.body.appendChild(slider)
  document.body.appendChild(document.createElement('br'))
  slider = document.createElement('input')  // slider for y-axis scaling
  slider.type = 'range'
  slider.id = 'yscale'
  slider.name = 'yscale'
  slider.min = 0.01
  slider.step = 0.05
  slider.max = 2
  slider.oninput = function(){
    redraw()
  }
  document.body.appendChild(slider)
  document.body.appendChild(document.createElement('br'))
  slider = document.createElement('input')  // slider for kernel shape
  slider.type = 'range'
  slider.id = 'kernel'
  slider.name = 'kernel'
  slider.min = 0
  slider.step = 0.01
  slider.max = 1
  slider.oninput = function(){
    redraw()
  }
  document.body.appendChild(slider)
  document.body.appendChild(document.createElement('br'))

	cvs = document.createElement('canvas')
  cvs.addEventListener("contextmenu", e => e.preventDefault())
  cvs.width = W
  cvs.height = H
  cvs.style.backgroundColor = 'black'
  document.body.appendChild(cvs)

  ctx = cvs.getContext('2d')
  redraw()
  
  //add//remove clickey data
  cvs.onmousedown = function(e){
    var pos = getCursorPosition(cvs, e)
    var posx = pos[0]/W*2 - 1
    //console.log(e.button)
    if(e.button == 0){//add
      data.push(posx)
    } else {//remove
      var dists = data.map(d => Math.abs(d-posx))
      var ind = dists.indexOf(Math.min(...dists))
      data.splice(ind, 1)
    }
    redraw()
  }
  
}

window.onload = main

function gaussian(x){
  return Math.exp(-x*x/2)/Math.sqrt(2*Math.PI)
}

function cauchy(x){
  return 1/(x*x + 1)/Math.PI
}

function studentt2(x){
  return Math.pow(1/(2+x*x), 3/2)
}

function...