By Murray Bourne, 27 May 2010
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).
I've been investigating JSXGraph over the last few weeks and I'm quite impressed.
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).
- Much smaller than java applets and much less clunky
- 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
- 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!
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.
You can't actually do anything in this one - just allow yourself to get hypnotized!
Watch this space!
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:
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.
See the 13 Comments below.