# Difference between revisions of "Scatter plot"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) (Created page with "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*...") |
A WASSERMANN (talk | contribs) |
||

Line 1: | Line 1: | ||

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: | 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): | ||

<jsxgraph width="500" height="500"> | <jsxgraph width="500" height="500"> | ||

Line 21: | Line 23: | ||

===The underlying JavaScript code=== | ===The underlying JavaScript code=== | ||

<source lang="javascript"> | <source lang="javascript"> | ||

+ | 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}); | ||

</source> | </source> | ||

[[Category:Examples]] | [[Category:Examples]] | ||

[[Category:Curves]] | [[Category:Curves]] |

## Revision as of 13:55, 14 April 2020

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):

### 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});
```