MathPlotter

Poor man's Desmos.

Features

• Multiple plots.
• Implicit functions.
• Inequalities.
• Pan & zoom.
• Adaptive sampling.
• Automatic parameters, value & min/max sliders.
• Over 50 functions supported, courtesy of math.js.
• Straightforward API.

Getting started

MathPlotter is distributed as umd package. Load jsxgraphcore.js, math.js and plotter.js:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/distrib/jsxgraphcore.min.js.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.1.1/math.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.9.2/jsxgraph.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathplotter/plotter.min.js"></script> 

Setup HTML:

<div id="plotterElement"></div>

Instantiate MathPlotter:

var plotter = new MathPlotter("plotterElement");
plotter.init();

Config

Pass config options as a second argument to the constructor of MathPlotter:

var plotter = new MathPlotter("plotterElement", {
  // config options
});

Instance API

Methods in the following table can be called on the plotter instance from the examples above.

| Function | Description | Call |--------|-------|-------| | plot | Plots one or more functions | One:plot("x")'Multiple:plot("a * sin(b * x) + c;a * cos(b * x) + c;tanh(x);(x^2 + y^2 – 1)^3 = x^2 y^3")Param hints:plot([{fn: "a * sin(b * x) + c", pars: [{ name: "a", value: 5 }, { name: "c", value: 1 }]}, {fn: "x + 2"}]) | | save | Saves and downloads the plot in SVG format. | save() | | destroy | Removes all event handlers, destroys elements created by MathPlotter, and frees memory. | destroy() |

Static API

Unlike the methods above, the following methods are called on MathPlotter statically.

| Function | Description | Call |--------|-------|-------| | Fire | Creates a headless instance, plots the given expressions, and destroys the instance immediately. Returns SVG screenshot of the plot. | Fire("ln(x)") |

Build

To build plotter.min.js & plotter.css:

npm i & npm run build

To start the dev server:

npm run dev

To release a new version:

npm run release:minor

Screenshots