Scatter plot: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 12: | Line 12: | ||
y_arr = []; | y_arr = []; | ||
for (i = 0; i < 1000; i++) { | for (i = 0; i < 1000; i++) { | ||
x = Math.random() * 8 - 4; | |||
y = Math.random() * 8 - 4; | |||
x_arr.push(x, x, NaN); | |||
y_arr.push(y, y, NaN); | |||
} | } | ||
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3}); | var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'}); | ||
</jsxgraph> | </jsxgraph> | ||
For a dynamic example, see [[Scatter plot with slider]]. | |||
===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||
Line 31: | Line 33: | ||
y_arr = []; | y_arr = []; | ||
for (i = 0; i < 1000; i++) { | for (i = 0; i < 1000; i++) { | ||
x = Math.random() * 8 - 4; | |||
y = Math.random() * 8 - 4; | |||
x_arr.push(x, x, NaN); | |||
y_arr.push(y, y, NaN); | |||
} | } | ||
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3}); | var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'}); | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Curves]] | [[Category:Curves]] |
Latest revision as of 09:04, 23 November 2023
Of course, scatter plots can be realized with JSXGraph *point* objects. But if a very large number of points have to be plotted it may be more efficient to (ab)use the *curve* object. Here is a neat little trick how to do this: each data point is stored twice in the coordinate arrays, followed by NaNs. The NaNs interrupt the line stroke. With strokeWidth you can control the size of the points. The following example creates 1000 random points between -4 and 4 (in both directions):
For a dynamic example, see Scatter plot with slider.
The underlying JavaScript code
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5], axis:true
});
var i, x, y,
x_arr = [],
y_arr = [];
for (i = 0; i < 1000; i++) {
x = Math.random() * 8 - 4;
y = Math.random() * 8 - 4;
x_arr.push(x, x, NaN);
y_arr.push(y, y, NaN);
}
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});