Skip to main content

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

Page by Murray Bourne, IntMath.com. Last updated: 23 Dec 2017

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:

 ASCII​svg-IM.jsJSXGraph
Uncompressed28 KB902 KB
Compressed18 KB535 KB
Gzipped6 KB157 KB

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.

Frame rate:

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 = ax2 + bx + c, we have:

Here's the code:



Interactives using ASCIIsvg-IM.js

Domain and Range interactive applet (with noUi-slider)

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

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)

Composite Trigonometric Graphs

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

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)

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

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.

Search IntMath, blog and Forum

Search IntMath