Scatter plot with slider: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) (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....") |
A WASSERMANN (talk | contribs) 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();