JSX Visualization Text and Canvases

• Writing text
  • Appearance of variables
  • IF and IFELSE
• Setting up canvases
  • Settings of size and ranges in 2D-canvases
  • Settings of size and ranges in 3D-canvases
  • Plotting objects, coordinate systems etc.
  • Labeling the axes
  • Snap to Grid
  • Individual styling
• Placing canvases side-by-side

Writing text

With the text command you can write texts which explain the visualization. As value you can use LaTeX. If you want
to display a variable in the text (for example in formulas) you can use the tex-like command \var{a}.

There is an optional argument that indicates the alignment of the text.
Default is l for left, but c for center and r for right alignment are also possible.

Appearance of variables

You can influence the appearance of variables in text.
One command is \field which determines the number class for the variable.
Full details are given here.

IF and IFELSE

In the \text command you can use \IF{condition}{sometext} and
\IFELSE{condition}{sometext}{othertext} to write text that depends on a certain condition to hold. If the condition condition holds sometext will be shown. In case of \IFELSE, if condition does not hold, othertext is shown.
Of course, onetext or othertext can be empty.

The condition can be a logical composition of elementary conditions:

The syntax used for condition is the same as the condition syntax of \randadjustIf. However, you can use the
values of any variable here, including e.g. coordinates of points on parametric curves.

It is also possible to combine multiple \IFELSE as in the following example

Setting up canvases

The main part of the visualization is the canvas or several canvases where all or some geometric objects are plotted.
This is set up in a canvas-environment showing a 2D-canvas, and a canvasXYZ-environment showing a 3D-canvas.

Settings of size and ranges in 2D-canvases

The size and ranges of the canvas are set with the top five commands in the previous example.

About the commands:

• \plotSize{width,height}: Sets the maximal size of the canvas. If the screen is too small, the canvas
  will shrink automatically,
• \plotLeft and \plotRight: range for the x-axis from left to right,
• \plotBottom and \plotTop: range for the y-axis from bottom to top,

Instead of using \plotLeft and \plotRight, you can also use \plotX as for 3D-canvases (see below). Similarly, \plotY can be used to
set the range for the y-axis, replacing \plotBottom and \plotTop.

All of these commands are optional, and default values or computed values will be used if not set. It is also possible to only set the
width of the canvas via \plotSize{width} instead of \plotSize{width,height}. If not all values are set other values
are chosen such that the scaling for both axis are the same.

Examples:

Here, we obtain a 250px x 150px canvas with x-axis going from -5 to 5. The y-axis will have the same scaling
as the x-axis, and the x-axis will be centered vertically, i.e. the y-axis will range from -3 to 3 in this case.

Here, we obtain a canvas with width 250px, its x-axis going from -5 to 5, and the y-axis going from
-3 to 5. The height of the canvas will be computed such that the x-axis and y-axis have the same scaling, i.e.
the height will be 200px.

Settings of size and ranges in 3D-canvases

The size and ranges of the canvas are set with the top four commands in the previous example.

About the commands:

• \plotSize{width,height}: Sets the maximal size of the canvas. If the screen is to small, the canvas
  will shrink automatically,
• \plotX, plotY and plotZ: ranges for the x-axis, y-axis and z-axis, respectively, given by lower bound and upper bound,

TODO: optional arguments for plot in 3D-canvas!!

Plotting objects, coordinate systems etc.

The command \plot determines what is shown on the canvas. The \plot-command has an optional argument and a mandatory
argument.

The mandatory argument is a comma separated list of the variable names that shall be shown in the canvas.
The optional argument is a comma separated list of several options. For 2D-canvases these are:

• coordinateSystem: Show the coordinate system,
• numberLine: Show a number line,
• showPointCoords: Show the coordinates of points if you hover over them with the mouse,
• noToolbar: Hide the toolbar in the canvas.

For 3D-canvases, the options are:

• coordinateSystem: Show the 3D-coordinate system
• showPointCoords: Show the coordinates of points if you hover over them with the mouse,
• xRear, yRear, zRear, xFront,yFront, zFront: Show planes in the rear or front of the view orthogonal to the axis with that name. E.g. zRear is the plane "at the bottom" of the 3D-view.
• noSliders: Hide the sliders az, el, and bank for moving the 3D-view,
• noGrid: By default, the rear and front planes come with a grid. This command hides the grid.
• sliderStarts: [a,b,c]: Defines new start values for the sliders az, el, and bank for moving the 3D-view. Default values are [1.0, 0.3, 0].

Labeling the axes

Within the canvas environment, you can use the commands \xAxis and \yAxis to add labels to the axes. For example, \xAxis{t} adds the label t to the x-axis.

You can use the common LaTeX-syntax for the labels. For example, if the t above should be in math mode, you write
\xAxis{$t$}.

Snap to Grid

There is one additional command that can be used in the canvas-environment. This is
\snapToGrid{xvalue,yvalue}.
This command causes all points to move to the specified grid after being dragged or
being changed in text. For example, \snapToGrid{0.5,1/3} would move the points to the nearest
spot having half-integral x-coordinate and third-integral y-coordinate.

The command \snapToGrid is especially useful in combination with problems where the answer is
taken from the graphics and one would like to minimize/avoid rounding errors.

Individual styling

In the case that you need more individual changes to the appearance of the canvas, we offer the command \options{...} within the
canvas-environment and the canvasXYZ-environment. It takes as argument an object that it directly passes to the JSXGraph-options when
creating the board or the 3D-view, respectively. For the syntax and possibilities, we refer to the JSXGraph documentation.

Examples:

Within the canvas-environment, the command
\options{defaultAxes: {x: ticks: {minorTicks:3}}, y: { ticks: {minorTicks:3}}}
changes the number of minor ticks between labelled ticks on the x-axis as well as the y-axis from the default number 4 to 3.

Within a canvasXYZ-environment, the command
\options{bank: {slider: {visible: false}}}
hides the bank-slider for moving the 3D-view.

Placing canvases side-by-side

Usually, each canvas is placed in its on row. If you want to display two or more canvases next to each other, you can use the environment canvasRow. The following example illustrates the usage: