Scatter plot with slider: Difference between revisions

From JSXGraph Wiki
(Created page with "Here is a dynamic scatter plot whose value depend on a slider. See Scatter plot for a static scatter plot. <jsxgraph width="500" height="500"> const board = JXG.JSXGraph....")
 
No edit summary
 
Line 7: Line 7:


var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3, lineCap: 'round'});


scatterplot.updateDataArray = function() {
scatterplot.updateDataArray = function() {
Line 33: Line 33:


var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3, lineCap: 'round'});


scatterplot.updateDataArray = function() {
scatterplot.updateDataArray = function() {

Latest revision as of 09:03, 23 November 2023

Here is a dynamic scatter plot whose value depend on a slider. See Scatter plot for a static scatter plot.

The underlying JavaScript code

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3, lineCap: 'round'});

scatterplot.updateDataArray = function() {
	var i, 
      s = slider.Value(); 
  
  this.dataX = [];
  this.dataY = [];
  for (i = 0; i < 1000; i++) {
    x = Math.random() * 8 - 4;
    y = Math.random() * s * 2 - s;
    this.dataX.push(x, x, NaN);
    this.dataY.push(y, y, NaN);
  }
};

board.update();