Home | Math Display Experiments | ASCIIsvg-IM.js Demo and Syntax

ASCIIsvg-IM.js Demo and Syntax

ASCIIsvg-IM.js is a lightweight javascript library that produces SVG-based math graphs with plain text function input (e.g. "3sin(5x)", rather than the normal javascript syntax of "3*Math.sin(5*x)").

ASCIIsvg-IM.js is a heavily modified version of Peter Jipsen's ASCIIsvg.js.

It's much smaller than the better-known JSXGraph, which also produces SVG math graphs. Here's a comparison:

But of course, ASCIIsvg-IM.js is nowhere near as sophisticated or versatile as JSXGraph.

ASCIIsvg-IM.js demo

This page shows what ASCIIsvgIM.js can do and how to do it (the syntax). Much of it is based on some of Peter Jipsen's examples.

Overview of the process

Currently, there are several default colors, stroke thicknesses and dot sizes. You can just go with those, or override them as the below examples demonstrate.

Note that if you change most variables, they will apply to all other following elements on the page. Therefore, you will see several examples of "setting back" the defaults.

TODO: A future revision will allow you to set color and size parameters for each element independently of others. But that's for a another day...

All ASCIIsvg-IM examples on IntMath

Go to: ASCIIsvg-IM examples at the bottom of this page.

Ellipses, squares and arcs

Here's the coode to produce the above graph.

Equal-scaled axes and plots

Here's the code:

Polygons

Here's the code:

Using a for loop to produce a spiral

The syntax:

Using a for loop to produce a discrete graph

Dots, segments and arrows

Here's the code:

Vectors

Number line

Animations

This uses stroke-dasharray to significantly speed up the animation.

The syntax:

Vary parameter using a slider

This uses noUI-slider.js (a mobile-friendly slider library which is independent of ASCIIsvg-IM.js). We're only using one slider here. (See the full example at Quadratic Equations interactive graph.)

For the graph of the quadratic expression, y = ax² + bx + c, we have:

Here's the code:

Interactives using ASCIIsvg-IM.js

Counting Game

Domain and Range interactive applet (with noUi-slider)

Online graphing calculator (2): Plot your own graph (SVG)

Matrices and Linear Transformations

Eigenvalues and eigenvectors - concept applet

Interactive Quadratic Function Graph (with noUi-slider)

Applications of Radian Measure (with noUi-slider)

Adding Vectors using SVG graphs

Graphs of y = a sin x and y = a cos x (with noUi-slider)

Graphs of y = a sin bx and y = a cos bx (with noUi-slider)

Frequencies of Notes on a Piano: Learning object

Graphs of y = a sin(bx+c) and y = a cos(bx+c) (with noUi-slider)

Graphs of tan, cot, sec and csc (with noUi-slider)

Composite Trigonometric Graphs

Lissajous Figures

Graphical explanation of multiplying and dividing complex numbers (with noUi-slider)

Impedance and Phase Angle: Application of Complex Numbers (with noUi-slider)

Polynomial Functions and Equations

Roots of Polynomial Equations using Graphs

Binomial Series Interactive

Inverse trigonometric function graph animations

Curves in Polar Coordinates (with noUi-slider)

Squaring the Circle: rope method with proof

Calculus Concepts First Principles Applet (with noUi-slider)

The Derivative from First Principles (with noUi-slider)

Derivative interactive graphs - polynomials (with noUi-slider)

Differentiation interactive applet - products and quotients (with noUi-slider)

Newton's Method Interactive Graph (with noUi-slider)

Curvilinear Motion (anim)

Related Rates (anim)

Differentiation interactive applet - trigonometric functions (with noUi-slider)

Riemann Sums (with noUi-slider)

Fundamental Theorem of Calculus Applet (with noUi-slider)

Work by a Variable Force using Integration

Riemann Sums - Discontinuous Functions (with noUi-slider)

Taylor and Maclaurin Series interactive applet

Evolute of a curve (anim)

Animated Lissajous figures (anim)

Solid of Revolution maker (3js)

Animated Moore Curve (anim)

CSS matrix interactive applet

Witch of Agnesi (anim)

Lemniscate of Bernoulli (anim)

Quadratrix of Dinostratus (anim)

Related page

You may also be interested in svgPHPGrapher Syntax Examples. svgPHPGrapher is a highly modified PHP port of ASCIIsvg.js and produces static SVG math graphs with no javascript.