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

Page by Murray Bourne, IntMath.com. Last updated: 07 Apr 2018# 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:

ASCIIsvg-IM.js | JSXGraph | |
---|---|---|

Uncompressed | 28 KB | 902 KB |

Compressed | 18 KB | 535 KB |

Gzipped | 6 KB | 157 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* = *ax*^{2} + *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)

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)

## 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.