Visualizations

Each part of this page shows the text you type, exactly as you type it, beside what students get from it. The examples come from the ready-made mathematics course for MPM2D, so you can open the same pages in a course of your own.

Nothing here changes a page you already have. A page without these blocks is built exactly as before.

Handouts that print properly have a page of their own: Printing.

Diagrams and graphs

Two kinds of mathematics figure, each a block of plain text in the note itself — never a picture file to redraw when a number changes.

A diagram, drawn from TikZ

TikZ is the drawing language of LaTeX. Plantoir draws the diagram once, when the site is built: students download a crisp picture, it follows the site's light or dark theme, and it prints black on white.

What you type

```tikz
% alt: Triangle ABC with AB = 4 and BC = 6, beside the larger similar triangle DEF with DE = 10 and EF unknown.
\begin{document}
\begin{tikzpicture}
  \draw[thick] (0,0) node[below left]{$A$} -- (2.4,0) node[below right]{$B$} -- (0.8,1.6) node[above]{$C$} -- cycle;
  \node[below] at (1.2,0) {$4$};
  \node[above right] at (1.6,0.8) {$6$};
  \draw[thick] (4,0) node[below left]{$D$} -- (10,0) node[below right]{$E$} -- (6,4) node[above]{$F$} -- cycle;
  \node[below] at (7,0) {$10$};
  \node[above right] at (8,2) {$?$};
\end{tikzpicture}
\end{document}
```

What students get

What it accepts

• The first line, % alt: …, is one sentence a screen reader says instead of the picture.
• \usepackage{…} and \usetikzlibrary{…} go before \begin{document}; the picture goes between \begin{document} and \end{document}. One picture to a block.
• pgfplots, circuitikz, chemfig, tikz-cd, amsmath and TikZ's own libraries work. siunitx, mathtools and tkz-euclide do not.
• A diagram that can't be drawn shows students “This diagram couldn't be drawn.”, and Plantoir tells you the page, the diagram and the line.

To see the diagram inside Obsidian as you write, install Obsidian's TikZJax plugin: the site is drawn with the same engine.

A graph students can move

A functionplot block is drawn in the student's browser from the site's own files. They can drag it, and zoom with ⌘ or Ctrl and a scroll. On paper it prints at the bounds you wrote.

What you type

```functionplot
---
bounds: [-4, 5, -6, 10]
alt: The parent parabola y = x^2 and y = -2(x - 1)^2 + 3, which opens down, is narrower, and has its vertex at (1, 3).
---
y = x^2
y = -2(x - 1)^2 + 3
```

What students get

From Transformations of Parabolas: the parent and the finished sketch on one set of axes. Try dragging it.

What it accepts

• The settings come first, between --- lines, then one function per line: y = x^2.
• Settings, all optional: title, xLabel, yLabel, bounds: [xMin, xMax, yMin, yMax], grid, disableZoom: true, and alt — one sentence a screen reader says instead of the graph.
• The grapher's own spelling: ^ for powers, x*(x - 1) rather than x(x - 1), log for the natural log, PI and E in capitals, brackets on every function.
• It can't mark a point or shade a region. For a marked point, draw the graph in TikZ with pgfplots.

In Obsidian the block shows as its text; the graph is drawn when you preview.

Function graphs pan and zoom now; sliders and dynamic geometry arrive with GeoGebra in the next release.

On the Mac. The Windows version gets this in a later release.

Or ask Claude or Codex

You don't have to learn any of this. Plantoir writes its guidance for these blocks into your working folder, and keeps it up to date, so Claude Code or Codex started there already knows how to write each one — when a graph suits and when a diagram does, the patterns that work, and what to avoid. There is nothing to install or paste.

Asked this, in a working folder holding an MPM2D course:

Add a graph of y = 3(x - 2)^2 - 4 beside its parent function y = x^2 to the page "courses/MPM2D/Unit 2/Parabolas.md", under the example.

Claude added this block under the example:

```functionplot
---
title: y = 3(x - 2)^2 - 4 and its parent
bounds: [-4, 6, -6, 10]
alt: The parent parabola y = x^2 and y = 3(x - 2)^2 - 4, which opens up, is narrower, and has its vertex at (2, -4)
---
y = x^2
y = 3(x - 2)^2 - 4
```

and this is the graph it draws:

Ask for a slider and it says sliders arrive with GeoGebra in the next release, and offers the nearest thing for now: two or three curves on one set of axes.

Open either from a course's menu with Revise With ▸ Claude… or Codex…, which starts it in your working folder.