JSXGraph
JSXGraph share

Share

Scatter plot
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/scatter-plot" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Scatter plot" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: 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' });
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: 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' });
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Scatter plot" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: 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' });
</jsxgraph>
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):
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5], axis: true, keepaspectratio: 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' });

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.