Interactive+Math+Graphs

For instance, the impressive jsxGraph library, a powerful cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. Check out their long list of examples.

Edit a wikispaces page. Insert a Widget. Choose Other as widget type. This let you type custom html and javascript.

Here, we will draw this graph. It is interactive. Click on the points to change their position and change the shape of the function curves.

media type="custom" key="10109639"

Make sure you embed the jsxGraph library. This should be done once and only once on a given page. Create an other widget with the script tag or add it on top of the first jsxGraph of the page.

code  code Any graph is made of two parts. A zone on the screen in which to draw the graph. The code that governs how the graph should look. (1) Add a division tag to define the width and height of the graph drawing area. Give it jxgbox as class and a unique name as id. code code (2) Add the script. In the initBoard function call, refer to the unique division id. code  //<![CDATA[ var addPoint = function(x) { p.push(brd.create('point', [x,(Math.random-0.5)*3],{style:6})); brd.update; };

var brd = JXG.JSXGraph.initBoard('box', {axis:true,originX: 250, originY: 250, unitX: 50, unitY: 25}); brd.suspendUpdate; var p = []; p[0] = brd.create('point', [-4,2], {style:6}); p[1] = brd.create('point', [3,-1], {style:6}); addPoint(-2); addPoint(0.5); addPoint(1); var pol = brd.lagrangePolynomial(p); var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3}); var g2 = brd.create('functiongraph', [brd.D(pol), -10, 10], {dash:3, strokeColor:'#ff0000'}); brd.unsuspendUpdate; //]]> code Click Save on the widget, save on the page and you are done.