Difference between revisions of "Polynomial regression I"

From JSXGraph Wiki
Jump to navigationJump to search
 
(52 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
var data = "406.60 428.50 429.30 426.30 434.70 415.90 419.00 408.80 410.10 408.30 420.40 415.20 409.70 408.90 411.00 410.60 409.60 409.50 409.80 413.00 417.90 415.80 415.50 421.30 423.50 426.80 426.60 427.20 433.30 435.00 442.50 447.00 450.60 448.90 446.20 443.60 446.30 448.20 452.40 451.30 451.80 459.90 464.70 467.30 463.50 466.60 461.10 464.90 467.30 458.40 458.80 463.20 462.40 461.10 465.50 461.50 458.20 460.80 459.30 445.70 425.10 437.60 438.00 436.60 437.60 437.60 438.60 443.10 446.40 445.90 450.80 451.60 457.30 456.70 455.60 454.75 453.90 451.20 450.70 446.80 443.40 448.40 451.80 449.80 449.10 447.60 448.40 450.00 443.00 440.60 437.40 435.40 432.00 430.80 429.60 437.10 440.00 438.30 435.20 436.60 435.25 433.90 436.50 436.30 437.40 441.00 445.40 450.10 449.20 450.50 455.60 452.00 451.80 456.80 455.30 457.40 457.40 461.10 459.60 462.40 463.40 464.60 469.00 472.20 471.80 470.10 465.20 470.40 468.50 468.70 469.70 472.50 474.70 472.40 475.00 476.10 473.20 471.50 472.20 471.10 472.80 470.40 470.50 472.10 471.10 468.50 465.50 465.70 465.40 466.90 468.85 470.80 474.00 478.10 480.50 481.00 479.10 476.40 469.80 471.60 470.60 467.20 473.10 471.70 474.80 477.20 474.60 475.10 475.90 475.80 472.00 470.80 469.10 464.30 463.70 467.20 467.30 467.10 465.60 462.70 449.45 436.20 466.00 467.40 467.00 471.50 469.80 474.20 476.10 477.10 480.30 478.70 478.80 479.30 479.30 478.30 477.20 480.20 484.10 488.70 492.70 492.60 491.90 491.90 495.10 494.50 494.50 496.90 496.20 498.40 498.00 496.00 497.90 495.40 497.30 495.20 499.20 500.60 497.90 499.60 497.00 498.10 496.70 491.40 487.60 486.70 487.40 489.30 485.30 501.80 485.40 491.30 495.50 501.80 504.50 502.50 505.80 510.30 511.90 509.90 508.70 510.70 512.90 512.90 513.80 516.10 512.10 511.10 505.30 505.10 505.20 508.40 510.70 511.30 514.90 517.30 519.70 521.80 524.40 526.80";
 
var data = "406.60 428.50 429.30 426.30 434.70 415.90 419.00 408.80 410.10 408.30 420.40 415.20 409.70 408.90 411.00 410.60 409.60 409.50 409.80 413.00 417.90 415.80 415.50 421.30 423.50 426.80 426.60 427.20 433.30 435.00 442.50 447.00 450.60 448.90 446.20 443.60 446.30 448.20 452.40 451.30 451.80 459.90 464.70 467.30 463.50 466.60 461.10 464.90 467.30 458.40 458.80 463.20 462.40 461.10 465.50 461.50 458.20 460.80 459.30 445.70 425.10 437.60 438.00 436.60 437.60 437.60 438.60 443.10 446.40 445.90 450.80 451.60 457.30 456.70 455.60 454.75 453.90 451.20 450.70 446.80 443.40 448.40 451.80 449.80 449.10 447.60 448.40 450.00 443.00 440.60 437.40 435.40 432.00 430.80 429.60 437.10 440.00 438.30 435.20 436.60 435.25 433.90 436.50 436.30 437.40 441.00 445.40 450.10 449.20 450.50 455.60 452.00 451.80 456.80 455.30 457.40 457.40 461.10 459.60 462.40 463.40 464.60 469.00 472.20 471.80 470.10 465.20 470.40 468.50 468.70 469.70 472.50 474.70 472.40 475.00 476.10 473.20 471.50 472.20 471.10 472.80 470.40 470.50 472.10 471.10 468.50 465.50 465.70 465.40 466.90 468.85 470.80 474.00 478.10 480.50 481.00 479.10 476.40 469.80 471.60 470.60 467.20 473.10 471.70 474.80 477.20 474.60 475.10 475.90 475.80 472.00 470.80 469.10 464.30 463.70 467.20 467.30 467.10 465.60 462.70 449.45 436.20 466.00 467.40 467.00 471.50 469.80 474.20 476.10 477.10 480.30 478.70 478.80 479.30 479.30 478.30 477.20 480.20 484.10 488.70 492.70 492.60 491.90 491.90 495.10 494.50 494.50 496.90 496.20 498.40 498.00 496.00 497.90 495.40 497.30 495.20 499.20 500.60 497.90 499.60 497.00 498.10 496.70 491.40 487.60 486.70 487.40 489.30 485.30 501.80 485.40 491.30 495.50 501.80 504.50 502.50 505.80 510.30 511.90 509.90 508.70 510.70 512.90 512.90 513.80 516.10 512.10 511.10 505.30 505.10 505.20 508.40 510.70 511.30 514.90 517.30 519.70 521.80 524.40 526.80";
 
data = data.split(' ');
 
data = data.split(' ');
 +
 
var datax = [];
 
var datax = [];
 
for (i = 0; i < data.length; i++)  {  
 
for (i = 0; i < data.length; i++)  {  
 +
    datax[i] = i;
 
     data[i] = (parseFloat(data[i])-450.0);  
 
     data[i] = (parseFloat(data[i])-450.0);  
    datax[i] = i;
 
 
}
 
}
   
+
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
 +
 
brd.suspendUpdate();
 
brd.suspendUpdate();
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',dash:2});    
+
 
 +
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',strokeWidth:2, dash:2});
 
curve.updateDataArray = function() {
 
curve.updateDataArray = function() {
 
     var i, len = data.length;
 
     var i, len = data.length;
 
     this.dataX = datax.slice(0,len);  
 
     this.dataX = datax.slice(0,len);  
     for(i=0;i<len;i++) this.dataY[i] = s.Value()*data[i];  
+
     for (i=0; i<len; i++) {
 +
      this.dataY[i] = s.Value()*data[i];  
 +
    }
 
}
 
}
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg,datax,curve.dataY);
+
curve.update(); // Needed for correct glider position
  
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
+
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
 +
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
  
