You're not reading the latest revision of this page, which is
here.
JSX Visualization Color, Label and further Stylings
After defining the variables, you can add label, color and transparencies for the variables.
Both only affect their appearance in the canvases.
You can also choose how numbers appearing in text are displayed (as rational fractions, reals or integers) by setting the field of the variable.
This is explained here.
Adding labels to variables
Labels are added with the command \label{varname}{labeltext} within the environment of
the visualization, but outside of the variable-environment, canvas-environment etc.
For labeltext, you can use standard text, LaTeX-commands, and math mode, as well as values of variables with the same syntax \var{n} as in texts. However, not all types of variables are supported in labels, but only those that provide a number value or function term. This includes coordinates of points to which you refer as \var{p}[x] and \var{p}[y}, as you would do in text.
Usually, the label will be displayed next to the object in the canvas(es).
An exception is the slider. Here the value shown next to the slider will be replaced by
labeltext=value.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | \begin{variables}
\slider{s}{1}{-4}{4}
\point{p}{0,0}
\point{q}{s,2}
\line{g}{p,q}
\end{variables}
%set up label
\label{p}{$P$} %sets the label 'P' to p in math mode
\label{q}{$Q_1$} %sets the label 'Q_1' to q in math mode
\label{s}{Q[x]} % next to the slider is shown 'Q[x]=...' instead of just the value.
\begin{canvas}
\plotSize{250,250}
\plotLeft{-5}
\plotRight{5}
\plotTop{5}
\plot[coordinateSystem, noToolbar]{p,q,s,g}
\end{canvas}
|
Changing the color of variables
The default color of an object is changed by the command \color{varname}{color}.
While defining colors you can also optionally
define the transparency between 0 and 1 where 0 has no transparency at all,
and 1 will make the plotted variable object not visible.
As color, you can use any HTML-color name (see e.g. https://www.w3schools.com/colors/colors_names.asp ), or any hex-code defining a color,
e.g. #32CD32 which would be the same as the color LimeGreen.
1 2 3 4 5 6 7 8 9 10 | \begin{variables}
\slider{s}{1}{-4}{4}
\point{p}{0,0}
\point{q}{s,2}
\line{g}{p,q}
\end{variables}
\color{p}{RED} %set color of p to red
\color[0.1]{g}{DARKGREEN} % set color of g to dark green with 10% transparency
|
Coloring the points of sequences
For sequences it is possible to color the single points differently depending on conditions.
For example the line \color{seq}{\IFELSE{seq[n] < 0}{red}{green}} would cause that those points of the sequence seq are colored red which lie below the x-axis, and the others green. The IFELSE-syntax is the same as in visualization text and is explained here.
Caution: In the IFELSE-condition, you are only allowed to use those variables which are defined before (!) the sequence variable is defined.
Further stylings
The default styling of variables in the canvas can be changed by the command \style{varname}{styling-options}. The styling-options here is a comma-separated list of options that JSXGraph offers for styling, e.g. for a point with varname p you can use \style{p}{face:'[]', size:10} to display the point as a big square.
See the JSXGraph documentation for more details on the options available.
Specifically for
Styling of sequences
The sequences in visualizations consist of points and lines. For changing the styling of its points use the \style-command like \style{varname}{points:{styling-options}} where varname is the name of the sequence-variable, and styling-options are styling options as described above for points.
In the same way, the styling of the lines can be changed by \style{varname}{lines:{styling-options}}.
Changing properties for several objects
If you need to change label, color or styles for several objects in the same way, instead of just giving one variable name as the first parameter, you can also give a comma separated list of variable names, e.g. if the three points p1, p2 and p3should appear in red, you can simply use \color{p1,p2,p3}{red}.
Configurations for variables in visualization text
You can configure the appearance of variables in text. How you use variables in visualization text is explained here.
The following commands available:
Command \field
\field{<varnames>}{<value>}: This defines the number class used for numbers in the text representation of the variables listed in <varnames>. For <value>, you can choose from
integer (numbers are rounded to integers), real (numbers are displayed as decimals), and rational (numbers are displayed as rational fractions).
In case of real, you can add the desired precision, and in case of rational the denominator used in the fraction (the number is then rounded to the nearest of those fractions).
Example:
1 2 3 4 5 | \field{a1}{real} % the number a1 is displayed as a decimal with standard precision of two decimal places.
\field{a2}{real, 3} % the number a2 is displayed as a decimal with three decimal places.
\field{b1}{rational} % the number b1 is displayed as a fraction with default denominator a divisor of 100.
\field{b2}{rational, 10} % the number b2 is displayed as a fraction with denominator a divisor of 10.
\field{P,Q}{real, 3} % the coordinates of the points P and Q are displayed with three decimal places.
|
Command \pointType
\pointType{<varnames>}{<value>}: This determines whether a point or (affine) vector is displayed as a column or row vector,
and what kind of brackets are used. For <value>, you can choose from the self-explaining options bcolumn (as column with square brackets),
pcolumn (as column with parentheses), brow, prow.