Small library to plot 2D mathematical JavaScript functions in a canvas element with panning and zooming. Written as part of a simple function plotter utility (http://arkanis.de/projects/js2plot/)
By Stephan Soller stephan.soller@helionweb.de, released under the MIT License.
- You can write the functions directly in JavaScript. For more complex functions this is simpler than writing math expressions.
- Panning and zooming is handled by js2plot. You can freely move around in the plot and look at areas of interest.
- Triggers
plotchangeandplotchangeendevents when the user interacts with the plot.
<!DOCTYPE html>
<meta charset=utf-8>
<title>js2plot example</title>
<canvas id=plot width=512 height=256></canvas>
<script src="js2plot.js"></script>
<script>
var plot = js2plot("canvas#plot", {
base_size_ws: 4,
grid_line_spacing_ws: Math.PI / 8,
major_grid_line_interval: 4,
axes_number_to_text: (n) => (n / Math.PI).toString() + "π"
});
plot.update(`
var a = (x) => Math.sin(x);
plot("green", a);
`);
</script>
Call the js2plot() function to wrap a canvas element into a plot object. You can then plot different
JavaScript code with the plots update() function. See the documentation at the end of the
source code (the public interface).
The documentation and the source code use the notion of world space and view space coordinates.
View space is the coordinate system of the canvas. The origin is in the top left corner and the Y axis
grows downwards. Each unit is one pixel. Word space on the other hand is the mathematical coordiante
system used by the plotted functions. The origin is (by default) in the center of the canvas, the Y axis
grows upwards and the plot is base_size_ws units in size. The library uses the _vs and _ws
suffixes to make it clear which coordinate system a variable or option uses.
The js2plot() function itself takes 2 arguments:
canvas: Either an HTMLCanvasElement or a CSS selector (as string). If it's a string
document.querySelector() will be called with the selector. The result is expected to be
a canvas element.
options (optional): An object with settings for the plot.
-
base_size_ws: The width in world space units that should at least be visible in the plot when not zoomed in or out (aview_scaleof 1.0). The scale is calcuated based on the canvases width or height (whichever is smaller). Default:10. -
grid_line_spacing_ws: The distance (in world space units) between grid lines at aview_scaleof1.0(not zoomed in or out). Default:1/5(5 grid lines for every world space unit). -
major_grid_line_interval: Show a major grid line every n minor grid lines. Default:5(one major grid line every 5 minor grid lines). -
plot_step_size_vs: The step size in view space units (canvas pixels) that is used when drawing function plots. Default:2(a function is drawn as a line with one point every 2 pixels). -
view_scale: The scale representing the initial user zoom. See thescale()function at the end for more details. Default1.0(not zoomed in or out). -
view_center_ws: The initial center of the plot in world space coordinates. See thecenter()function at the end for more details. Default:{x: 0, y: 0}(the origin is shown at the center of the canvas). -
axes_number_to_text: A function that takes a number and returns a string. Each number drawn at the axes is passed through this function. You can use it to format those numbers in a special way. Default: CallstoString()on the number.
js2plot fires several events on the canvas element when the plot has changed.
When the user pans the view a plotchange event is fired for every mousemove. At the end of
panning a plotchangeend event is fired (when the mouse button is released). plotchangeend is
also fired when the user zooms in or out with the mouse wheel or when the update() function is done.
These events signal that the plots state has changed. You can use the scale() and center()
functions of the plot object to read the current state (and e.g. save it).