Line 29: Line 35:
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             ],
 
             ],
             {strokeColor:'black',fontSize:'14px'});     
+
             {strokeColor:'black',fontSize:18});     
 +
 
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
<source lang="xml">
+
<source lang="javascript">
<jsxgraph width="700" height="500">
 
 
var data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
 
var data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
 
data = data.split(' ');
 
data = data.split(' ');
Line 48: Line 54:
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
 
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
var curve = brd.create('curve',[[],[]],{strokeColor:'gray',dash:2});   
 
 
curve.updateDataArray = function() {
 
curve.updateDataArray = function() {
 
     var i, len = data.length;
 
     var i, len = data.length;
 
     this.dataX = datax.slice(0,len);  
 
     this.dataX = datax.slice(0,len);  
     for(i=0;i<len;i++) this.dataY[i] = s.Value()*data[i];  
+
     for (i=0; i<len; i++) {
 +
      this.dataY[i] = s.Value()*data[i];  
 +
    }
 
}
 
}
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg,datax,curve.dataY);
+
curve.update(); // Needed for correct glider position
  
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'black'});     
+
var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
 +
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
 
brd.create('glider',[100,30,reg],{strokeColor:'black'});     
  
Line 62: Line 70:
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             function(){ return "r(x) = " + regressionPolynomial.getTerm();}
 
             ],
 
             ],
             {strokeColor:'black',fontSize:'14px'});     
+
             {strokeColor:'black',fontSize:18});     
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
</jsxgraph>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 18:04, 21 November 2013

Through the points defining the dashed line the regression polynomial of degree 'degree' is computed and displayed. The points can be scaled by adjusting the slider 'scale'. The degree of the regression polynomial can be changed by using the slider 'degree'.

The underlying JavaScript code

var data = "406.60 428.50 429.30 426.30 434.70 415.90 ... many points ... 521.80 524.40 526.80";
data = data.split(' ');
var datax = [];
for (i = 0; i < data.length; i++)  { 
    data[i] = (parseFloat(data[i])-450.0); 
    datax[i] = i;
}
    
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 100, data.length+2, -70], grid: false, axis:true});
brd.suspendUpdate();
var s = brd.create('slider',[[10,70],[80,70],[0,1,1]],{name:'scale'});     
var deg = brd.create('slider',[[10,90],[80,90],[1,1,10]],{name:'degree',snapWidth:1});     
curve.updateDataArray = function() {
    var i, len = data.length;
    this.dataX = datax.slice(0,len); 
    for (i=0; i<len; i++) {
       this.dataY[i] = s.Value()*data[i]; 
    }
}
curve.update(); // Needed for correct glider position

var regressionPolynomial = JXG.Math.Numerics.regressionPolynomial(deg, datax, curve.dataY);
var reg = brd.create('functiongraph',[regressionPolynomial],{strokeColor:'blue', strokeWidth:4});     
brd.create('glider',[100,30,reg],{strokeColor:'black'});     

t = brd.create('text',[20,40,
            function(){ return "r(x) = " + regressionPolynomial.getTerm();}
            ],
            {strokeColor:'black',fontSize:18});     
brd.unsuspendUpdate();