JSXGraph: interactive javascript graphs

UPDATE: The examples on this page used out-of-date versions on JSXGraph. In most cases, I've updated them elsewhere on the site. You'll see links to the updated applets (which in most cases are now mobile friendly).

JSXGraph information

I've been investigating JSXGraph over the last few weeks and I'm quite impressed.

JSXGraph is a javascript-based grapher from the mathematics people at the University ofvert Bayreuth in Germany.

Advantages of JSXGraph

• It works in all major browsers and is cross-platform.
• It even works on Apple's iPod touch, iPhone and iPad, since it is not Flash- or java applet-based.
• No upload of any files - all the programming is done within the <script> tags on the page.
• Once the user has downloaded the actual JSXGraph script to their browser (76.2 kB on a gzipped server), the file sizes are very small (this page is only about 12 kB).
• Easy to implement with only 3 text-based elements: (a) A call to the JSXGraph javascript file (jsxgraphcore.js); (b) An empty "div" tag to hold the graph; and (c) The javascript that describes your graph
• Much smaller than java applets and much less clunky
• No need for a plugin of any sort - just javascript which is enabled by default on virtually all browsers
• There are many demo examples on which you can base new projects
• Compared to graphs with SVG, there are less compatability issues
• If I need to change anything, it's just a change to the code. This is much easier compared to development in Flash, where I would need to open the third party application (Flash), make the change, create the SWF file, then upload the SWF file to the server
• It works in a WordPress blog, as you can see below. There's a JSXGraph WordPress plugin under development.

Disadvantages of JSXGraph

• You really need to have a good understanding of javascript to get anything worthwhile out of JSXGraph (you can view the page source for this page to see how it is done). So it's not really a "plug and play" application (there are no WYSIWYG interfaces or wizards), so it's not really that friendly if you want newbie students to develop new applications using it. [Update: This is my attempt to provide a user-friendly grapher: Plot graphs using JSXGraph]
• The documentation is still rather sparse (since it is quite a new development). So there's quite a bit of "guess and check" involved.

JSXGraph doesn't behave all that well in Internet Explorer. But this is not JSXGraph's fault - it's just one of IE's many irritations. It still works, but (for example) IE does not display the grid scale (numbers on the axes) in the examples on this page. But at least it works.

You can get more information, including examples and documentation here: JSXGraph.

This wiki contains lots of examples: Showcases

Examples using JSXGraph

The following examples are my recent efforts. Most are based on existing examples in the JSXGraph site.

Investigate Slope and y-intercept of a Straight Line

With this one you can drag either point A or point B, and you can see the resulting linear equation in the form y = mx + b. You could use this to investigate what the equation of a straight line is when you have:

• A horizontal line (What is m? What is b?)
• A vertical line (What is m? What is b?)
• A line through the origin (What is m? What is b?)

UPDATED APPLET: I've replaced this applet to a new one on this page: Gradient (Slope) and Inclination of a Line.

At the bottom right of each screen is a facility to zoom in (the "+" sign) and pan left right and up-down. Try it!

Ellipse

With this one you can drag point D around the ellipse. In this case the equation of the ellipse is: .

Points A and B are each at a focus of the ellipse (these points are fixed).

You could use this one to investigate the property that Length AD + Length BD is constant for a particular ellipse.

[In this example, AD + BD = 16. It jumps to 15.9 occasionally because of rounding.]

UPDATED APPLET: I've replaced this applet on this page: Interactive ellipse graphs.

Random Balls

You can even do animations with JSXGraph. Here are moving random balls. This uses javascript's "setInterval" time function.

You can't actually do anything in this one - just allow yourself to get hypnotized!

Watch this space!

Pentagon

Drag point A to change the size and position of the pentagon.

Watch this space!

Investigate Sine Curve - Amplitude and phase shift

Move the magenta dot up and down or left and right to investigate the amplitude and phase shift of a sine curve.

The equation of the curve appears in the form y = a sin (bx + c)

UPDATES: There are new and similar graphs here:

Sin & Cos Graphs - amplitude

Sine and cosine graphs - period

Graphs using polar coordinates

This one lets you change the angle for a function of the form r = f(θ), where we are using polar coordinates.

Drag the blue dot left and right (slowly) along the slider to change the angle and to see the resulting length r.

The magenta curve starts when θ = 0.

UPDATE: You can see examples of polar coordinate graphs using JSXGraph (in the answers) on this page: Curves in Polar Coordinates

Also see Radians - an Introduction for a lesson which includes a JSXGraph interactive.

Conclusion

JSXGraph is a useful addition for those of us who want to create interactive math graphs. It is cross-browser and cross-platform, easy to implement, but takes some javascript knowledge to develop new graphs.

See the 13 Comments below.