http://jsxgraph.org/wiki/index.php?title=Scatter_plot_with_slider&feed=atom&action=history
Scatter plot with slider - Revision history
2024-03-28T23:35:34Z
Revision history for this page on the wiki
MediaWiki 1.40.1
http://jsxgraph.org/wiki/index.php?title=Scatter_plot_with_slider&diff=7631&oldid=prev
A WASSERMANN at 09:03, 23 November 2023
2023-11-23T09:03:11Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:03, 23 November 2023</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var scatterplot = board.create('curve', [[], []], {strokeWidth: 3<ins style="font-weight: bold; text-decoration: none;">, lineCap: 'round'</ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>scatterplot.updateDataArray = function() {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>scatterplot.updateDataArray = function() {</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l33">Line 33:</td>
<td colspan="2" class="diff-lineno">Line 33:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>var scatterplot = board.create('curve', [[], []], {strokeWidth: 3<ins style="font-weight: bold; text-decoration: none;">, lineCap: 'round'</ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>scatterplot.updateDataArray = function() {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>scatterplot.updateDataArray = function() {</div></td></tr>
</table>
A WASSERMANN
http://jsxgraph.org/wiki/index.php?title=Scatter_plot_with_slider&diff=6952&oldid=prev
A WASSERMANN: 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...."
2020-04-20T12:00:27Z
<p>Created page with "Here is a dynamic scatter plot whose value depend on a slider. See <a href="/wiki/index.php?title=Scatter_plot" title="Scatter plot">Scatter plot</a> for a static scatter plot. <jsxgraph width="500" height="500"> const board = JXG.JSXGraph...."</p>
<p><b>New page</b></p><div>Here is a dynamic scatter plot whose value depend on a slider. See [[Scatter plot]] for a static scatter plot.<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);<br />
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});<br />
<br />
scatterplot.updateDataArray = function() {<br />
var i, <br />
s = slider.Value(); <br />
<br />
this.dataX = [];<br />
this.dataY = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * s * 2 - s;<br />
this.dataX.push(x, x, NaN);<br />
this.dataY.push(y, y, NaN);<br />
}<br />
};<br />
<br />
board.update();<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);<br />
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3});<br />
<br />
scatterplot.updateDataArray = function() {<br />
var i, <br />
s = slider.Value(); <br />
<br />
this.dataX = [];<br />
this.dataY = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * s * 2 - s;<br />
this.dataX.push(x, x, NaN);<br />
this.dataY.push(y, y, NaN);<br />
}<br />
};<br />
<br />
board.update();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN