functionPlot with datGui

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//maurizzzio.github.io/function-plot/js/bundle.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<div id="new"></div>
<!-- <div id="quadratic"></div> -->
<input type="range" min=1 max=5 value=1 id='k' class='controls'/>k
<input type="range" min=1 max=5 value = 1 id='t' class='controls'/>t

JavaScript

var fn1 = function(x){
  var lx = Math.log(x)
  return (-2122.6070*lx +  596.54579*lx*lx - 55.77*lx*lx*lx)/2513
}  
opts2 = {
    target: "#new",
    data: [{
        fn: fn1
    }],
    xDomain: [32, 48],
    yDomain: [-2513/2513, -2511/2513]
}



functionPlot(opts2)
options = {
  target: '#quadratic',
  data: [{
    fn: function (x) {
      return x * x;
    }
  }]
}

var myPlot = function(){
  var that = this
  this.k = 1
  this.t = 1
  this.options = options
  this.options.data[0] = {
    fn: function(x){
      return that.k*(1 - Math.exp(x/that.t))
    }   
  }
  functionPlot(that.options)
}


    
var fn = function(k, t){
  return function(x) {
    return k*(1 - Math.exp(x/t))    
  }
}

functionPlot(options)

/*
var myplot = new myPlot()
var gui = new dat.GUI();
gui.add(myplot, 'k', -5, 5).onFinishChange(function(){
   functionPlot(myplot.options)
})
gui.add(myplot, 't', -5, 5).onFinishChange(function(){
   functionPlot(myplot.options)
})
*/

d3.selectAll(".controls").on("change", function(){
  k = d3.select("#k").node().value
  t = d3.select("#t").node().value
  options.data[0].fn = fn(k, t)
  functionPlot(options)
})