Jump to the alphabetical list of commands
JSXGraph fills all my dynamic graphing needs.
This document is my attempt to thoroughly understand all its capabilities;
it is similar to my
TeX Commands Available in MathJax
document (JSXGraph and MathJax co-exist beautifully).
These web pages document version 0.83.
There may be differences with newer versions.
JSXGraph commands are listed alphabetically on these pages, each with a brief description and example.
The examples are typically high-school level mathematics;
some are contrived to illustrate particular features, and may not represent typical usage.
I have had to split this document into several pages; I obtained errors when there were too
many boards on the same page.
This page contains commands S through Z.
GETTING STARTED:
<head> <link rel="stylesheet" type="text/css" href="jsxgraph.css" /> <script type="text/javascript" src="jsxgraphcore.js"></script> </head>
div element with an identifying id at the desired location
in the HTML document;
<div id="box" class="jxgbox" style="width:600px; height:300px;"></div>
Different div elements will have different IDs; you can have as many as needed (e.g., box1, box2, box3)<script type="text/javascript"> var board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10, axis:true}); </script>This JavaScript code is placed in the HTML body, anywhere after the
div that it loads into.originX’ is measured in pixels from the left edge of bounding box;originY’ is measured in pixels from the top edge of bounding box.unitX’ determines the number of pixels for one unit on the $x$-axis;unitY’ determines the number of pixels for one unit on the $y$-axis.axis:true’ causes the axes to be visible; the default value is: axis:false
board.create('point',[1,5]);
initBoard command again).
JXG.JSXGraph.freeBoard(board);
See the results of this sample code (and variations) by clicking the buttons below.
Be sure to ‘erase’ the board each time!
Additionally, you are encouraged to view the source code of this web page to see how things work.
Click the buttons above to try out different sample codes.
Or, type in your own sample code below.
Each time, be sure to erase the board first.
| A | | | B | | | C | | | D | | | E | | | F | | | G | | | H | | | I | | | J | | | K | | | L | | | M | | | N | | | O | | | P | | | Q | | | R | | | S | | | T | | | U | | | V | | | W | | | X | | | Y | | | Z |
Unless otherwise indicated, all JSXGraph examples below use the following box and board:
<div id="box" style="width:200px; height:200px;"></div>
JXG.JSXGraph.initBoard('box',{originX:25, originY:175, unitX:25, unitY:25, axis:true, showNavigation:false, showCopyright:false});
| sector |
creates a sector of a circle
board.create('sector',[ptCenter,ptRadius,ptArc]);
where:
Example:
|
| segment |
creates a line segment
board.create('segment',[ptStart,ptEnd]);
Example:
|
| semicircle |
creates a semicircle
board.create('semicircle',[ptStart,ptEnd]);
The midpoint of the segment from ptStart to
ptEnd becomes the center of the circle;the semicircle is then drawn clockwise from ptStart
to ptEnd .Example:
|
| slider |
creates a slider, which allows a user to easily change numeric values
board.create('slider',[arrayPtStart,arrayPtEnd,[minValue,startValue,maxValue]);
The slider is positioned on the board from arrayPtStart (which corresponds to the minimum slider value, minValue )to arrayPtEnd (which corresponds to the maximum slider value, maxValue ).These first two arguments must be explicit arrays, indicating the coordinates of the desired start point and end point for the slider position. The slider's starting value is given by startValue ,which must be a value in the closed interval from minValue to maxValue .Examples:
|
| spline |
creates a cubic spline through a set of points; this is a piecewise-cubic function, where the function values, first and second derivatives agree at the connecting points; it provides a ‘least curvy’ way to smoothly connect points; I believe the second derivative is zero at the endpoints, giving the so-called ‘natural’ cubic spline; splines only exist ‘within’ their defining points
board.create('spline',[pt1,pt2,pt3,...]);
Example:
|
| tangent |
creates the tangent line to a curve on a glider element; first create the curve (using, say, functiongraph); then create a glider point on the curve; then create the tangent at the glider point
board.create('tangent',[theGlider]);
Examples:
|
| text |
creates text that can move (change position) or not move; the text itself can be static (non-changing) or dynamic (changing); you can use HTML/CSS styles on the text; you can get proper mathematical notation using MathJax
board.create('text',[numxLeft,numyLower,stringText]);
where:
|
| transform |
creates transformations (translate, scale, reflect, rotate, shear, matrix transform)
which can be applied to objects
Basic Example
TranslateTranslating a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(x+a,y+b)\,.$For example, translating by $\,(1,2)\,$ moves an object to the right $\,1\,$ and up $\,2\,.$ For the horizontal direction: positive is to the right, negative is to the left. For the vertical direction: positive is up, negative is down.
board.create('transform',[numLeftRight,numUpDown],{type:'translate'});
ScaleScaling a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(ax,by)\,.$For example, scaling by $\,(2,3)\,$ doubles the $x$-value, and triples the $y$-value.
board.create('transform',[numHorFactor,numVerFactor],{type:'scale'});
ReflectReflection about a line treats the line as a mirror;the reflection is the same (perpendicular) distance to the line, but on the opposite side.
board.create('transform',[line],{type:'reflect'});
or board.create('transform',[x1,y1,x2,y2],{type:'reflect'});
RotateRotation about a point;angles are in radian measure ($\pi$ radians is $180^{\circ}$); positive angles are in a counter-clockwise direction
board.create('transform',[angle,pointToRotateAbout],{type:'rotate'});
or board.create('transform',[angle,x,y],{type:'rotate'});
ShearShear changes only the $x$-value of a point; the $y$-value is unchanged.A shear by angle $\,\theta\,$ of a point $\,(x,y)\,$ returns the new point $\,(x\tan\theta\,,\,y)\,.$ The angle in the ‘shear’ transform command must be given in radian measure. Since $\,\tan45^{\circ} = 1\,,$ a shear by $\,\pi/4 = 45^{\circ}\,$ preserves the original point.
board.create('transform',[angle],{type:'shear'});
Matrix Representations of TransformationsRotation, Scaling, Shearing, and Reflection can be represented as $2\times 2$ matrices.For example, the scaling $\,(x,y)\mapsto(ax,by)\,$ is represented by $$ \begin{bmatrix} a & 0\cr 0 & b \end{bmatrix} \begin{bmatrix} x\cr y\end{bmatrix} = \begin{bmatrix} ax\cr by\end{bmatrix} $$ However, translation cannot be represented by a $\,2\times 2\,$ matrix, and instead requires the use of homogeneous coordinates and a $\,3\times 3\,$ matrix. Recall that in JSXGraph, the scaling factor is listed first, so the coordinate pair $\,(x,y)\,$ has homogeneous coordinates $\,(1,x,y)\,.$ $$ \begin{bmatrix} 1 & 0 & 0\cr a & 1 & 0\cr b & 0 & 1 \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr x+a\cr y+b\end{bmatrix} $$ All the $\,2\times2\,$ transformation matrices can be used with homogeneous coordinates. For example, scaling takes on the appearance shown below; the original $\,2\times 2\,$ matrix is inserted in the lower-right corner of the $\,3\times 3\,$ identity matrix: $$ \begin{bmatrix} 1 & 0 & 0\cr 0 & a & 0\cr 0 & 0 & b \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr ax\cr by\end{bmatrix} $$ Thus, $\,3\times 3\,$ matrices $ \begin{bmatrix} v_{11} & v_{12} & v_{13}\cr v_{21} & v_{22} & v_{23}\cr v_{31} & v_{32} & v_{33} \end{bmatrix} \,,$ together with the use of homogeneous coordinates, allow representations of all the standard transformations.
board.create('transform',[$v_{11},v_{12},v_{13},v_{21},\ldots,v_{33}$],{type:'generic'});
Combining Transformations; Binding a Transformation to a Point
firstTransf.melt(secondTransf)
This creates a two-step transformation:
transf.bindTo(point)
|
| turtle |
A ‘turtle’ is a triangle with moves that can be specified in the $xy$-plane; it can leave a trail of its path
board.create('turtle',[xStart,yStart,startDirection]);
The first two arguments give the starting position of the turtle;the optional third coordinate gives the direction, in degrees, counterclockwise, from the positive $x$-axis. Examples:
|