Thursday, January 30, 2014

JSXGraph: on-line interactive figures for mathematics.

One of my areas of interest in the development of open-source texts is in the possibilities offered by on-line texts. In particular, the use of Javascript and other technologies to present dynamic content to the reader. Such content can be in the form of interactive figures, numerical computation, symbol manipulation, and simulation (just to name a few possibilities).

This post is about a well-designed Javascript library called JSXGraph that lets authors easily create 2D interactive figures. For example, here we have an interactive figure written using JSXGraph that lets the reader explore the geometric interpretation of the derivative (click on the red point and move it around).

JSXGraph is a free, open-source library of functions that any modern browser can implement (via Javascript). Authors with a modicum of programming experience can quickly generate interactive figures like this. Alternatively, interested students can make a project out of the creation and contribution of such figures to an on-line, open-source text. Of course, one risk of investing time and effort into such figures is that the technology will "move on" and your figures will become obsolete. The presence of Javascript in all modern browsers and the fact that JSXGraph is free and open-source help to protect from that possibility.

The JSXGraph site offers a large "zoo" of examples with source code that is free to use, re-use and modify. These examples provide an entry point into learning the syntax and ultimately to developing entire figures of your own.

As you can see, I'm a big fan. If any of you out there are authoring on-line versions of open-source texts, I'd be happy to help you get JSXGraph up and running on your book. To see its use in an active on-line, open-source text, visit Guichard's Calculus text. Most of the figures in that version of the text are done in JSXGraph. One of my personal favorites is the one that illustrates Newton's Method.


  1. JSXGraph is great stuff. Somehow I hadn't noticed the interactives using it in Guichard's book - neat stuff!

    If allowing students to enter expressions to graph, it can be nice to combine JSXGraph with another function that can take student-friendly entry and convert it to Javascript format. An example is this grapher I built a couple years ago: I've got a somewhat updated version of the function used if anyone wants it.