Math

Math#

JSXGraph#

.. jsxgraph:: renderer#

This directive creates a graph based on JSXGraph.

The graphs are constructed in JavaScript, by importing the jsxgraph module, adding a rendering function to render, and calling initBoard() in the rendering function.

```{jsxgraph} sin
:style: aspect-ratio: 16 / 9;
```

<script type="module">
const {initBoard, render} = await tdoc.import('tdoc/jsxgraph.js');

render.sin = el => {
  return initBoard(el, {
      boundingBox: [-7, 1.3, 7, -1.3], keepAspectRatio: false,
      axis: true, grid: true,
  }, board => {
      board.create('functiongraph', [x => Math.sin(x)]);
  });
};
</script>

Alternatively, pre-defined renderers can be used by specifying their name as a directive argument, and providing arguments in the directive content as a JSON5 object (without enclosing {}).

```{jsxgraph} grid
width: 17.5, height: 5, grid: {minorElements: 9},
```

The aspect ratio of graph containers with keepAspectRatio: true (the default) is set automatically from the boundingBox. Otherwise, the aspect ratio defaults to 1 / 1, and can be overridden with the :style: option.

Defaults can be set via the jsxgraph metadata, and are merged into JXG.Options.

jsxgraph directives generate <tdoc-dyn type="jsxgraph"> elements, and their controller property is the Board instance returned by the renderer.

Options

:class: name [name...] (IDs)#

A space-separated list of CSS classes to add to the graph container.

:style: property: value; [property: value; ...]#

CSS styles to apply to the graph container.

Renderers#

This section describes the pre-defined renderers. Custom renderers can be added in JavaScript via render.

grid#

This renderer displays a grid.

  • width (default: 35): The width of the grid.

  • height (default: 10): The height of the grid.

  • grid: Grid attribute overrides.

  • board: Board attribute overrides.

```{jsxgraph} grid
width: 17.5, height: 5, grid: {minorElements: 9},
```

axes#

This renderer displays a set of axes and an optional grid.

  • boundingBox (default: [-11, 11, 11, -11]): The bounding box of the graph.

  • majorX, majorY, major: The distance between major ticks on the X axis, Y axis, or both. The default is 1.

  • minorX, minorY, minor: The number of minor ticks between major ticks on the X axis, Y axis, or both. The default is 0.

  • labelsX, labelsY, labels: The labels to draw for major ticks on the X axis, Y axis or both. When a number is given, only the labels for multiples of that number are drawn. When an array is given, only the listed labels are drawn. The default is to draw all labels.

  • grid: Grid attribute overrides, or false to disable the grid. The default is to draw grid lines at major ticks of both axes.

  • board: Board attribute overrides.

```{jsxgraph} axes
boundingBox: [-2, 5, 25, -5],
majorX: 5, minorX: 4, majorY: 2, minorY: 1,
grid: {majorStep: 1},
```

cumulativeDistributionFunction#

This renderer displays the cumulative distribution function of a sample or a distribution.

  • sample: The statistical sample for which to plot the CDF, an array of values or [value, count] pairs.

  • distribution: The distribution for which to plot the CDF, an array of [x, count] pairs where x is the lower bound of the bin, and the last element must have a zero (or undefined) count.

  • min: The minimum value to represent on the horizontal axis.

  • max: The maximum value to represent on the horizontal axis.

  • step: The smallest tick interval to represent on the horizontal axis.

  • normalize (default: true): When true, represent cumulative frequencies instead of counts.

  • yAnchor (default: 0.08): The horizontal location to anchor the vertical axis at, as a fraction of the graph width.

  • defaults: Board attribute defaults.

  • options: Board attribute overrides.

```{jsxgraph} cumulativeDistributionFunction
:style: aspect-ratio: 2 / 1;
min: 0, max: 24, step: 2,
sample: [
  [2, 1], [4, 3], [6, 7], [8, 8], [10, 2], [12, 1], [14, 6], [16, 9], [18, 8],
  [20, 5],
],
options: {
  defaults: {
    point: {strokeColor: '#0072B2', fillColor: '#0072B2'},
  },
},
```

tdoc/jsxgraph.js#

This module (source) provides functionality related to jsxgraph directives.

Module globals

jsxgraph.JXG#

The JXG namespace of the JSXGraph library.

jsxgraph.render#

An object containing named rendering functions. In addition to the pre-defined renderers described above, custom renderers can be added by setting functions as object attributes. Rendering functions receive the wrapper DOM element as their first argument, and the content of the directive as a JSON object as their second argument.

```{jsxgraph} regularPolygon
sides: 4,
```
```{jsxgraph} regularPolygon
sides: 5,
```

<script type="module">
const {initBoard, render} = await tdoc.import('tdoc/jsxgraph.js');

render.regularPolygon = (el, {sides}) => {
  return initBoard(el, {
    boundingBox: [-1.3, 1.3, 1.3, -1.3],
  }, board => {
    const s1 = 1 / sides;
    board.create('regularpolygon', [
      [Math.cos(Math.PI * (-0.5 - s1)), Math.sin(Math.PI * (-0.5 - s1))],
      [Math.cos(Math.PI * (-0.5 + s1)), Math.sin(Math.PI * (-0.5 + s1))],
      sides,
    ]);
  });
};
</script>
jsxgraph.attrs#

An object containing named attribute sets. Custom sets can be defined by assigning to object attributes. The following sets are pre-defined:

  • nonInteractive: Disable interactive features.

Functions

jsxgraph.initBoard(el, attrs[, fn])#

Render the content of a jsxgraph directive.

In addition to board attributes, attrs can specify per object type defaults for the graph in the defaults key, similar to how global defaults are specified in JXG.Options.

Arguments:

  • el (HTMLElement) -- The wrapper DOM element that will contain the graph.

  • attrs (Object|Array) -- The board attributes, passed to JSXGraph.initBoard(). If an Array of attributes is provided, they are merged.

  • fn (function) -- An optional function that is called with the Board as an argument.

Returns:

A Promise that resolves to the Board.

jsxgraph.withAxesLabels(xs, ys)#

Return mix-in board attributes to draw only selected labels on the default axes. For number arguments, the labels that are their multiples are drawn. For array arguments, only the listed values are drawn.

Arguments:

  • xs (number|Array) -- The labels to draw on the X axis.

  • ys (number|Array) -- The labels to draw on the Y axis.

Returns:

An attribute object.