Code de graphiques en JSXGraph

Médianes

<div id='boxMed' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('boxMed', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} );
var C = board.create('point', [0.2, 1.5], );
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } });
var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'});
var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'});
var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'});
var l1 = board.create('line',[mAB,C]);
var l2 = board.create('line',[mAC,B]);
var l3 = board.create('line',[mBC,A]);
var G = board.create('intersection',[l1,l2],{name:'G',label:{offset:[5,10]}})
</script>

Médiatrices

<div id='boxMediatrice' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('boxMediatrice', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,-5]}} );
var C = board.create('point', [0.2, 1.5], );
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } });
var mAB = board.create('midpoint', [A, B], {name:'C\'',size:0.8,label:{offset:[5,-15],fontSize:10},strokeColor:'blue'});
var mAC = board.create('midpoint', [A, C], {name:'B\'',size:0.8,label:{offset:[5,13],fontSize:10},strokeColor:'blue'});
var mBC = board.create('midpoint', [C, B], {name:'A\'',size:0.8,label:{offset:[-15,-5],fontSize:10},strokeColor:'blue'});
var medAB = board.create('perpendicular', [pol.borders[0], mAB]);
var medAC = board.create('perpendicular', [pol.borders[2], mAC]);
var medBC = board.create('perpendicular', [pol.borders[1], mBC]);
var O = board.create('intersection',[medAB,medBC],{name:'O',label:{offset:[10,10]}});
</script>

Hauteurs

<div id='boxHauteur' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('boxHauteur', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, 0], {label:{offset:[-15,5]}} );
var C = board.create('point', [0.2, 1.5], );
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } });
var hC = board.create('perpendicular', [pol.borders[0], C]);
var hA = board.create('perpendicular', [pol.borders[1], A]);
var hB = board.create('perpendicular', [pol.borders[2], B]);
var c1 = board.create('intersection',[hC,pol.borders[0]],{name:'C_1',label:{offset:[-17,-10]}});
var a1 = board.create('intersection',[hA,pol.borders[1]],{name:'A_1',label:{offset:[-22,-2]}});
var b1 = board.create('intersection',[hB,pol.borders[2]],{name:'B_1',label:{offset:[2,15]}});
var H = board.create('intersection',[hC,hA],{name:'H',label:{offset:[5,15]}});
</script>

Distance d'un point à une droite

<div id='boxDistPtD' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script>
var board12 = JXG.JSXGraph.initBoard('boxDistPtD', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A12 = board12.create('point', [0, 1.3] ,{visible:true,fixed:false});
var B = board12.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false} ); var C = board12.create('point', [1, 0], {visible:false});

var l1 = board12.create('line',[B,C],{straightFirst:true});
var pl1 = board12.create('perpendicular',[l1,A12],{visible:false});
var H = board12.create('intersection',[l1,pl1],{name:'H'});
var M12 = board12.create('point', [1.1, 0], {slideObject: l1,name:'M'});
var s1 = board12.create('segment',[A12,M12],{strokeColor:'black',strokeWidth:1,dash:2});
var s2 = board12.create('segment',[A12,H],{strokeColor:'gray',strokeWidth:1,dash:1});
var t1 = board12.create('text',[-1,1.6,function(){var l=Math.sqrt(Math.pow(M12.X()-A12.X(),2)+Math.pow(M12.Y()-A12.Y(),2));return 'AM = '+l;}]);
</script>

Bissectrice

<div id='boxBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('boxBis', {boundingbox: [-1.5, 2.3, 1.5, -0.2], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board.create('point', [1, 0] ,{visible:false,fixed:true});
var B = board.create('point', [-1, 0], {label:{offset:[-15,5]},visible:false,fixed:true} );
var C = board.create('point', [-0.5, 1.3], {visible:false,fixed:true});
var l1 = board.create('line',[B,A],{straightFirst:false});
var l2 = board.create('line',[B,C],{straightFirst:false});
var a1 = board.create('angle',[A,B,C],{name:'',label:{fontSize:0}});
var bB = board.create('bisector', [A, B, C],{straightFirst:false});
var M = board.create('point', [1.1, 0], {slideObject: bB,name:'M',label:{offset:[-5,10]}});
var p1 = board.create('perpendicular',[l1,M],{straightFirst:false,visible:false});
var M1 = board.create('intersection',[l1,p1],{name:'M_1',label:{offset:[5,-10]}});
var s1 = board.create('segment',[M,M1],{dash:2,strokeColor:'gray',strokeWidth:1});
var p2 = board.create('perpendicular',[l2,M],{straightFirst:false,visible:false});
var M2 = board.create('intersection',[l2,p2],{name:'M_2',label:{offset:[-22,5]}});
var s2 = board.create('segment',[M,M2],{dash:2,strokeColor:'gray',strokeWidth:1});
var t1 = board.create('text',[-1.45,2.1,function(){var l=Math.sqrt(Math.pow(M.X()-M1.X(),2)+Math.pow(M.Y()-M1.Y(),2));return 'MM_1 = '+l;}]);
var t2 = board.create('text',[-1.45,1.9,function(){var l=Math.sqrt(Math.pow(M.X()-M2.X(),2)+Math.pow(M.Y()-M2.Y(),2));return 'MM_2 = '+l;}]);
</script>

Bissectrices

<div id='boxTriangleBis' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('boxTriangleBis', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false,showNavigation:false,pan:{enabled:false}});
var A = board.create('point', [1, 0] );
var B = board.create('point', [-1, -0.65], {label:{offset:[-15,5]}} );
var C = board.create('point', [0.2, 1.47], );
var pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } });
var bB = board.create('bisector', [A, B, C],{straightFirst:true,strokeWidth:1,dash:2});
var bC = board.create('bisector', [B, C, A],{straightFirst:true,strokeWidth:1,dash:2});
var bA = board.create('bisector', [C, A, B],{straightFirst:true,strokeWidth:1,dash:2});
var Ib = board.create('intersection',[bB,bA],{name:'I'});
var pAB = board.create('perpendicular',[pol.borders[0],Ib],{visible:false});
var I1b = board.create('intersection',[pol.borders[0],pAB],{name:'I_1',visible:true,label:{offset:[-2,-15]}});
var s1 = board.create('segment',[I1b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var pAC = board.create('perpendicular',[pol.borders[2],Ib],{visible:false});
var I2b = board.create('intersection',[pol.borders[2],pAC],{name:'I_2',visible:true,label:{offset:[15,-5]}});
var s2 = board.create('segment',[I2b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var pBC = board.create('perpendicular',[pol.borders[1],Ib],{visible:false});
var I3b = board.create('intersection',[pol.borders[1],pBC],{name:'I_3',visible:true,label:{offset:[-15,-5]}});
var s3 = board.create('segment',[I3b,Ib],{strokeWidth:0.5,strokeColor:'red'});
var cercleI = board.create('circle',[Ib,I1b]);
</script>

Droite d'Euler

<div id='box' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
(function () {
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true,showCopyright:false});
var cerise = {strokeColor: '#901B77',fillColor: '#CA147A'},
grass = { strokeColor: '#009256', fillColor: '#65B72E', visible: true, withLabel: true },
perpendicular = { strokeColor: 'black', dash: 1, strokeWidth: 1, point: JXG.deepCopy(cerise, { visible: true, withLabel: true }) },
median = { strokeWidth: 1, strokeColor: '#333333', dash:2 },
A = board.create('point', [1, 0], cerise),
B = board.create('point', [-1, 0], cerise),
C = board.create('point', [0.2, 1.5], cerise),
pol = board.create('polygon',[A,B,C], {
fillColor: '#FFFF00',
lines: {
strokeWidth: 2,
strokeColor: '#009256'
}
});
var pABC, pBCA, pCAB, i1;
perpendicular.point.name = 'H_c';
pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
perpendicular.point.name = 'H_a';
pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
perpendicular.point.name = 'H_b';
pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
grass.name = 'H';
i1 = board.create('intersection', [pABC, pCAB, 0], grass);
var mAB, mBC, mCA;
cerise.name = 'M_c';
mAB = board.create('midpoint', [A, B], cerise);
cerise.name = 'M_a';
mBC = board.create('midpoint', [B, C], cerise);
cerise.name = 'M_b';
mCA = board.create('midpoint', [C, A], cerise);
var ma, mb, mc, i2;
ma = board.create('segment', [mBC, A], median);
mb = board.create('segment', [mCA, B], median);
mc = board.create('segment', [mAB, C], median);
grass.name = 'S';
i2 = board.create('intersection', [ma, mc, 0], grass);
var c;
grass.name = 'U';
c = board.create('circumcircle',[A, B, C], {
strokeColor: '#000000',
dash: 3,
strokeWidth: 1,
center: grass
});
var euler;
euler = board.create('line', [i1, i2], {
strokeWidth: 2,
strokeColor:'#901B77'
});
board.update();
})();
</script>

Quadrilatère

<div id='jxgbox1' class='jxgbox' style='width:500px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdqu = JXG.JSXGraph.initBoard('jxgbox1', {boundingbox: [-10, 10, 10, -10], showCopyright:false});
var aq = brdqu.create('point', [-2, 1]);
var bq = brdqu.create('point', [-4, -5]);
var cq = brdqu.create('point', [3, -6]);
var dq = brdqu.create('point', [2, 3]);
var pq = brdqu.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: true});
</script>

Quadrilatère (repère)

<div id='jxgboxq' class='jxgbox' style='width:600px; height:600px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdq = JXG.JSXGraph.initBoard('jxgboxq', {boundingbox:[-2,2,2,-2], axis:true, showCopyright:false});
var pq = [];
for (var i=0; i<4; i++) {
pq.push(brdq.create('point', [Math.random()*3.6-1.8, Math.random()*3.6-1.8]));
}
var pol = brdq.create('polygon',pq,{
withLines:true,
withLabel: false,
label: {offset:[-200,100]} // Pixel values
});
</script>

Canon

<div id='jxgbox2' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
(function () {
var board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),
bottom = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),
muzzle = board.create('image', ['http://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,
animTime = function () {
return 3000;
},
fAngle = function () {
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());
},
fSolution = function (x) {
var b = fAngle(),
g = 9.81/2;
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();
},
fAnim = function (t) {
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,
s = NaN;
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {
s = solution.points[i].usrCoords.slice(1);
}
return s;
};
board.options.animationDelay = 50;
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});
cc = board.create('circle', [cp, 1.25], {visible: false});
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});
rot.bindTo(muzzle);
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});
rot.bindTo(cannonball);
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {
cannonball.setProperty({
visible: false
});
cbanim.setProperty({
visible: true
});
cbanim.moveTo([cannonball.X(), cannonball.Y()]);
cbanim.moveAlong(fAnim, animTime(), {
callback: function () {
// this is executed when the animation is finished
}
});
}, this);
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {
board.stopAllAnimation();
cbanim.setProperty({visible: false});
cannonball.setProperty({visible: true});
}, this);
})();
</script>

Cycloïde

<form style="width:100%;text-align:center;padding:10px;">
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="stop" onclick="rol.stop()">
<input type="button" value="one step" onclick="rol.rolling()">
</form>
<div id='jxgboxcy' class='jxgbox' style='width:600px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdcy = JXG.JSXGraph.initBoard('jxgboxcy',{boundingbox:[-1,5,20,-1], keepaspectratio:true, showCopyright:false});
brdcy.suspendUpdate();
// Line
var liney = brdcy.create('curve', [function(t) { return t;}, function(t){ return 1;}], {strokeWidth:6});
// Circle
var P = brdcy.create('point',[0,1],{name:'P', trace:true});
var C = brdcy.create('point',[0,2],{name:'C'});
var circley = brdcy.create('curve',[
function(t){var d = P.Dist(C),
beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
t += beta;
return C.X()+d*Math.cos(t);
},
function(t){var d = P.Dist(C),
beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
t += beta;
return C.Y()+d*Math.sin(t);
},
0,2*Math.PI],
{strokeWidth:6, strokeColor:'green'});
// Point on circle
var B = brdcy.create('glider',[0,2,circley],{name:'B', color:'blue',trace:false});
brdcy.create('segment',[C,B],{color:'black'});
brdcy.unsuspendUpdate();
var rol = brdcy.createRoulette(liney, circley, 0, Math.PI/20, 1, 100, [C,P,B]);
</script>

Triangle de Sierpinski

<form style="width:100%;margin:auto;text-align:center;padding:10px;"><input type='button' value="Next iteration" onClick="run();"></form>
<div id='boxsie' class='jxgbox' style='width:500px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div><script type='text/javascript'>
var boardsie = JXG.JSXGraph.initBoard('boxsie', {boundingbox: [-0.02631578947368421, 1.0263157894736843, 1.2894736842105263, -0.02631578947368421], showCopyright:false});
var level = 0;
function run() {
JXG.JSXGraph.freeBoard(boardsie);
boardsie = JXG.JSXGraph.initBoard('boxsie', {boundingbox: [-0.02631578947368421, 1.0263157894736843, 1.2894736842105263, -0.02631578947368421], showCopyright:false});
level++;
boardsie.suspendUpdate();
paint();
boardsie.unsuspendUpdate();
}
function paint() {
// Initial triangle
var xCoords = [0, 1, 0.5];
var yCoords = [0, 0, 1];
drawPolygon(xCoords, yCoords, level);
drawTriangle({x:0,y:0}, {x:1,y:0}, {x:0.5,y:1}, level);
}
function drawPolygon(xCoords, yCoords,level) {
p1 = boardsie.create('point', [xCoords[0], yCoords[0]], {visible:false,name:'',withLabel:false});
p2 = boardsie.create('point', [xCoords[1], yCoords[1]], {visible:false,name:'',withLabel:false});
p3 = boardsie.create('point', [xCoords[2], yCoords[2]], {visible:false,name:'',withLabel:false});
var colors=['#000000','#665566','#994499','#BB33BB','#EE99FF','#FFCCFF'];
l1 = boardsie.create('line',[p1,p2],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false});
l2 = boardsie.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false});
l3 = boardsie.create('line',[p3,p1],{straightFirst:false,straightLast:false,strokeColor:colors[level%6],name:'',withLabel:false});
}
function drawTriangle(a, b, c, level) {
if (level==0) return;
level -= 1;
// In das übergebene Dreieck, wird ein auf dem Kopf stehendes Dreieck eingefügt
var xCoords = [c.x, (c.x+b.x)/2, (a.x+c.x)/2];
var yCoords = [b.y, (c.y+a.y)/2, (c.y+a.y)/2];
drawPolygon(xCoords, yCoords,level);
// 3 neue Dreiecke bestimmen
a1 = a;
b1 = {x:c.x, y:b.y};
c1 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2};
drawTriangle(a1, b1, c1, level);
a2 = {x:c.x, y:b.y};
b2 = b;
c2 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2};
drawTriangle(a2, b2, c2, level);
a3 = {x:(a.x+c.x)/2, y:(c.y+a.y)/2};
b3 = {x:(c.x+b.x)/2, y:(c.y+a.y)/2};
c3 = c;
drawTriangle(a3, b3, c3, level);
}
paint();
</script>

Addition de nombres complexes

<div id='box2' class='jxgbox' style='width:600px; height:400px;margin:auto;'></div>
<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-6, 6, 8, -4], axis: true, showCopyright:false});
var org = board.create('point', [0,0], {style:10,visible:true,fixed:true,name:' '});
var x = board.create('point', [2,2], {style:5,color:'blue',name:'x'});
var y = board.create('point', [-1,-3], {style:5,color:'blue',name:'y'});
var xy = board.create('point', ["X(x)+X(y)","Y(x)+Y(y)"], {style:7,color:'green',name:'x+y'});
var ax =board.create('arrow', [org,x], {strokeColor:'blue'});
var ay =board.create('arrow', [org,y], {strokeColor:'blue'});
var axy =board.create('arrow', [org,xy], {strokeColor:'red'});
var ax2 =board.create('arrow', [x,xy], {strokeColor:'blue',strokeWidth:1,dash:1});
var ay2 =board.create('arrow', [y,xy], {strokeColor:'blue',strokeWidth:1,dash:1});
</script>

Multiplication de nombres complexes

<div id='box3' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-bottom:40px;'></div>
<script type='text/javascript'>
brd2 = JXG.JSXGraph.initBoard('box3', {boundingbox: [-6, 6, 8, -4], axis: true, showCopyright:false});
var org2 = brd2.create('point', [0,0], {style:10,visible:true,fixed:true,name:' '});
var x = brd2.create('point', [1,0], {style:4,color:'blue',name:'x'});
var y = brd2.create('point', [0,2], {style:4,color:'red',strokeColor:'red',name:'y'});
var xy = brd2.create('point', ["X(x)*X(y)-Y(x)*Y(y)","X(x)*Y(y)+X(y)*Y(x)"], {style:7,fillColor:'green',strokeColor:'green',name:'x*y'});
var c = brd2.create('circle',[org2,1],{strokeWidth:1,dash:1});
var ax =brd2.create('arrow', [org2,x], {strokeColor:'blue'});
var ax =brd2.create('arrow', [org2,y], {strokeColor:'red'});
var ax =brd2.create('arrow', [org2,xy], {strokeColor:'green'});
</script>

Plan complexe



<div id="jxgbox123" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
<script>
 
 var board = JXG.JSXGraph.initBoard('jxgbox123', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
 JXG.Options.text.useMathJax = true;
 var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2}); 
 var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});
 
 var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
 vectU.setProperty({fixed:true});
 var tu = board.create('text',[0.5,-0.3,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12});
  tu.setProperty({fixed:true});
 var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
 vectV.setProperty({fixed:true});
 var tv = board.create('text',[-0.4,0.5,function() { 
    return '$\\vec{v}$';
  }], {fontSize:12});
  tv.setProperty({fixed:true}); 
 
 var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });

 pO.setProperty({fixed:true});
 var pM = board.create('point',[2.5,3],{name:'M',size:1});
 var pX = board.create('point',['X(M)',0],{name:'x',size:1});
 var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});
 
 var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
 var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
 var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
</script>




Plan complexe 2



<div id="jxgbox5123" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
<script type="text/javascript">
 
 var board = JXG.JSXGraph.initBoard('jxgbox5123', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
 JXG.Options.text.useMathJax = true;
 var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2}); 
 var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});
 
 var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
 vectU.setProperty({fixed:true});
 var tu = board.create('text',[0.4,-0.15,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12});
  tu.setProperty({fixed:true});
 var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
 vectV.setProperty({fixed:true});
 var tv = board.create('text',[-0.4,0.5,function() { 
    return '$\\vec{v}$';
  }], {fontSize:12});
  tv.setProperty({fixed:true}); 
 
 var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });
 pO.setProperty({fixed:true});
 
 var pM = board.create('point',[2.5,3],{name:'M',size:1});
 var pM1 = board.create('point',['X(M)','-Y(M)'],{name:'M\'',size:1});
 var pX = board.create('point',['X(M)',0],{name:'x',size:1});
 var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});
 var pY1 = board.create('point',[0,'-Y(M)'],{name:'-y',size:1});
 
 var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li3 = board.create('line',[pM1,pY1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li4 = board.create('line',[pM1,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
 var v2 = board.create('arrow', [pO, pM1], {strokeColor: 'blue', strokeWidth: '3px'});
 var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
 var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
 var tangle1 = board.create('angle', [pM1,pO,pX], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5, fillColor:'green'});
</script>




Plan complexe 3






<div id="jxgbox4" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
<script type="text/javascript">
 
 var board = JXG.JSXGraph.initBoard('jxgbox4', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: true});
 JXG.Options.text.useMathJax = true;
 var absAxe = board.create('arrow',[ [-4,0],[4,0] ], {strokeColor: 'black', strokeWidth:2}); 
 var absOrd = board.create('arrow',[ [0,-4],[0,4] ], {strokeColor: 'black'});
 
 var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
 vectU.setProperty({fixed:true});
 var tu = board.create('text',[0.4,-0.15,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12});
  tu.setProperty({fixed:true});
 var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
 vectV.setProperty({fixed:true});
 var tv = board.create('text',[-0.4,0.5,function() { 
    return '$\\vec{v}$';
  }], {fontSize:12});
  tv.setProperty({fixed:true}); 
 
 var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });
 pO.setProperty({fixed:true});
 
 var pM = board.create('point',[2.5,3],{name:'M',size:1});
 var pM1 = board.create('point',['-X(M)','-Y(M)'],{name:'M\'',size:1});
 var pX = board.create('point',['X(M)',0],{name:'x',size:1});
 var pX1 = board.create('point',['-X(M)',0],{name:'-x',size:1});
 var pY = board.create('point',[0,'Y(M)'],{name:'y',size:1});
 var pY1 = board.create('point',[0,'-Y(M)'],{name:'-y',size:1});
 
 var li1 = board.create('line',[pM,pX], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li2 = board.create('line',[pM,pY], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li3 = board.create('line',[pM1,pY1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var li4 = board.create('line',[pM1,pX1], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
 var v1 = board.create('arrow', [pO, pM], {strokeColor: 'blue', strokeWidth: '3px'});
 var v2 = board.create('arrow', [pO, pM1], {strokeColor: 'blue', strokeWidth: '3px'});
 var t = board.create('text',['X(M)/2','Y(M)/2+0.3','r']);
 var tangle = board.create('angle', [[5,0],pO,pM], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5});
 var tangle1 = board.create('angle', [pM,pO,pM1], {type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.5, fillColor:'green'});
</script>




Conjugué

<div id='box2uvw' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = false;
boardAZ = JXG.JSXGraph.initBoard('box2uvw', {boundingbox: [-2, 3, 5, -3], axis: true, showCopyright:false,showNavigation:false});
var pHaut = boardAZ.create('point', [3,2], {style:10,visible:true,name:'M a pour affixe z=x+iy',strokeColor:'blue',fillColor:'blue'});
var pBas = boardAZ.create('point', [function(){return pHaut.X()},function(){return -pHaut.Y()}], {style:10,visible:true,name:'M\' a pour affixe z=x-iy',strokeColor:'blue',fillColor:'blue'});
boardAZ.update(); </script>

Inégalité triangulaire




<div id="jxgbox6" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;"></div>
<script type="text/javascript">
 
 var board = JXG.JSXGraph.initBoard('jxgbox6', {boundingbox: [-2, 6, 6, -2], axis: false, showNavigation: false, showCopyright: false, grid: true});
 JXG.Options.text.useMathJax = true;
 var absAxe = board.create('arrow',[ [-2,0],[6,0] ], {strokeColor: 'black', strokeWidth:2}); 
 var absOrd = board.create('arrow',[ [0,-2],[0,6] ], {strokeColor: 'black'});
 
 var vectU = board.create('arrow',[ [0,0],[1,0] ], {label:'u', strokeColor: 'black', strokeWidth:3});
 vectU.setProperty({fixed:true});
 var tu = board.create('text',[0.5,-0.3,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12});
  tu.setProperty({fixed:true});
 var vectV = board.create('arrow',[ [0,0],[0,1] ], {strokeColor: 'black', strokeWidth:3});
 vectV.setProperty({fixed:true});
 var tv = board.create('text',[-0.4,0.5,function() { 
    return '$\\vec{v}$';
  }], {fontSize:12});
  tv.setProperty({fixed:true}); 
 
 var pO = board.create('point',[0,0], {name:'O',withLabel: true, label:{ offset:[-20,-10] } });

 pO.setProperty({fixed:true});
 var pM = board.create('point',[2,3],{name:'M',size:1});
 var pMpr = board.create('point',[2.5,1],{name:'M\'',size:1});
 var pM1 = board.create('point',[ function () { return  pM.X()+pMpr.X() }, function () { return  pM.Y()+pMpr.Y() } ],{name:'$M_1$',size:1});
 
 var li1 = board.create('line',[pM,pO], { straightFirst:false, straightLast:false, strokeWidth:2});
 var li2 = board.create('line',[pMpr,pO], {straightFirst:false, straightLast:false, strokeWidth:2});
 var li1 = board.create('line',[pM1,pO], {straightFirst:false, straightLast:false, strokeWidth:2});
 var li1 = board.create('line',[pM,pM1], {straightFirst:false, straightLast:false, strokeWidth:2});
 var li1 = board.create('line',[pMpr,pM1], {straightFirst:false, straightLast:false, strokeWidth:2});
 
 var t1 = board.create('text', [function () { return  pM.X()/2-0.2 }, function () { return  pM.Y()/2+0.5 }, '|z|']);
 var t2 = board.create('text', [function () { return  pMpr.X()/2 }, function () { return  pMpr.Y()/2-0.2 }, '|z‘|']);
 var t3 = board.create('text', [function () { return  pM.X()+pMpr.X()/2 }, function () { return  pM.Y()+pMpr.Y()/2+0.5 }, '|z‘|']);
 var t4 = board.create('text', [function () { return  pM.X()/2+pMpr.X()/2-0.2 }, function () { return  pM.Y()/2+pMpr.Y()/2+0.4 }, '|z+z‘|']);
 var t5 = board.create('text', [function () { return  pM.X()/2+pMpr.X()+0.1 }, function () { return  pM.Y()/2+pMpr.Y() }, '|z|']);
</script>




Angles adjacents



<div id="jxgbox7" class="jxgbox" style="width:400px; height:400px;margin: auto;margin-top: 20px;margin-bottom: 10px;"></div>
<script type="text/javascript">
 
 var board = JXG.JSXGraph.initBoard('jxgbox7', {boundingbox: [-4, 4, 4, -4], axis: false, showNavigation: false, showCopyright: false, grid: false});
 JXG.Options.text.useMathJax = true;
 
 
 var pA = board.create('point',[-2.2,0], {name:'$A$',withLabel: true, label:{ offset:[-20,-10] },size:1 });
 var pB = board.create('point',[1.8,-1.9],{name:'B',size:1});
 var pC = board.create('point',[-0.2,2.9],{name:'C',size:1});
 var pU = board.create('point',[1,0],{name:'',size:0});
  
 var vectU = board.create('arrow',[ pA,pU ], {label:'u', strokeColor: 'black', strokeWidth:3});
 var tu = board.create('text',[ function () {return (pA.X()+pU.X())/2;}, function () {return (pA.Y()+pU.Y())/2-0.2;}  ,function() { 
    return '$\\vec{u}$';
  }], {fontSize:12});
  
 var vectAB = board.create('arrow',[ pA,pB ], {label:'u', strokeColor: 'black', strokeWidth:3});
 var vectAC = board.create('arrow',[ pA,pC ], {label:'u', strokeColor: 'black', strokeWidth:3});
 

 
 var tangle3 = board.create('angle', [pB,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:1.2, fillColor : 'rgba(0,0,255,0.5)'});
 var tangle1 = board.create('angle', [pB,pA,pU], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'green'});
 var tangle2 = board.create('angle', [pU,pA,pC], {name:'',type:'sector', orthoType:'square', orthoSensitivity:0, radius:0.7, fillColor : 'red'});
</script>



Longueur d'un arc de courbe


<div id='box4a' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var brdac = JXG.JSXGraph.initBoard('box4a', {axis:true, boundingbox: [-8, 6, 8, -2], showCopyright:false});
var nac = brdac.create('slider',[[1,3],[6,3],[1,10,70]],{name:'n',snapWidth:1});
var fg = function(x){ return 0.2*x*x+2.0*Math.sin(x); }
var plot = brdac.create('functiongraph',[fg], {strokeWidth:1,strokeOpacity:0.3});
var start = -3.0;
var end = 5.0;
var sc = brdac.create('curve',[[0],[0]],{dash:1,strokeWidth:1,strokeColor:'red'});
sc.updateDataArray = function() {
   var i;
   var m = nac.Value();
   var d = (end-start)/m;
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = start;   
   this.dataY[0] = fg(start);   
   for (var i=1;i<=m;i++) {
     this.dataX.push(start+i*d);   
     this.dataY.push(fg(start+(i-1)*d));   
     this.dataX.push(start+i*d);   
     this.dataY.push(fg(start+i*d));   
   }  
}

var approx = brdac.create('curve',[[0],[0]], {strokeColor:'red'});
approx.updateDataArray = function() {
   var i;
   var m = nac.Value();
   var d = (end-start)/m;
   this.dataX = [];
   this.dataY = [];
   this.dataX[0] = start;   
   this.dataY[0] = fg(start);   
   for (var i=1;i<=m;i++) {
     this.dataX.push(start+i*d);   
     this.dataY.push(fg(start+i*d));   
   }  
}

brdac.create('text',[-6,-1,function(){ 
   var i,s,f0,f1;
   var m = nac.Value();
   var d = (end-start)/m;
   s = 0.0;
   f0 = fg(start);
   for (var i=1;i<=m;i++) {
     f1 = fg(start+i*d);
     s += Math.sqrt(d*d+(f1-f0)*(f1-f0));
     f0 = f1;
   }  
   return 'Longueur ='+s.toFixed(4); }]);
brdac.update();   

</script>


Grapheur (tangente, dérivée)

<form style="width:100%;margin:auto;padding:10px;text-align:center;">
<input type="text" id="input" value="sin(x)*x">
<input type="button" value="Tracer" onClick="plotter()">
<input type="button" value="Effacer" onClick="clearAll()">
<input type="button" value="Tangente" onClick="addTangent()">
<input type="button" value="Dérivée" onClick="addDerivative()">
</form>
<div id='jxgboxpl' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false});
var f, curve; // global objects
function plotter() {
var txtraw = document.getElementById('input').value;
f = board.jc.snippet(txtraw, true, 'x', true);
curve = board.create('functiongraph',[f,
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
return c.usrCoords[1];
},
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
return c.usrCoords[1];
}
],{name:txtraw, withLabel:true});
var q = board.create('glider', [2, 1, curve], {withLabel:false});
var t = board.create('text', [
function(){ return q.X()+0.1; },
function(){ return q.Y()+0.1; },
function(){ return "f '(" + q.X().toFixed(2) + ")=" + (JXG.Math.Numerics.D(f))(q.X()).toFixed(2); }
],
{fontSize:15});
}
function clearAll() {
JXG.JSXGraph.freeBoard(board);
board = JXG.JSXGraph.initBoard('jxgboxpl', {boundingbox:[-5,8,8,-5], axis:true, showCopyright:false});
f = null;
curve = null;
}
function addTangent() {
if (JXG.isFunction(f)) {
board.suspendUpdate();
var p = board.create('glider',[1,0,curve], {name:'drag me'});
board.create('tangent',[p], {name:'drag me'});
board.unsuspendUpdate();
}
}
function addDerivative() {
if (JXG.isFunction(f)) {
board.create('functiongraph',[JXG.Math.Numerics.D(f),
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
return c.usrCoords[1];
},
function(){
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
return c.usrCoords[1];
}], {dash:2});
}
}
</script>

Méthode des rectangles/trapèzes

Riemann sum type:
<form style="width:100%;margin:auto;padding:10px;text-align:center;">Riemann sum type: <select id="sumtype" onChange="brd.update()">
<option value='left' selected> left
<option value='right'> right
<option value='middle'> middle
<option value='trapezoidal'> trapezoidal
<option value='simpson'> simpson
<option value='lower'> lower
<option value='upper'> upper
</select>
</form>
<div id='boxrecta' class='jxgbox' style='width:800px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta', {axis:true, boundingbox:[-2,40,8,-5], showCopyright:false});
var s11 = brdre.create('slider',[[-1,30],[2,30],[3,50,500]],{name:'n',snapWidth:1});
var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,0,0]],{name:'start'});
var br = brdre.create('slider',[[-1,10],[2,10],[0,6,10]],{name:'end'});
var fo = function(x){ return x*x; };
var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]);
var os = brdre.create('riemannsum',[fo,
function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;},
function(){return a11.Value();},
function(){return br.Value();}
],
{fillColor:'#ffff00', fillOpacity:0.3});
brdre.create('text',
[1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]);
</script>

Approximation de l'aire du disque

<div id='jxgboxdi' class='jxgbox' style='width:809px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var board3 = JXG.JSXGraph.initBoard('jxgboxdi', {boundingbox:[-1.5,2,8,-3], keepaspectratio:true, axis:true, showCopyright:false});
var N = board3.createElement('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
var circ = board3.createElement('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2, fillColor:'#0055ff', fillOpacity:0.3});
var c = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});
c.updateDataArray = function() {
var r = 1, n = Math.floor(N.Value()),
x = [0], y = [0],
phi = Math.PI/n,
h = r*Math.cos(phi),
s = r*Math.sin(phi),
i, j,
px = 0, py = 0, sgn = 1,
d = 16,
dt = phi/d,
pt;
for (i=0;i<n;i++) {
for (j=-d;j<=d;j++) {
pt = dt*j;
x.push(px+r*Math.sin(pt));
y.push(sgn*r*Math.cos(pt)-(sgn-1)*h*0.5);
}
px += s;
sgn *= (-1);
}
x.push((n-1)*s);
y.push(h+(sgn-1)*h*0.5);
this.dataX = x;
this.dataY = y;
}
var c2 = board3.createElement('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});
c2.updateDataArray = function() {
var r = 1, n = Math.floor(N.Value()),
px = circ.midpoint.X(), py = circ.midpoint.Y(),
x = [px], y = [py],
phi = Math.PI/n,
s = r*Math.sin(phi),
i, j,
d = 16,
dt = phi/d,
pt = Math.PI*0.5+phi;
for (i=0;i<n;i++) {
for (j=-d;j<=d;j++) {
x.push(px+r*Math.cos(pt));
y.push(py+r*Math.sin(pt));
pt -= dt;
}
x.push(px);
y.push(py);
pt += dt;
}
this.dataX = x;
this.dataY = y;
}
board3.update();
</script>

Puissance de x

<div id='boxp' class='jxgbox' style='width:650px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brd1 = JXG.JSXGraph.initBoard('boxp', {axis:true, boundingbox:[-0.25,1.7,1.25,-0.5], showCopyright:false});
brd1.suspendUpdate();
var n = brd1.create('slider',[[0.1,1.5],[1.1,1.5],[1,1,100]],{name:'n',snapWidth:1});
var fu = function(x){ return Math.pow(x,n.Value()); }
var plot = brd1.create('functiongraph',[fu,0,1], {strokeWidth:2});
brd1.createElement('text',[0.2,0.7,function(){return 'f'+Math.floor(n.Value())+'(x)=x'+Math.floor(n.Value())+'';}],
{fontSize:20});
brd1.unsuspendUpdate();
</script>

Série entière du sinus

<div id='jxgbox1s' class='jxgbox' style='width:700px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var board1s = JXG.JSXGraph.initBoard('jxgbox1s', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false});
board1s.suspendUpdate();
board1s.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"});
var s1 = board1s.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1});
board1s.create('functiongraph', [
function(t) {
var val = 0, i, sv = s1.Value()+1;
for(i = 0; i < sv; i++) {
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
}
return val;
},
-10, 10], {strokeColor: "#bb0000"});
board1s.unsuspendUpdate();
</script>

Série entière du cosinus

<div id='jxgbox2c' class='jxgbox' style='width:700px; height:300px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
board2c = JXG.JSXGraph.initBoard('jxgbox2c', {axis:true, boundingbox: [-6, 3, 8, -3], showCopyright:false});
board2c.suspendUpdate();
board2c.create('functiongraph', [function(t){ return Math.cos(t); }, -10, 10],{strokeColor: "#cccccc"});
var s2c = board2c.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'T',snapWidth:1});
board2c.create('functiongraph', [
function(t) {
var val = 0, i, sv = s2c.Value()+1;
for(i = 0; i < sv; i++) {
val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / JXG.Math.factorial(2*i);
}
return val;
},
-10, 10],{strokeColor: "#009900"});
board2c.unsuspendUpdate();
</script>

Série entière de l'exponentielle

<div id='jxgbox1e' class='jxgbox' style='width:600px; height:400px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
board1e = JXG.JSXGraph.initBoard('jxgbox1e', {boundingbox: [-6, 25, 6, -15], axis: true, showCopyright:false});
board1e.suspendUpdate();
board1e.create('functiongraph',
[function(t){ return Math.exp(t); },-10, 10],
{strokeColor: "#cccccc"});
var se = board1e.create('slider', [[0.75,-2],[5,-2.0],[0,0,15]], {name:'S',snapWidth:1});
board1e.create('text',[-4,10, function() {
return 'n='+se.Value();
}
]);
board1e.create('text',[-4,8, function() {
var val = 0, i, sv = se.Value()+1;
for(i = 0; i < sv; i++) {
val+= 1.0/JXG.Math.factorial(i);
}
return 'e~'+(val).toFixed(10);
}
]);
board1e.create('functiongraph', [
function(t) {
var val = 0, i, sv = se.Value()+1;
for(i = 0; i < sv; i++) {
val+= Math.pow(t,i)/JXG.Math.factorial(i);
}
return val;
},
-10, 10], {strokeColor: "#bb0000", curveType:'plot'});
board1e.unsuspendUpdate();
</script>

Régression

<div id='jxgboxr' class='jxgbox' style='width:700px; height:500px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
brdr = JXG.JSXGraph.initBoard('jxgboxr', {boundingbox:[-2, 100, 220, -70], grid: false, axis:true, showCopyright:false});
brdr.suspendUpdate();
deg = brdr.create('slider',[[10,90],[100,90],[1,1,10]],{name:'degree',snapWidth:1});
sr = brdr.create('slider',[[10,70],[100,70],[0,1,3]],{name:'scale'});
pointlist = [];
for (i=0; i<30;i++) {
pointlist.push(brdr.create('point', [function() { return 200*Math.random(); }, function() { return sr.Value()*30*Math.random()+20;}], { style:4, strokecolor:"#0000a0", name:" "}));
}
brdr.unsuspendUpdate();
regression = JXG.Math.Numerics.regressionPolynomial(deg,pointlist);
reg = brdr.create('functiongraph',[regression],{strokeColor:'green'});
tr = brdr.create('text',[20,-40,
function(){ return "r(x) = " + regression.getTerm();}
],
{strokeColor:'black',fontSize:'14px'});
</script>

Fonction tangente

<div id='boxtan' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div>
<script type='text/javascript'>
var board17 = JXG.JSXGraph.initBoard('boxtan', {boundingbox: [-4, 5, 10, -5], axis: false,showCopyright:false,grid: false,showNavigation:false});
board17.suspendUpdate();
var xaxis = board17.create('axis',
[ [0,0],[1,0] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
var yaxis = board17.create('axis',
[ [0,0],[0,1] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
yaxis.removeAllTicks();
board17.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,});
board17.create('ticks', [yaxis, 4], {strokeColor: 'black', strokeWidth: 1});
for (i=-5;i<7;i++) {
board17.create('segment',[ [0.5*i*Math.PI,-5], [0.5*i*Math.PI,5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true,dash:1});
}
board17.create('text', [1.4, -0.5, 'π/2'],{fixed:true});
board17.create('text', [3.1, -0.5, 'π'],{fixed:true});
board17.create('text', [4.3, -0.5, '3π/2'],{fixed:true});
board17.create('text', [6.2, -0.5, '2π'],{fixed:true});
board17.create('text', [-1.8, -0.5, '-π/2'],{fixed:true});
board17.create('text', [-3.3, -0.5, '-π'],{fixed:true});
board17.create('text', [7.5, -0.5, '5π/2'],{fixed:true});
board17.create('text', [-6.5, -0.5, '-2π'],{fixed:true});
var fsin = function(x){ return Math.tan(x); }
var plot = board17.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'});
board17.create('text', [-2.5, -4.5, '$y=\\\\tan(x)$'],{fixed:true,strokeColor:'red'});
</script>

Cercle trigo

<div id='boxcercleprime' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div>
<script type='text/javascript'>
var board14 = JXG.JSXGraph.initBoard('boxcercleprime', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
board14.suspendUpdate();
var b1c1 = board14.create('circle', [[0,0], [1,0]]);
var b1p1 = board14.create('point', [2, 0], {slideObject: b1c1,name:'M'});
var seg = board14.create('segment', [b1p1, [0,0] ] );
var segcos = board14.create('segment', [b1p1, ["X(M)",0] ],{strokeWidth:1,dash:1,color:'black'} );
var segsin = board14.create('segment', [b1p1, [0,"Y(M)"] ],{strokeWidth:1,dash:1,color:'black'} );
var p1 = board14.create('point', [0, 0], {name:'p1',visible:false});
var p2 = board14.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false});
var l = "X(M)";
var s = "Y(M)";
var r = "X(p2)*X(p2)";
var ct = board14.create('point',[l,0],{name:'cos(t)'});
var st = board14.create('point',[0,s],{name:'sin(t)'});
var p3 = board14.create('point',[0.3,0],{name:'p3',visible:false});
board14.create('text',["X(M)/3","Y(M)/3",'t']);
board14.create('arc',[p1, p3, p2],{});
board14.unsuspendUpdate();
</script>

Cercle trigo (2)



<div id='boxcercle1' class='jxgbox' style='width:400px; height:400px;margin:auto;margin-top:20px;display:inline-block;'></div>
<script type='text/javascript'>
var board1 = JXG.JSXGraph.initBoard('boxcercle1', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
board1.suspendUpdate();
var b1c11 = board1.create('circle', [[0,0], [1,0]]);
var b1p11 = board1.create('point', [2, 0], {slideObject: b1c11,name:'M'});
var seg = board1.create('segment', [b1p11, [0,0] ] );
var perp1 = board1.create('segment', [b1p11, ["X(M)",0] ],{strokeWidth:1,dash:1,color:'black'} );
var perp2 = board1.create('segment', [b1p11, [0,"Y(M)"] ],{strokeWidth:1,dash:1,color:'black'} );
//var perp21 = board1.create('perpendicular',[board1.defaultAxes.y,b1p11],[{strokeColor: '#0000ff', visible: true}, {visible: true}]);
var f1 = function(x){ return x; }
var plot = board1.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1});
var f2 = function(x){ return -x; }
var plot = board1.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1});
var f3 = function(x){ return 0.57735*x; }
var plot = board1.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1});
var f4 = function(x){ return -0.57735*x; }
var plot = board1.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1});
var f5 = function(x){ return 1.73205*x; }
var plot = board1.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1});
var f6 = function(x){ return -1.73205*x; }
var plot = board1.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1});
t1 = board1.create('text', [1, 0.5, 'π/6'],{fixed:true});
t2 = board1.create('text', [0.9, 0.8, 'π/4'],{fixed:true});
t3 = board1.create('text', [0.64, 1, 'π/3'],{fixed:true});
t4 = board1.create('text', [0.05, 1.1, 'π/2'],{fixed:true});
t5 = board1.create('text', [-0.5, 1, '2π/3'],{fixed:true});
t6 = board1.create('text', [-0.8, 0.85, '3π/4'],{fixed:true});
t7 = board1.create('text', [-1.2, 0.55, '5π/6'],{fixed:true});
t8 = board1.create('text', [-1.1, 0.05, 'π'],{fixed:true});
t9 = board1.create('text', [1, -0.5, '11π/6'],{fixed:true});
t10 = board1.create('text', [0.9, -0.8, '7π/4'],{fixed:true});
t11 = board1.create('text', [0.64, -1, '5π/3'],{fixed:true});
t12 = board1.create('text', [0.05, -1.2, 'π/2'],{fixed:true});
t13 = board1.create('text', [-0.5, -1, '4π/3'],{fixed:true});
t14 = board1.create('text', [-0.8, -0.85, '5π/4'],{fixed:true});
t15 = board1.create('text', [-1.2, -0.55, '7π/6'],{fixed:true});

pa1 = board1.create('segment',[[0.867, -0.04],[0.867, 0.04]]);
t16 = board1.create('text', [0.80, -0.1, function (){ return '$\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
pa2 = board1.create('segment',[[0.707, -0.04],[0.707, 0.04]]);
t17 = board1.create('text', [0.61, -0.1, function (){ return '$\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
pa3 = board1.create('segment',[[0.5, -0.04],[0.5, 0.04]]);

pa4 = board1.create('segment',[[-0.867, -0.04],[-0.867, 0.04]]);
t18 = board1.create('text', [-0.97, -0.1, function (){ return '$-\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
pa5 = board1.create('segment',[[-0.707, -0.04],[-0.707, 0.04]]);
t19 = board1.create('text', [-0.82, -0.1, function (){ return '$-\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
pa6 = board1.create('segment',[[-0.5, -0.04],[-0.5, 0.04]]);

pa7 = board1.create('segment',[[-0.04,0.867],[0.04,0.867]]);
t20 = board1.create('text', [-0.2,0.92, function (){ return '$\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
pa8 = board1.create('segment',[[0.04,0.707],[-0.04,0.707]]);
t21 = board1.create('text', [-0.2,0.72, function (){ return '$\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
pa9 = board1.create('segment',[[-0.04,0.5],[0.04,0.5]]);

pa10 = board1.create('segment',[[-0.04,-0.867],[0.04,-0.867]]);
t22 = board1.create('text', [-0.25,-0.83, function (){ return '$-\\dfrac{\\sqrt{3}}{2}$';}],{fixed:true,fontSize:9});
pa11 = board1.create('segment',[[-0.04,-0.707],[0.04,-0.707]]);
t23 = board1.create('text', [-0.25,-0.64, function (){ return '$-\\dfrac{\\sqrt{2}}{2}$';}],{fixed:true,fontSize:9});
pa12 = board1.create('segment',[[-0.04,-0.5],[0.04,-0.5]]);

board1.unsuspendUpdate();


</script>





Sinus/cosinus

<div id='boxdeph' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div>
<script type='text/javascript'>
var board9 = JXG.JSXGraph.initBoard('boxdeph', {boundingbox: [-4, 1.33, 10, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false});
board9.suspendUpdate();
var xaxis = board9.create('axis',
[ [0,0],[1,0] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
var yaxis = board9.create('axis',
[ [0,0],[0,1] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
yaxis.removeAllTicks();
board9.create('ticks', [xaxis, Math.PI], {strokeColor: 'black', strokeWidth: 2,});
board9.create('ticks', [yaxis, 0.5], {strokeColor: 'black', strokeWidth: 2});
for (i=-5;i<7;i++) {
board9.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
}
board9.create('segment',[ [-7,0.5], [10,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,-0.5], [10,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,1], [10,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('segment',[ [-7,-1], [10,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board9.create('text', [1.4, -0.08, 'π/2'],{fixed:true});
board9.create('text', [3.1, -0.08, 'π'],{fixed:true});
board9.create('text', [4.5, -0.08, '3π/2'],{fixed:true});
board9.create('text', [6.2, -0.08, '2π'],{fixed:true});
board9.create('text', [-1.8, -0.08, '-π/2'],{fixed:true});
board9.create('text', [-3.1, -0.08, '-π'],{fixed:true});
board9.create('text', [-5.0, -0.08, '-3π/2'],{fixed:true});
board9.create('text', [-6.5, -0.08, '-2π'],{fixed:true});
// sine:
var fsin = function(x){ return Math.sin(x); }
var plot = board9.create('functiongraph',[fsin,-4,10], {strokeWidth:1,strokeColor:'red'});
var fcos = function(x){ return Math.cos(x); }
var plot = board9.create('functiongraph',[fcos,-4,10], {strokeWidth:1,strokeColor:'blue'});
board9.create('arrow', [ [6.2,1.1] , [8,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true});
board9.create('arrow', [ [8,1.1] , [6.2,1.1]], {strokeWidth:1,strokeColor:'black',fixed:true});
board9.create('text',[7,1.2,'π/2'],{fixed:true})
board9.create('text', [-2.5, -1.2, '$y=\\\\sin(x)$'],{fixed:true,strokeColor:'red'});
board9.create('text', [3.5, -1.2, '$y=\\\\cos(x)$'],{fixed:true,strokeColor:'blue'});
</script>

Cercle trigo/opposé

<div id='boxparite' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;'></div>
<script type='text/javascript'>
var board6 = JXG.JSXGraph.initBoard('boxparite', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showNavigation:false,showCopyright:false});
board6.suspendUpdate();
var c1 = board6.create('circle', [[0,0], [1,0]]);
var pt1 = board6.create('point', [2, 0], {slideObject: c1,name:'M'});
var pt2 = board6.create('point', ["X(M)", "-Y(M)"], {name:'N'});
var perp1 = board6.create('perpendicular', [board6.defaultAxes.x,pt1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
var perp2 = board6.create('perpendicular',[board6.defaultAxes.y,pt1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
var perp3 = board6.create('perpendicular',[board6.defaultAxes.y,pt2],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
board6.create('segment', [pt1, [0,0] ] );
board6.create('segment', [pt2, [0,0] ] );
var p1 = board6.create('point', [0, 0], {name:'p1',visible:false});
var p2 = board6.create('point',["X(M)/3","Y(M)/3"],{name:'p2',visible:false});
var p3 = board6.create('point',[0.3,0],{name:'p3',visible:false});
var p4 = board6.create('point',["X(N)/3","Y(N)/3"],{name:'p4',visible:false});
board6.create('text',["X(M)/3","Y(M)/3",'t'],{anchorX:'left',anchorY:'top'});
board6.create('arc',[p1, p3, p2],{});
board6.create('text',["X(N)/3","Y(N)/3",'-t'],{anchorX:'left',anchorY:'bottom'});
board6.create('arc',[p1, p4, p3],{});
board6.unsuspendUpdate();
</script>

Construction courbe sinus

<div style="width:100%;text-align:center;">
<div id='boxcercle2sin' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div>
<script type='text/javascript'>
var board3 = JXG.JSXGraph.initBoard('boxcercle2sin', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
board3.suspendUpdate();
var b1c1 = board3.create('circle', [[0,0], [1,0]]);
var b1p12 = board3.create('point', [2, 0], {slideObject: b1c1,name:'A'});
var seg = board3.create('segment', [b1p12, [0,0] ] );
var perp1 = board3.create('segment', [b1p12, ["X(A)",0] ],{strokeWidth:1,dash:1,color:'black'} );
var f1 = function(x){ return x; }
var plot = board3.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1});
var f2 = function(x){ return -x; }
var plot = board3.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1});
var f3 = function(x){ return 0.57735*x; }
var plot = board3.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1});
var f4 = function(x){ return -0.57735*x; }
var plot = board3.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1});
var f5 = function(x){ return 1.73205*x; }
var plot = board3.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1});
var f6 = function(x){ return -1.73205*x; }
var plot = board3.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1});
t1 = board3.create('text', [1, 0.5, 'π/6'],{fixed:true});
t2 = board3.create('text', [0.9, 0.8, 'π/4'],{fixed:true});
t3 = board3.create('text', [0.64, 1, 'π/3'],{fixed:true});
t4 = board3.create('text', [0.05, 1.1, 'π/2'],{fixed:true});
t5 = board3.create('text', [-0.5, 1, '2π/3'],{fixed:true});
t6 = board3.create('text', [-0.8, 0.85, '3π/4'],{fixed:true});
t7 = board3.create('text', [-1.2, 0.55, '5π/6'],{fixed:true});
t8 = board3.create('text', [-1.1, 0.05, 'π'],{fixed:true});
t9 = board3.create('text', [1, -0.5, '11π/6'],{fixed:true});
t10 = board3.create('text', [0.9, -0.8, '7π/4'],{fixed:true});
t11 = board3.create('text', [0.64, -1, '5π/3'],{fixed:true});
t12 = board3.create('text', [0.05, -1.2, 'π/2'],{fixed:true});
t13 = board3.create('text', [-0.5, -1, '4π/3'],{fixed:true});
t14 = board3.create('text', [-0.8, -0.85, '5π/4'],{fixed:true});
t15 = board3.create('text', [-1.2, -0.55, '7π/6'],{fixed:true});
board3.unsuspendUpdate();
// Animation
var animated = false;
function animate(point, direction, count) {
if(animated) {
point.stopAnimation();
animated = false;
} else {
point.startAnimation(direction, count);
animated = true;
}
}
</script>
<div id='boxsin22' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div>
<script type='text/javascript'>
var board4 = JXG.JSXGraph.initBoard('boxsin22', {boundingbox: [-1, 1.33, 7, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false});
board4.suspendUpdate();
var xaxis = board4.create('axis',
[ [0,0],[1,0] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
var yaxis = board4.create('axis',
[ [0,0],[0,1] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
yaxis.removeAllTicks();
board4.create('ticks', [xaxis, Math.PI*0.5], {strokeColor: 'green', strokeWidth: 2,});
board4.create('ticks', [yaxis, 0.5], {strokeColor: 'green', strokeWidth: 2});
for (i=1;i<5;i++) {
board4.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
}
board4.create('segment',[ [-1,0.5], [7,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,-0.5], [7,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,1], [7,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,-1], [7,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('text', [1.4, -0.08, 'π/2'],{fixed:true});
board4.create('text', [3.1, -0.08, 'π'],{fixed:true});
board4.create('text', [4.5, -0.08, '3π/2'],{fixed:true});
board4.create('text', [6.2, -0.08, '2π'],{fixed:true});
var b2p1 = board4.create('point', [
function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p12); },
function() { return b1p12.Y() }],
{fixed: true, trace: true, color: '#ff0000', name: 'S',size:0.5});
b1p12.addChild(b2p1);
board4.unsuspendUpdate();
board3.addChild(board4);
</script>
</div>

Construction courbe cosinus

<div style="width:100%;text-align:center;">
<div id='boxcercle2cos' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div>
<script type='text/javascript'>
var board3 = JXG.JSXGraph.initBoard('boxcercle2cos', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true,showCopyright:false,showNavigation:false});
board3.suspendUpdate();
var b1c1 = board3.create('circle', [[0,0], [1,0]]);
var b1p12 = board3.create('point', [2, 0], {slideObject: b1c1,name:'A'});
var seg = board3.create('segment', [b1p12, [0,0] ] );
var perp1 = board3.create('segment', [b1p12, ["X(A)",0] ],{strokeWidth:1,dash:1,color:'black'} );
var f1 = function(x){ return x; }
var plot = board3.create('functiongraph',[f1,-1.5,1.5], {strokeWidth:1,dash:1});
var f2 = function(x){ return -x; }
var plot = board3.create('functiongraph',[f2,-1.5,1.5], {strokeWidth:1,dash:1});
var f3 = function(x){ return 0.57735*x; }
var plot = board3.create('functiongraph',[f3,-1.5,1.5], {strokeWidth:1,dash:1});
var f4 = function(x){ return -0.57735*x; }
var plot = board3.create('functiongraph',[f4,-1.5,1.5], {strokeWidth:1,dash:1});
var f5 = function(x){ return 1.73205*x; }
var plot = board3.create('functiongraph',[f5,-1.5,1.5], {strokeWidth:1,dash:1});
var f6 = function(x){ return -1.73205*x; }
var plot = board3.create('functiongraph',[f6,-1.5,1.5], {strokeWidth:1,dash:1});
t1 = board3.create('text', [1, 0.5, 'π/6'],{fixed:true});
t2 = board3.create('text', [0.9, 0.8, 'π/4'],{fixed:true});
t3 = board3.create('text', [0.64, 1, 'π/3'],{fixed:true});
t4 = board3.create('text', [0.05, 1.1, 'π/2'],{fixed:true});
t5 = board3.create('text', [-0.5, 1, '2π/3'],{fixed:true});
t6 = board3.create('text', [-0.8, 0.85, '3π/4'],{fixed:true});
t7 = board3.create('text', [-1.2, 0.55, '5π/6'],{fixed:true});
t8 = board3.create('text', [-1.1, 0.05, 'π'],{fixed:true});
t9 = board3.create('text', [1, -0.5, '11π/6'],{fixed:true});
t10 = board3.create('text', [0.9, -0.8, '7π/4'],{fixed:true});
t11 = board3.create('text', [0.64, -1, '5π/3'],{fixed:true});
t12 = board3.create('text', [0.05, -1.2, 'π/2'],{fixed:true});
t13 = board3.create('text', [-0.5, -1, '4π/3'],{fixed:true});
t14 = board3.create('text', [-0.8, -0.85, '5π/4'],{fixed:true});
t15 = board3.create('text', [-1.2, -0.55, '7π/6'],{fixed:true});
board3.unsuspendUpdate();
// Animation
var animated = false;
function animate(point, direction, count) {
if(animated) {
point.stopAnimation();
animated = false;
} else {
point.startAnimation(direction, count);
animated = true;
}
}
</script>
<div id='boxcos22' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-top:20px;display:inline-block;'></div>
<script type='text/javascript'>
var board4 = JXG.JSXGraph.initBoard('boxcos22', {boundingbox: [-1, 1.33, 7, -1.33], axis: false,showCopyright:false,grid: false,showNavigation:false});
board4.suspendUpdate();
var xaxis = board4.create('axis',
[ [0,0],[1,0] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
var yaxis = board4.create('axis',
[ [0,0],[0,1] ], {
label: {offset: [7, -10]}, // Doesn't do anything here.
drawZero:false // Doesn't do anything here.
}
);
xaxis.removeAllTicks();
yaxis.removeAllTicks();
board4.create('ticks', [xaxis, Math.PI*0.5], {strokeColor: 'green', strokeWidth: 2,});
board4.create('ticks', [yaxis, 0.5], {strokeColor: 'green', strokeWidth: 2});
for (i=1;i<5;i++) {
board4.create('segment',[ [0.5*i*Math.PI,-1.5], [0.5*i*Math.PI,1.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
}
board4.create('segment',[ [-1,0.5], [7,.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,-0.5], [7,-.5]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,1], [7,1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('segment',[ [-1,-1], [7,-1]], {strokeColor: 'lightgray', strokeWidth: 1,fixed:true});
board4.create('text', [1.4, -0.08, 'π/2'],{fixed:true});
board4.create('text', [3.1, -0.08, 'π'],{fixed:true});
board4.create('text', [4.5, -0.08, '3π/2'],{fixed:true});
board4.create('text', [6.2, -0.08, '2π'],{fixed:true});
var b2p1 = board4.create('point', [
function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p12); },
function() { return b1p12.X() }],
{fixed: true, trace: true, color: '#ff0000', name: 'C',size:0.5});
b1p12.addChild(b2p1);
board4.unsuspendUpdate();
board3.addChild(board4);
</script>
</div>

Aire sous une courbe

<div id="d45d7188" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:20px;"></div>
<script type="text/javascript">
(function(){
var intex1_board = JXG.JSXGraph.initBoard('d45d7188', {boundingbox: [-5, 5, 5, -1.01], showcopyright: false, axes:false, shownavigation: false,grid:true});
var absAxe = intex1_board.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = intex1_board.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }]);
var intex1_i1 = intex1_board.create('integral', [[-2.0, 2.0], intex1_c1],{withLabel: false,fixed:true});
intex1_i1.curveLeft.setProperty({visible:false});
intex1_i1.curveRight.setProperty({visible:false});
var pa = intex1_board.create('point',[function (){ return intex1_i1.baseLeft.X() },0],{name:'a',size:3});
var pb = intex1_board.create('point',[function (){ return intex1_i1.baseRight.X() },0],{name:'b',size:3});
})();
</script>

Méthode des rectangles

Type de rectangles
<form style="width:100%;margin:auto;padding:10px;text-align:center;">Type de rectangles <select id="sumtype" onChange="brd.update()"> <option value='lower'> inférieurs <option value='upper'> supérieurs </select> </form>
<div id='boxrecta1' class='jxgbox' style='width:370px; height:400px;margin:auto;margin-top:10px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1', {axis:false, boundingbox:[-5,5,5,-1], showCopyright:false, shownavigation: false,grid:true});
var absAxe = brdre.create('arrow',[ [-5,0],[5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = brdre.create('arrow',[ [0,-1],[0,5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = brdre.create('functiongraph', [function (t) { return Math.exp(t)*0.3+1; }],{strokeWidth:2});
var l1 = brdre.create('line', [[-2,-1], [-2, 5]],{dash:2,strokeWidth:0.5,fixed:true});
var l2 = brdre.create('line', [[2,-1], [2, 5]],{dash:2,strokeWidth:0.5,fixed:true});
var s11 = brdre.create('slider',[[-4,-0.5],[1,-0.5],[1,3,100]],{name:'n',snapWidth:1});
var a11 = brdre.create('slider',[[-1,20],[2,20],[-10,-2,0]],{name:'start'});
var br = brdre.create('slider',[[-1,10],[2,10],[0,2,10]],{name:'end'});
var fo = function(x){ return Math.exp(x)*0.3+1; };
var plot1 = brdre.create('functiongraph',[fo,function(){return a11.Value();}, function(){return br.Value();}]);
var os = brdre.create('riemannsum',[fo,
function(){ return s11.Value();}, function(){ return document.getElementById('sumtype').value;},
function(){return a11.Value();},
function(){return br.Value();}
],
{fillColor:'#ffff00', fillOpacity:0.3});
brdre.create('text',
[1,35,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(fo,s11.Value(),document.getElementById('sumtype').value,a11.Value(),br.Value())).toFixed(4); }]);
</script>

Unité d'aire

<div id='jxgboxq1' class='jxgbox' style='width:350px; height:200px;margin:auto;margin-top:20px;margin-bottom:20px;'></div>
<script type='text/javascript'>
var brdq = JXG.JSXGraph.initBoard('jxgboxq1', {boundingbox:[-1,2,5,-1], axis:true, unitX: 50, unitY: 25,showCopyright:false,showNavigation:false,grid:true});
var p1 = brdq.create('point',[0,0],{visible:false,fixed:true});
var p2 = brdq.create('point',[3,0],{visible:false,fixed:true});
var p3 = brdq.create('point',[3,2],{visible:false,fixed:true});
var p4 = brdq.create('point',[0,2],{visible:false,fixed:true});
var pol = brdq.create('polygon',[ p1,p2,p3,p4 ],{
withLines:true,
vertices:false,
withLabel: false,
fixed:true,
label: {offset:[-200,100]}
}); </script>

Signe des aires

<div id="ddf4528" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:20px;"></div>
<script type="text/javascript">
var intex3_board = JXG.JSXGraph.initBoard('ddf4528', {boundingbox: [-2, 2.5, 4, -0.5], showcopyright: false, axes:false, shownavigation: false,grid:true});
var absAxe = intex3_board.create('arrow',[ [-2,0],[4,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex3_board.create('arrow',[ [0,-1],[0,2.5] ], {strokeColor: 'black',fixed:true});
var intex3_c1 = intex3_board.create('functiongraph', [function (t) { return (t-3)*(t-1)*(t+1)*0.4+0.8; }]);
var intex3_i1 = intex3_board.create('integral', [[-1.0, 1.55], intex3_c1],{withLabel: false,fixed:true,fillColor:'blue'});
intex3_i1.curveLeft.setProperty({visible:false});
intex3_i1.curveRight.setProperty({visible:false});
var intex3_i2 = intex3_board.create('integral', [[1.55, 2.67], intex3_c1],{withLabel: false,fixed:true,fillColor:'red'});
intex3_i2.curveLeft.setProperty({visible:false});
intex3_i2.curveRight.setProperty({visible:false});
var intex3_i3 = intex3_board.create('integral', [[2.67,3.2], intex3_c1],{withLabel: false,fixed:true,fillColor:'blue'});
intex3_i3.curveLeft.setProperty({visible:false});
intex3_i3.curveRight.setProperty({visible:false});
var pa = intex3_board.create('point',[function (){ return intex3_i1.baseLeft.X() },0],{name:'a',size:3});
var pb = intex3_board.create('point',[function (){ return intex3_i3.baseRight.X() },0],{name:'b',size:3});
var t1 = intex3_board.create('text', [-0.3, 0.5 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">+</div>']);
var t2 = intex3_board.create('text', [2.8, 0.5 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">+</div>']);
var t3 = intex3_board.create('text', [1.9, -0.2 , '<div style="border:solid 1px black;padding:10px;padding-top:5px;padding-bottom:5px;border-radius:10px;background-color:rgba(255,255,255,0.6);font-size:120%;font-weight:bold;box-shadow:3px 3px 5px #303030;">-</div>']);
</script>

Comparaison d'aires

<div id='box11' class='jxgbox' style='width:250px; height:250px;margin:auto;margin-bottom:20px;margin-top:20px;'></div>
<script type='text/javascript'>
brd24210 = JXG.JSXGraph.initBoard('box11', {boundingbox: [-0.1, 4.3, 6.5, -1.5], axis: false, showCopyright:false, shownavigation: false,grid:false});
var absAxe = brd24210.create('arrow',[ [-2,0],[6.5,0] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var l8 = brd24210.create('line',[ [1,0.8],[1.9,1.361] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l9 = brd24210.create('line',[ [1,0.4],[5,3.3] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l10 = brd24210.create('line',[ [1,0],[5,3.0] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l11 = brd24210.create('line',[ [1.5,0],[5,2.6] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l12 = brd24210.create('line',[ [2,0],[5,2.2] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l13 = brd24210.create('line',[ [2.5,0],[5,1.8] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l14 = brd24210.create('line',[ [3,0],[5,1.4] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l15 = brd24210.create('line',[ [3.5,0],[5,1.0] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l16 = brd24210.create('line',[ [4,0],[5,0.6] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l17 = brd24210.create('line',[ [4.5,0],[5,0.2] ], {strokeColor: '#808080',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var f_c1 = brd24210.create('functiongraph', [function (t) { return 0.1*t*t+1; }]);
var f = brd24210.create('functiongraph', [function (t) { return 1.1; },1,5],{strokeColor:"black"});
var i1 = brd24210.create('integral', [[1, 5], f],{withLabel: false,fixed:true,fillColor:'green'});
var l1 = brd24210.create('line',[ [1,0],[1,1.1] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l2 = brd24210.create('line',[ [5,0],[5,1.1] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:0});
var l3 = brd24210.create('line',[ [5,1.1],[5,3.5] ], {strokeColor: 'black',fixed:true,straightFirst:false, straightLast:false, strokeWidth:1, dash:2});
var l4 = brd24210.create('arrow',[ [1,-0.5],[5,-0.5] ], {strokeColor: 'black',fixed:true, strokeWidth:1});
var l5 = brd24210.create('arrow',[ [5,-0.5],[1,-0.5] ], {strokeColor: 'black',fixed:true, strokeWidth:1});
var t1 = brd24210.create('text', [2.8,-0.7, 'x - a']);
var l6 = brd24210.create('arrow',[ [0.6,0.05],[0.6,1.0] ], {strokeColor: 'black',fixed:true, strokeWidth:1});
var l7 = brd24210.create('arrow',[ [0.6,1.0],[0.6,0.05] ], {strokeColor: 'black',fixed:true, strokeWidth:1});
var t2 = brd24210.create('text', [0,0.5, 'f(a)']);
var pa = brd24210.create('point',[function (){ return i1.baseLeft.X() },0],{name:'a',size:3,fixed:true});
var pb = brd24210.create('point',[function (){ return i1.baseRight.X() },0],{name:'x',size:3,fixed:true});
i1.curveLeft.setProperty({visible:false});
i1.curveRight.setProperty({visible:false});
</script>

Symétrie

<div id='jxgboxqs' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:5px;'></div>
<script type='text/javascript'>
var brdqs = JXG.JSXGraph.initBoard('jxgboxqs', {boundingbox:[-5,5,5,-5], grid:true,axis:true, showCopyright:false,showNavigation:false,pan: { enabled: false} });
brdqs.create('line',[[0,0],[1,1]],{fixed:true});
brdqs.create('point', [2,4],{name:'A'});
brdqs.create('point', ['A.Y()','A.X()']);
</script>

Exp / Ln

<div id='box5622' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type="text/javascript">
board = JXG.JSXGraph.initBoard('box5622',{axis:true,boundingbox:[-4,9,9,-4], showCopyright:false,showNavigation:false,pan: { enabled: false} });
<!--boundingbox:[xmin,ymax,xmax,-ymin]-->
var fexp = board.create('functiongraph', [function(x){return Math.exp(x);},-4,9],{strokeColor:'blue'});
board.create('line',[[0,0],[1,1]],{strokeColor: 'black', strokeWidth: 1.5,fixed:true});
var p1 = board.create('point', [0, 1], {slideObject: fexp,name:'A'});
var p2 = board.create('point',['A.Y()','A.X()'],{name:'A\'',trace: true,size:0.5});
board.create('segment',[p1,p2],{strokeColor: 'gray', strokeWidth: 1});
</script>

Limite LN

<div id='box1293' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type="text/javascript">
board3 = JXG.JSXGraph.initBoard('box1293',{axis:true,boundingbox:[-2,6,7,-2], showCopyright:false,showNavigation:false,pan: { enabled: false} });
<!--boundingbox:[xmin,ymax,xmax,-ymin]-->
board3.create('functiongraph', [function(x){return Math.log(1+x);},-2,7],{strokeColor:'red'});
board3.create('line',[[0,0],[1,1]],{strokeWidth:0.5,fixed:true});
board3.create('text', [1, 2, 'y=x'],{fixed:true});
board3.create('text', [3, 1, 'y=ln(1+x)'],{fixed:true}); </script>

Signe LN

<div id='box1295' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type="text/javascript">
board4 = JXG.JSXGraph.initBoard('box1295',{axis:true,boundingbox:[-1,3,6,-5], showCopyright:false,showNavigation:false,pan: { enabled: false} });
board4.create('functiongraph', [function(x){return Math.log(x);},0,1],{strokeColor:'red',strokeWidth:2});
board4.create('functiongraph', [function(x){return Math.log(x);},1,6],{strokeColor:'blue',strokeWidth:2});
</script>

Graphe suite

<div id='boxrecta1q' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1q', {axis:true, boundingbox:[-1,11,13,-1], showCopyright:false,showNavigation:false,pan: { enabled: false} });
var fo = function(x){ return x+2/(x+1); };
var plot1 = brdre.create('functiongraph',[fo,0, 13],{dash:2});
pointlist = [];
for (i=0; i<11;i++) {
pointlist.push(brdre.create('point', [i, i+2/(i+1)], { style:3, name:" ",fixed:true}));
}
</script>

Suite récurrence

<div id='boxrecta1a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1a', {axis:true, boundingbox:[-0.2,1.2,1.8,-0.2], showCopyright:false,showNavigation:false,pan: { enabled: false} });
var s1 = brdre.create('slider',[[0.2,-0.1],[1.5,-0.1],[0,0,50]],{name:'n',snapWidth:1});
var fo = function(x){ return (3*x+2)/(x+4); };
var plot1 = brdre.create('functiongraph',[fo,-1, 13],{dash:0});
var fi = function(x){return x};
var plot2 = brdre.create('functiongraph',[fi,-1, 13],{dash:0});
var approx = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:2});
approx.updateDataArray = function() {
var i;
var m = s1.Value();
this.dataX = [];
this.dataY = [];
this.dataX[0] = 0.2;
this.dataY[0] = 0;
for (var i=1;i<=m;i++) {
if(i%2==1){
this.dataX.push( this.dataX[i-1] );
this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) );
}
else{
this.dataX.push( this.dataY[i-1] );
this.dataY.push( this.dataY[i-1] );
}
}
this.dataX.push( this.dataX[m] );
this.dataY.push( 0 );
}

var approx2 = brdre.create('curve',[[0],[0]], {strokeColor:'red',dash:0});
approx2.updateDataArray = function() {
var i;
var m = s1.Value();
this.dataX = [];
this.dataY = [];
this.dataX[0] = 0.2;
this.dataY[0] = 0;
for (var i=1;i<=m;i++) {
if(i%2==1){
this.dataX.push( this.dataX[i-1] );
this.dataY.push( (3*this.dataX[i-1]+2)/(this.dataX[i-1]+4) );
}
else{
this.dataX.push( this.dataY[i-1] );
this.dataY.push( this.dataY[i-1] );
}
}
}
var tab = [0.2,0.2,0.619,0.619,0.835,0.835,0.932,0.932,0.972,0.972,0.989,0.989,0.996,0.996,0.998,0.998,0.999,0.999,0.9997,0.9997,0.9998856,
0.9998856,0.999954,0.999954,0.999982,0.999982,0.9999927,0.9999927,0.99999707,0.99999707,0.9999988286,0.9999988286,0.9999995315,0.9999995315,
0.9999998126,0.9999998126,0.999999925,0.999999925,0.99999997,0.99999997,0.999999988,0.999999988,0.9999999952,0.9999999952,0.9999999981,
0.9999999981,0.9999999992,0.9999999992,0.9999999997,0.9999999997,0.9999999999,0.9999999999,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var tab2 = [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18,19,19,20,20,21,21,22,22,23,23,24,24,25,25,26,26,27,27,28,28,29,29,30,30];
var ph = brdre.create('point',[function(){return tab2[s1.Value()];},0],{visible:false});
var ti = brdre.create('point', [function(){return tab[s1.Value()];} ,0],{name:function(){return "u"+ph.X();} } );
brde.update();
</script>

Suite convergente

<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false});
pointlist = [];
for (i=1; i<200;i++) {
pointlist.push(brdre.create('point', [i-1,4*Math.cos(Math.PI*i/4)*Math.pow(i,-1.2)+2 ], { style:1, name:" ",fixed:true,size:0.5}));
}
var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'});
var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'});
brdre.on('move', function(){
aq.moveTo([0, aq.Y()]);
bq.moveTo([0, bq.Y()]);
});
var cq = brdre.create('point', [200, function(){return bq.Y()} ]);
var dq = brdre.create('point', [200, function(){return aq.Y()} ]);
var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false});
</script>

Limite finie fonction

<div id='boxrecta1A' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('boxrecta1A', {axis:true, boundingbox:[-1,9,13,-1], showCopyright:false,showNavigation:false});
var fo = function(x){ return 4*Math.cos(Math.PI*x/4)/(x+1)+2; };
var plot1 = brdre.create('functiongraph',[fo,0, 500],{dash:0,strokeColor:"black" });
brdre.create('line',[[0,2],[500,2]],{fixed:true,dash:2,strokeColor:"red" });
var aq = brdre.create('point', [0, 0.2],{strokeColor:'blue',fillColor:'blue'});
var bq = brdre.create('point', [0, 4],{strokeColor:'blue',fillColor:'blue'});
brdre.on('move', function(){
aq.moveTo([0, aq.Y()]);
bq.moveTo([0, bq.Y()]);
});
var cq = brdre.create('point', [200, function(){return bq.Y()} ]);
var dq = brdre.create('point', [200, function(){return aq.Y()} ]);
var pq = brdre.create('polygon', [aq, bq, cq, dq], {hasInnerPoints: false});
</script>

Théorème des gendarmes

<div id='boxp' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brd1 = JXG.JSXGraph.initBoard('boxp', {axis:true, boundingbox:[-1,5,5,-1], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu = function(x){ return 2+0.6*Math.cos(10*x)/x; }
var plots = brd1.create('functiongraph',[fu,0,10], {strokeWidth:2,strokeColor:'black'});
var fu2 = function(x){ return 2+1/x; }
var plots2 = brd1.create('functiongraph',[fu2,0,10], {strokeWidth:2});
var fu3 = function(x){ return 2-1/x; }
var plots3 = brd1.create('functiongraph',[fu3,0,10], {strokeWidth:2});
var seg1 = brd1.create('line', [[0,2], [2,2] ],{strokeColor:'red',dash:1,fixed:true} );
var t1 = brd1.create('text',[2,1.1,'C'],{strokeColor:'blue'});
var t2 = brd1.create('text',[2.2,0.95,'u'],{strokeColor:'blue',strokeSize:0.5});
var t3 = brd1.create('text',[2,3.0,'C'],{strokeColor:'blue'});
var t4 = brd1.create('text',[2.2,2.95,'v'],{strokeColor:'blue',strokeSize:0.5});
var t5 = brd1.create('text',[-0.5,2.5,'C'],{strokeColor:'black'});
var t6 = brd1.create('text',[-0.3,2.45,'f'],{strokeColor:'black',strokeSize:0.5});
brd1.unsuspendUpdate();
</script>

Partie entière

<div id='boxp2' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = true;
var brd1 = JXG.JSXGraph.initBoard('boxp2', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu21 = function(x){ return Math.floor(x); }
var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'});
for(var i=-5;i<6;i++){
brd1.create('point',[i,i],{name:'',strokeColor:'blue',fillColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i-0.2],[i+1,i+0.2] ],{strokeColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i-0.2],[i+1.1,i-0.2] ],{strokeColor:'blue',fixed:true});
brd1.create('segment',[ [i+1,i+0.2],[i+1.1,i+0.2] ],{strokeColor:'blue',fixed:true});
}
</script>

TVI

<div id='boxp2R' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = false;
var brd1 = JXG.JSXGraph.initBoard('boxp2R', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu21 = function(x){ return (0.1*x+2.7)*Math.cos(x +1); }
var plots1 = brd1.create('functiongraph',[fu21,-5,-4], {strokeWidth:2,strokeColor:'blue'});
var plots2 = brd1.create('functiongraph',[fu21,-4,-3], {strokeWidth:2,strokeColor:'blue'});
var plots3 = brd1.create('functiongraph',[fu21,-3,-2], {strokeWidth:2,strokeColor:'blue'});
var plots4 = brd1.create('functiongraph',[fu21,-2,-1], {strokeWidth:2,strokeColor:'blue'});
var plots5 = brd1.create('functiongraph',[fu21,-1, 0], {strokeWidth:2,strokeColor:'blue'});
var plots6 = brd1.create('functiongraph',[fu21, 0, 1], {strokeWidth:2,strokeColor:'blue'});
var plots7 = brd1.create('functiongraph',[fu21, 1, 2], {strokeWidth:2,strokeColor:'blue'});
var plots8 = brd1.create('functiongraph',[fu21, 2, 3], {strokeWidth:2,strokeColor:'blue'});
var plots9 = brd1.create('functiongraph',[fu21, 3, 4], {strokeWidth:2,strokeColor:'blue'});
var plots10 = brd1.create('functiongraph',[fu21, 4, 5], {strokeWidth:2,strokeColor:'blue'});
var line1 = brd1.create('line',[ [-10,1] , [10,1] ],{strokeColor:'red'});
var t1 = brd1.create('text',[2,function(t){return line1.point1.Y()+0.4;},'y=k'],{strokeColor:'red'});
var i1 = brd1.create('intersection', [line1, plots1, 0],{name:''});
var i2 = brd1.create('intersection', [line1, plots2, 0],{name:''});
var i3 = brd1.create('intersection', [line1, plots3, 0],{name:''});
var i4 = brd1.create('intersection', [line1, plots4, 0],{name:''});
var i5 = brd1.create('intersection', [line1, plots5, 0],{name:''});
var i6 = brd1.create('intersection', [line1, plots6, 0],{name:''});
var i7 = brd1.create('intersection', [line1, plots7, 0],{name:''});
var i8 = brd1.create('intersection', [line1, plots8, 0],{name:''});
var i9 = brd1.create('intersection', [line1, plots9, 0],{name:''});
var i10 = brd1.create('intersection', [line1, plots10, 0],{name:''});

var pt1 = brd1.create('point',[-4,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'a',label: {offset: [-8, -10]}});
var linept1 = brd1.create('segment',[ [-4,-2.3] , [-4,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept2 = brd1.create('segment',[ [-4,-2.3] , [0,-2.3] ],{strokeColor:'green',dash:1,fixed:true});
var pt2 = brd1.create('point',[0,-2.3],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(a)',label: {offset: [-8, -10]}});
var pt3 = brd1.create('point',[4.7,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'b',label: {offset: [-8, -10]}});
var linept3 = brd1.create('segment',[ [4.7,2.8] , [4.7,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept4 = brd1.create('segment',[ [4.7,2.8] , [0,2.8] ],{strokeColor:'green',dash:1,fixed:true});
var pt4 = brd1.create('point',[0,2.8],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(b)',label: {offset: [-8, -10]}});
brd1.unsuspendUpdate();
</script>

TVI bijection

<div id='boxp2R1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = false;
var brd1 = JXG.JSXGraph.initBoard('boxp2R1', {axis:true, boundingbox:[-5,5,5,-5], showCopyright:false,showNavigation:false,pan: { enabled: false}});
brd1.suspendUpdate();
var fu21 = function(x){ return (0.4*x+2.7)*Math.cos(0.1*(x-12) )-1.5; }
var plots1 = brd1.create('functiongraph',[fu21,-5,5], {strokeWidth:2,strokeColor:'blue'});
var line1 = brd1.create('line',[ [-10,1] , [10,1] ],{strokeColor:'red'});
var t1 = brd1.create('text',[2,function(t){return line1.point1.Y()+0.4;},'y=k'],{strokeColor:'red'});
var i1 = brd1.create('intersection', [line1, plots1, 0],{name:''});
var pt1 = brd1.create('point',[-4,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'a',label: {offset: [-8, -10]}});
var linept1 = brd1.create('segment',[ [-4,-1.5] , [-4,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept2 = brd1.create('segment',[ [-4,-1.5] , [0,-1.5] ],{strokeColor:'green',dash:1,fixed:true});
var pt2 = brd1.create('point',[0,-1.5],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(a)',label: {offset: [-8, -10]}});
var pt3 = brd1.create('point',[4.7,0],{strokeColor:'green',fillColor:'green',fixed:true,name:'b',label: {offset: [-8, -10]}});
var linept3 = brd1.create('segment',[ [4.7,1.9] , [4.7,0] ],{strokeColor:'green',dash:1,fixed:true});
var linept4 = brd1.create('segment',[ [4.7,1.9] , [0,1.9] ],{strokeColor:'green',dash:1,fixed:true});
var pt4 = brd1.create('point',[0,1.9],{strokeColor:'green',fillColor:'green',fixed:true,name:'f(b)',label: {offset: [-8, 15]}});
brd1.unsuspendUpdate();
</script>

Histogramme

<div id='boxa1a' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
JXG.Options.axis.ticks.drawLabels = false;
var board = JXG.JSXGraph.initBoard('boxa1a', {boundingbox: [-1, 0.057, 10, -0.005], axis:true,showCopyright:false,showNavigation:false,pan: { enabled: false} } );
board.suspendUpdate();

var aq1 = board.create('point', [1, 0],{visible:false,fixed:true});
var bq1 = board.create('point', [3, 0],{visible:false,fixed:true});
var cq1 = board.create('point', [3, 0.004545454545455 ],{visible:false,fixed:true});
var dq1 = board.create('point', [1, 0.004545454545455 ],{visible:false,fixed:true});
var pq1 = board.create('polygon', [aq1, bq1, cq1, dq1], {borders: {strokeWidth:0},fillColor:'#8E1B77',fillOpacity:0.3,shadow:true });
var aq2 = board.create('point', [3, 0],{visible:false,fixed:true});
var bq2 = board.create('point', [4, 0],{visible:false,fixed:true});
var cq2 = board.create('point', [4, 0.013636363636364 ],{visible:false,fixed:true});
var dq2 = board.create('point', [3, 0.013636363636364 ],{visible:false,fixed:true});
var pq2 = board.create('polygon', [aq2, bq2, cq2, dq2], {borders: {strokeWidth:0},fillColor:'#DA2130',fillOpacity:0.3,shadow:true,fixed:true });
var aq3 = board.create('point', [4, 0],{visible:false,fixed:true});
var bq3 = board.create('point', [5, 0],{visible:false,fixed:true});
var cq3 = board.create('point', [5, 0.018181818181818 ],{visible:false,fixed:true});
var dq3 = board.create('point', [4, 0.018181818181818 ],{visible:false,fixed:true});
var pq3 = board.create('polygon', [aq3, bq3, cq3, dq3], {borders: {strokeWidth:0},fillColor:'#58FA82',fillOpacity:0.3,shadow:true,fixed:true });
var aq4 = board.create('point', [5, 0],{visible:false,fixed:true});
var bq4 = board.create('point', [5.5, 0],{visible:false,fixed:true});
var cq4 = board.create('point', [5.5, 0.054545454545455 ],{visible:false,fixed:true});
var dq4 = board.create('point', [5, 0.054545454545455 ],{visible:false,fixed:true});
var pq4 = board.create('polygon', [aq4, bq4, cq4, dq4], {borders: {strokeWidth:0},fillColor:'#5858FA',fillOpacity:0.3,shadow:true,fixed:true });
var aq5 = board.create('point', [5.5, 0],{visible:false,fixed:true});
var bq5 = board.create('point', [6.5, 0],{visible:false,fixed:true});
var cq5 = board.create('point', [6.5, 0.022727272727273 ],{visible:false,fixed:true});
var dq5 = board.create('point', [5.5, 0.022727272727273 ],{visible:false,fixed:true});
var pq5 = board.create('polygon', [aq5, bq5, cq5, dq5], {borders: {strokeWidth:0},fillColor:'#6E6E6E',fillOpacity:0.3,shadow:true,fixed:true });
var aq6 = board.create('point', [6.5, 0],{visible:false,fixed:true});
var bq6 = board.create('point', [8.5, 0],{visible:false,fixed:true});
var cq6 = board.create('point', [8.5, 0.004545454545455 ],{visible:false,fixed:true});
var dq6 = board.create('point', [6.5, 0.004545454545455 ],{visible:false,fixed:true});
var pq6 = board.create('polygon', [aq6, bq6, cq6, dq6], {borders: {strokeWidth:0},fillColor:'#AEB404',fillOpacity:0.3,shadow:true,fixed:true });
board.create('text',[1.4,-0.0017,'[120;140['],{fixed:true,fontSize:7});
board.create('text',[3.00,-0.0017,'[140;150['],{fixed:true,fontSize:7});
board.create('text',[4.00,-0.0017,'[150;160['],{fixed:true,fontSize:7});
board.create('text',[5.00,-0.0027,'[160;165['],{fixed:true,fontSize:7});
board.create('text',[5.55,-0.0012,'[165;175['],{fixed:true,fontSize:7});
board.create('text',[7.00,-0.0017,'[175;195['],{fixed:true,fontSize:7});
board.create('text',[1.4,0.00555,'0,00455'],{fixed:true,fontSize:7});
board.create('text',[3.00,0.01464,'0,01364'],{fixed:true,fontSize:7});
board.create('text',[4.00,0.01918,'0,01818'],{fixed:true,fontSize:7});
board.create('text',[5.00,0.05555,'0,05455'],{fixed:true,fontSize:7});
board.create('text',[5.55,0.02272,'0,02272'],{fixed:true,fontSize:7});
board.create('text',[7.00,0.00555,'0,00455'],{fixed:true,fontSize:7});
board.unsuspendUpdate();
</script>

Loi normale

<div id="Fd45d7188c" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board2 = JXG.JSXGraph.initBoard('Fd45d7188c', {boundingbox: [110, 1.2, 200, -0.1], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board2.create('arrow',[ [-5,-0.005],[200,-0.005] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var intex1_c1 = intex1_board2.create('functiongraph', [function (x) { return Math.pow(2,(-0.01*((x-160)*(x-160)))); }]);
var pinf2 = intex1_board2.create('point',[153,0],{name:'a'});
var psup2 = intex1_board2.create('point',[172,0],{name:'b'});
intex1_board2.on('move', function(){
pinf2.moveTo([pinf2.X(),0]);
psup2.moveTo([psup2.X(),0]);
});
var intex1_i1 = intex1_board2.create('integral', [[function(){return pinf2.X()},function(){return psup2.X()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'});
intex1_i1.curveLeft.setProperty({visible:false});
intex1_i1.curveRight.setProperty({visible:false});
for(var i=120;i<201;i=i+10){
intex1_board2.create('segment',[ [i,-0.02] , [i,0.02] ],{strokeColor:'black',fixed:true});
intex1_board2.create('text',[i-3,-0.05,i],{fixed:true});
}
</script>

Binomiale

<div id='box12Ax' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script type='text/javascript'>
var brdre = JXG.JSXGraph.initBoard('box12Ax', {axis:true, boundingbox:[-5,0.2,140,-0.05], showCopyright:false,showNavigation:false,pan:{enabled:false}});

for(var k=0;k<200;k=k+50){
brdre.create('text',[k-2,-0.015,k],{fixed:true});
brdre.create('segment',[[k,-0.005],[k,0.005]],{fixed:true,strokeColor:'black'});
}

var n = brdre.create('slider',[[10,0.18],[80,0.18],[1,2,140]], {name:'n',snapWidth:1});
var prob = brdre.create('slider',[[10,0.15],[80,0.15],[0,.5,1]], {name:'p',snapWidth:0.01});
var sc = brdre.create('curve',[[0],[0]],{dash:0,strokeWidth:1,strokeColor:'red'});
sc.updateDataArray = function() {
this.dataX = [];
this.dataY = [];
for (var i=0;i<=n.Value();i++) {
this.dataX.push(i);
this.dataY.push( binomial(n.Value(),i,prob.Value() ));
this.dataX.push(i);
this.dataY.push( 0 );
}
}
function binomial(n, k, p) {
var coeff = 1;
for (var x = n - k + 1; x < n+1; x++) {
coeff *= x;
}
for (x = 1; x < k+1; x++) {
coeff /= x;
}
var p1=1;
var p2=1;

for (x=0; x < k; x++) {
p1=p1*p;
}

for (x=0; x < n-k; x++) {
p2=p2*(1-p);
}
return coeff*p1*p2;
}
</script>

Loi normale centrée réduite

<div id="d4boxF" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board00 = JXG.JSXGraph.initBoard('d4boxF', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board00.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board00.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = intex1_board00.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]);
var pinfA = intex1_board00.create('point',[-1.2,0],{name:'a'});
var psupA = intex1_board00.create('point',[1,0],{name:'b'});
intex1_board00.on('move', function(){
pinfA.moveTo([pinfA.X(),0]);
psupA.moveTo([psupA.X(),0]);
});

var intex1_i1A = intex1_board00.create('integral', [[function(){return pinfA.X()},function(){return psupA.X()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'});

intex1_i1A.curveLeft.setProperty({visible:false});
intex1_i1A.curveRight.setProperty({visible:false});

for(var i=-4;i<4;i=i+0.5){
intex1_board00.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1});
intex1_board00.create('text',[i-0.2,-0.02,i],{fixed:true});
}

var t1 = intex1_board00.create('text',[function(){return (pinfA.X()+psupA.X())/2-0.5;},0.2,'
P(a< X < b)
'],{fixed:true});

var t2 = intex1_board00.create('text',[-3.5,0.45,function(){return 'P( a < X < b ) = '+intex1_i1A.Value(); }],{strokeColor:'blue'});
</script>

Loi normale

<div id="c12boxFs" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var boardGo = JXG.JSXGraph.initBoard('c12boxFs', {boundingbox: [-4.5, 0.5, 4.5, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = boardGo.create('arrow',[ [-5,0.00],[4.5,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = boardGo.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true});
var c1 = boardGo.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]);
var tmobileA = boardGo.create('slider',[[-2,0.45],[2,0.45],[0,1,5]],{name:'t',snapWidth:0.01});
var i1 = boardGo.create('integral', [[function(){return -tmobileA.Value();}, function(){return tmobileA.Value();} ] , c1],{withLabel: false,fixed:true,fillColor:'blue',label:{strokeColor:'blue',offset: [-60, -40],fontSize:10,fixed:true} });
i1.curveLeft.setProperty({visible:false});
i1.curveRight.setProperty({visible:false});
var i2 = boardGo.create('integral', [[-4.2, function(){return -tmobileA.Value();} ] , c1],{withLabel: false,fixed:true,fillColor:'green',label:{strokeColor:'green',offset: [-50, 10],fontSize:10} });
i2.curveLeft.setProperty({visible:false});
i2.curveRight.setProperty({visible:false});
var i3 = boardGo.create('integral', [[ function(){return tmobileA.Value();},4.2 ] , c1],{withLabel: false,fixed:true,fillColor:'green',label:{strokeColor:'green',offset: [-80, -80],fontSize:10} });
i3.curveLeft.setProperty({visible:false});
i3.curveRight.setProperty({visible:false});
boardGo.create('text',[-4,0.3,function(){var p = Math.floor(1000000*i1.Value())/1000000;var r = Math.round((-(p-1)/2)*1000000)/1000000;return '
1-2P( X > t ) = 1-2x'+Math.round(100000*r)/100000+' = '+Math.round(100000*p)/100000+'
';}],{fixed:true,strokeColor:'green'});
boardGo.create('text',[-4,0.35,function(){var p = Math.floor( i1.Value()*1000000 )/1000000;return '
P( -t < X < t )='+Math.round(100000*p)/100000+'
';}],{fixed:true,strokeColor:'blue'});
boardGo.create('text',[-4,0.25,function(){var p = Math.floor( i1.Value()*1000000 )/1000000;return '
P( X > t )= P( X < -t ) ='+Math.round((-(p-1)/2)*1000000)/1000000+'
';}],{fixed:true,strokeColor:'black'});
for(var i=-4;i<4;i=i+0.5){
boardGo.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1});
boardGo.create('text',[i-0.2,-0.02,i],{fixed:true});
}
</script>

Loi normale

<div id="d4boxFt" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board5 = JXG.JSXGraph.initBoard('d4boxFt', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board5.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board5.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = intex1_board5.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]);
var pinfC = intex1_board5.create('slider',[[-3,0.47],[2,0.47],[-4,-1,5]],{name:'a',snapWidth:0.1});
var psupC = intex1_board5.create('slider',[[-3,0.42],[2,0.42],[-4,1,5]],{name:'b',snapWidth:0.1});
var intex1_i1S = intex1_board5.create('integral', [[function(){return pinfC.Value()},function(){return psupC.Value()} ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'});
intex1_i1S.curveLeft.setProperty({visible:false});
intex1_i1S.curveRight.setProperty({visible:false});

for(var i=-4;i<4;i=i+0.5){
intex1_board5.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1});
intex1_board5.create('text',[i-0.2,-0.02,i],{fixed:true});
}
intex1_board5.create('text',[-4,0.35,function(){var p = Math.floor( intex1_i1S.Value()*1000000 )/1000000;return '
P( a < X < b )='+Math.round(100000*p)/100000+'
';}],{fixed:true,strokeColor:'blue'});
var t1 = intex1_board5.create('text',[function(){return (pinfC.X()+psupC.X())/2-0.5;},0.2,'
P(a< X < b)
'],{fixed:true});
</script>

Loi normale

<div id="ed4BboxFtyy" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board35 = JXG.JSXGraph.initBoard('ed4BboxFtyy', {boundingbox: [-10, 0.8, 10, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board35.create('arrow',[ [-10,0.00],[10,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board35.create('arrow',[ [0,-1],[0,0.8] ], {strokeColor: 'black',fixed:true});
var mu = intex1_board35.create('slider',[[-9.5,0.67],[6,0.67],[-5,1,5]],{name:'μ',snapWidth:0.01});
var sigma = intex1_board35.create('slider',[[-9.5,0.62],[6,0.62],[0.1,1,5]],{name:'σ',snapWidth:0.01});
var intex1_c1 = intex1_board35.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*( x-mu.Value() )*( x-mu.Value() )/(sigma.Value()*sigma.Value() ) ) )/sigma.Value(); }],{strokeWidth:2});

for(var i=-9;i<10;i=i+1){
intex1_board35.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1});
intex1_board35.create('text',[i-0.2,-0.03,i],{fixed:true});
}
</script>

Loi normal

<div id="d4boxFtyyXF" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board3 = JXG.JSXGraph.initBoard('d4boxFtyyXF', {boundingbox: [-4, 0.5, 4, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board3.create('arrow',[ [-5,0.00],[4,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board3.create('arrow',[ [0,-1],[0,0.5] ], {strokeColor: 'black',fixed:true});
var intex1_c1 = intex1_board3.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*x*x) ); }]);
var intex1_i1 = intex1_board3.create('integral', [[-1.2,1.2], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue'});
intex1_i1.curveLeft.setProperty({visible:false});
intex1_i1.curveRight.setProperty({visible:false});
var t1 = intex1_board3.create('point',[-1.2,0],{name:function(){return '-u_{α}'},fixed:true,strokeColor:'black',fillColor:'black',label:{offset:[-5,-15]}});
var t2 = intex1_board3.create('point',[1.2,0],{name:function(){return '+u_{α}'},fixed:true,strokeColor:'black',fillColor:'black',label:{offset:[-5,-15]}});
var t3 = intex1_board3.create('text',[-3.8,0.2,'P( X < -u_{α} ) = α/2'],{fixed:true,strokeColor:'black'});
var t4 = intex1_board3.create('text',[1.7,0.2,'P( X > u_{α} ) = α/2'],{fixed:true,strokeColor:'black'});
var s1 = intex1_board3.create('arrow',[ [-2.8,0.18],[-1.5,0.05] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true});
var s2 = intex1_board3.create('arrow',[ [2.8,0.18],[1.5,0.05] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true});
var t5 = intex1_board3.create('text',[-1.2,0.45,'
P(u_{α} ≤ X ≤ u_{α} ) = 1 - α
'],{fixed:true,strokeColor:'black'});
var s3 = intex1_board3.create('arrow',[ [-0.6,0.43],[-0.2,0.3] ],{dash:1,strokeColor:'black',strokeWidth:1.5,fixed:true});
</script>

Loi normal

<div id="Fed4BboxFtyy" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var intex1_board35 = JXG.JSXGraph.initBoard('Fed4BboxFtyy', {boundingbox: [-10, 0.8, 10, -0.05], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var absAxe = intex1_board35.create('arrow',[ [-10,0.00],[10,0.00] ], {strokeColor: 'black', strokeWidth:2,fixed:true});
var absOrd = intex1_board35.create('arrow',[ [0,-1],[0,0.8] ], {strokeColor: 'black',fixed:true});
var mu1 = intex1_board35.create('slider',[[-9.5,0.77],[6,0.77],[-5,1,5]],{name:'μ',snapWidth:0.1});
var sigma1 = intex1_board35.create('slider',[[-9.5,0.72],[6,0.72],[0.1,1,5]],{name:'σ',snapWidth:0.1});
var numS = intex1_board35.create('slider',[[-9.5,0.67],[6,0.67],[1,1,3]],{name:'nb sigma',snapWidth:0.1});
var intex1_c1 = intex1_board35.create('functiongraph', [function (x) { return 0.3989422804*Math.pow( 2.718281828,(-0.5*( x-mu1.Value() )*( x-mu1.Value() )/(sigma1.Value()*sigma1.Value() ) ) )/sigma1.Value(); }],{strokeWidth:2});
var a = function(){ return mu1.Value()-numS.Value()*sigma1.Value(); }
var b = function(){ return mu1.Value()+numS.Value()*sigma1.Value(); }
var intex1_i1V = intex1_board35.create('integral', [[a, b ], intex1_c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-10,-20]}});
intex1_i1V.curveLeft.setProperty({visible:false});
intex1_i1V.curveRight.setProperty({visible:false});

for(var i=-9;i<10;i=i+1){
intex1_board35.create('segment',[ [i,-0.01] , [i,0.01] ],{strokeColor:'black',fixed:true,strokeWidth:1});
intex1_board35.create('text',[i-0.2,-0.03,i],{fixed:true});
}
intex1_board35.create('text',[-9.5,0.5,function(){ var n = Math.round(10*numS.Value())/10;return '
P( μ-'+n+'σ ≤ X ≤ μ+'+n+'σ) = '+intex1_i1V.Value();}],{strokeColor:'blue'});
</script>

Espace

<div id="butter" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var board35 = JXG.JSXGraph.initBoard('butter', {boundingbox: [-20, 43, 20.2, -5], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});

var rayon = 4;

var sli = board35.create('slider',[[-15,5],[-15,20],[8.8,15,30]],{name:'S',snapWidth:0.01,label:{fontSize:0}});

var a1 = board35.create('point',[-19.5,-2.5],{fixed:true,visible:false});
var a2 = board35.create('point',[-10,2.3],{fixed:true,visible:false});
var a3 = board35.create('point',[11.5,-2.5],{fixed:true,visible:false});
var a4 = board35.create('point',[20.0,2.3],{fixed:true,visible:false});

var s1 = board35.create('segment',[ a1 , a2 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s2 = board35.create('segment',[ a1 , a3 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s3 = board35.create('segment',[ a3 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s31 = board35.create('segment',[ a2 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1});

var c1 = board35.create('functiongraph', [function (x) { var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return -0.3*Math.sqrt(0.3*r*r-0.3*x*x); }],{strokeWidth:1});
var c2 = board35.create('functiongraph', [function (x) { var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return 0.20*Math.sqrt(0.3*r*r-0.3*x*x); }],{strokeWidth:1,dash:2});

var c3 = board35.create('functiongraph', [function (x) { return rayon-0.3*Math.sqrt(16-x*x); }],{strokeWidth:1});
var c4 = board35.create('functiongraph', [function (x) { return rayon+0.3*Math.sqrt(16-x*x); }],{strokeWidth:1,dash:2});

var i1 = board35.create('integral', [[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) );return -r;}, function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return r;} ], c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-4,4]},fillOpacity:0.2});

i1.curveLeft.setProperty({visible:false});
i1.curveRight.setProperty({visible:false});

var cercle = board35.create('circle',[[0,rayon],[0,0]],{fixed:true});

var Pi = board35.create('point',[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return -r;},0],{name:'I',size:0.2,label:{offset:[-10,-10]}});

var Pj = board35.create('point',[function(){var r = Math.sqrt(16*sli.Value()/(sli.Value()-8 ) ); return r;},0],{name:'J',size:0.2,label:{offset:[-10,-10]},visible:false});

var Ps = board35.create('point',[0,function(){ return sli.Value();}],{name:'S',size:0.2,label:{offset:[10,10]},visible:true});

var s4 = board35.create('segment',[Pi,Ps],{fixed:true,strokeColor:'black',strokeWidth:1});
var s5 = board35.create('segment',[Pj,Ps],{fixed:true,strokeColor:'black',strokeWidth:1});

var Pa = board35.create('intersection', [cercle, s4, 0],{name:'A',size:0.2,label:{offset:[-10,10]},visible:true});

var pq = board35.create('polygon', [Pi, Ps, Pj], {borders: {strokeWidth:0},fillColor:'blue',fillOpacity:0.2 });

var s3 = board35.create('segment',[ [0,0] , Ps ],{strokeColor:'black',strokeWidth:0.5,dash:2});
var Po = board35.create('point',[0,4],{name:'O',label:{fontSize:10,offset:[5,1]},size:0.2,fixed:true});
var Ph = board35.create('point',[0,0],{name:'H',label:{fontSize:10,offset:[5,-8]},size:0.2,fixed:true});
</script>

Espace

<div id="cream" class='jxgbox' style="margin:auto;width: 350px; height: 350px;margin-top:20px;margin-bottom:15px;"></div>
<script type="text/javascript">
var board35 = JXG.JSXGraph.initBoard('cream', {boundingbox: [-20, 43, 20, -5], showcopyright: false, axes:true, shownavigation: false,grid:false,pan:{enabled:false}});
var rayon = 4;

var sli = board35.create('slider',[[-15,20],[-15,5],[4.1,5,12.5]],{name:'I',snapWidth:0.01,label:{fontSize:0}});

var a1 = board35.create('point',[-19.5,-2.5],{fixed:true,visible:false});
var a2 = board35.create('point',[-14,1],{fixed:true,visible:false});
var a3 = board35.create('point',[14,-2.5],{fixed:true,visible:false});
var a4 = board35.create('point',[19.5,1],{fixed:true,visible:false});

var s1 = board35.create('segment',[ a1 , a2 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s2 = board35.create('segment',[ a1 , a3 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s3 = board35.create('segment',[ a3 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1});
var s31 = board35.create('segment',[ a2 , a4 ],{fixed:true,strokeColor:'black',strokeWidth:1});

var c1 = board35.create('functiongraph', [function (x) { return -0.3*Math.sqrt(0.3*sli.Value()*sli.Value()-0.3*x*x); }],{strokeWidth:1});
var c2 = board35.create('functiongraph', [function (x) { return 0.3*Math.sqrt(0.3*sli.Value()*sli.Value()-0.3*x*x); }],{strokeWidth:1,dash:2});
var c3 = board35.create('functiongraph', [function (x) { return rayon-0.3*Math.sqrt(16-x*x); }],{strokeWidth:1});
var c4 = board35.create('functiongraph', [function (x) { return rayon+0.3*Math.sqrt(16-x*x); }],{strokeWidth:1,dash:2});

var i1 = board35.create('integral', [[function(){return -sli.Value();}, function(){return sli.Value();} ], c1],{withLabel: false,fixed:true,fillColor:'blue',label:{offset:[-4,4]},fillOpacity:0.2});
i1.curveLeft.setProperty({visible:false});
i1.curveRight.setProperty({visible:false});

var cercle = board35.create('circle',[[0,rayon],[0,0]],{fixed:true});

var Pi = board35.create('point',[function(){return -sli.Value();},0],{name:'I',size:0.2,label:{offset:[-10,-10]}});
var Pj = board35.create('point',[function(){return sli.Value();},0],{name:'J',size:0.2,label:{offset:[-10,-10]},visible:false});
var Pa = board35.create('point',[function(){return -2*sli.Value()*rayon*rayon/(rayon*rayon+sli.Value()*sli.Value());},function(){return 2*rayon*sli.Value()*sli.Value()/(rayon*rayon+sli.Value()*sli.Value());}],{name:'A',size:0.2,label:{offset:[-10,10]},visible:true});
var Ps = board35.create('point',[0,function(){ return Pa.Y()*Pi.X()/(Pi.X()-Pa.X());}],{name:'S',size:0.2,label:{offset:[10,10]},visible:true});

var s4 = board35.create('segment',[Pi,Ps],{fixed:true,strokeColor:'black',strokeWidth:1});
var s5 = board35.create('segment',[Pj,Ps],{fixed:true,strokeColor:'black',strokeWidth:1});

var pq = board35.create('polygon', [Pi, Ps, Pj], {borders: {strokeWidth:0},fillColor:'blue',fillOpacity:0.2 });

var s3 = board35.create('segment',[ [0,0] , Ps ],{strokeColor:'black',strokeWidth:0.5,dash:2});
var Po = board35.create('point',[0,4],{name:'O',label:{fontSize:10,offset:[5,1]},size:0.2,fixed:true});
var Ph = board35.create('point',[0,0],{name:'H',label:{fontSize:10,offset:[5,-8]},size:0.2,fixed:true});

</script>

Cube

<div id='bb1' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var brdqu = JXG.JSXGraph.initBoard('bb1', {boundingbox: [0, 6.5, 7.5, 0], showCopyright:false, shownavigation: false,grid:false,pan:{enabled:false}});
var pA = brdqu.create('point',[2.5,2.0],{fixed:true,name:'A',label:{offset:[-3,-15]},strokeColor:'black',fillColor:'black'});
var pB = brdqu.create('point',[0.5,0.5],{fixed:true,name:'B',label:{offset:[-15,-10]},strokeColor:'black',fillColor:'black'});
var pC = brdqu.create('point',[4.5,0.5],{fixed:true,name:'C',label:{offset:[15,-10]},strokeColor:'black',fillColor:'black'});
var pD = brdqu.create('point',[6.5,2.0],{fixed:true,name:'D',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var pE = brdqu.create('point',[2.5,6.0],{fixed:true,name:'E',label:{offset:[-18,0]},strokeColor:'black',fillColor:'black'});
var pF = brdqu.create('point',[0.5,4.5],{fixed:true,name:'F',label:{offset:[-15,0]},strokeColor:'black',fillColor:'black'});
var pG = brdqu.create('point',[4.5,4.5],{fixed:true,name:'G',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var pH = brdqu.create('point',[6.5,6.0],{fixed:true,name:'H',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var aAB = brdqu.create('segment',[pA,pB],{strokeColor:'black',strokeWidth:1,dash:2});
var aAD = brdqu.create('segment',[pA,pD],{strokeColor:'black',strokeWidth:1,dash:2});
var aAE = brdqu.create('segment',[pA,pE],{strokeColor:'black',strokeWidth:1,dash:2});
var aBC = brdqu.create('segment',[pB,pC],{strokeColor:'black',strokeWidth:1,dash:0});
var aBF = brdqu.create('segment',[pB,pF],{strokeColor:'black',strokeWidth:1,dash:0});
var aCG = brdqu.create('segment',[pC,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aCD = brdqu.create('segment',[pC,pD],{strokeColor:'black',strokeWidth:1,dash:0});
var aDH = brdqu.create('segment',[pD,pH],{strokeColor:'black',strokeWidth:1,dash:0});
var aFG = brdqu.create('segment',[pF,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aFE = brdqu.create('segment',[pF,pE],{strokeColor:'black',strokeWidth:1,dash:0});
var aHG = brdqu.create('segment',[pH,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aHE = brdqu.create('segment',[pH,pE],{strokeColor:'black',strokeWidth:1,dash:0});
var pI = brdqu.create('midpoint',[pA,pB],{fixed:true,name:'I',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue'});
var pJ = brdqu.create('midpoint',[pE,pH],{fixed:true,name:'J',label:{offset:[0,13]},strokeColor:'blue',fillColor:'blue'});
var pK = brdqu.create('midpoint',[pC,pB],{fixed:true,name:'K',label:{offset:[0,-15]},strokeColor:'blue',fillColor:'blue'});
var pL = brdqu.create('midpoint',[pC,pG],{fixed:true,name:'L',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue'});
</script>

Cube / Plan

<div id='bb110' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var brdqu = JXG.JSXGraph.initBoard('bb110', {boundingbox: [0, 6.5, 7.5, 0], showCopyright:false, shownavigation: false,grid:false,pan:{enabled:false}});
var pA = brdqu.create('point',[2.5,2.0],{fixed:true,name:'A',label:{offset:[-3,-15]},strokeColor:'black',fillColor:'black'});
var pB = brdqu.create('point',[0.5,0.5],{fixed:true,name:'B',label:{offset:[-15,-10]},strokeColor:'black',fillColor:'black'});
var pC = brdqu.create('point',[4.5,0.5],{fixed:true,name:'C',label:{offset:[15,-10]},strokeColor:'black',fillColor:'black'});
var pD = brdqu.create('point',[6.5,2.0],{fixed:true,name:'D',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var pE = brdqu.create('point',[2.5,6.0],{fixed:true,name:'E',label:{offset:[-18,0]},strokeColor:'black',fillColor:'black'});
var pF = brdqu.create('point',[0.5,4.5],{fixed:true,name:'F',label:{offset:[-15,0]},strokeColor:'black',fillColor:'black'});
var pG = brdqu.create('point',[4.5,4.5],{fixed:true,name:'G',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var pH = brdqu.create('point',[6.5,6.0],{fixed:true,name:'H',label:{offset:[15,0]},strokeColor:'black',fillColor:'black'});
var aAB = brdqu.create('segment',[pA,pB],{strokeColor:'black',strokeWidth:1,dash:2});
var aAD = brdqu.create('segment',[pA,pD],{strokeColor:'black',strokeWidth:1,dash:2});
var aAE = brdqu.create('segment',[pA,pE],{strokeColor:'black',strokeWidth:1,dash:2});
var aBC = brdqu.create('segment',[pB,pC],{strokeColor:'black',strokeWidth:1,dash:0});
var aBF = brdqu.create('segment',[pB,pF],{strokeColor:'black',strokeWidth:1,dash:0});
var aCG = brdqu.create('segment',[pC,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aCD = brdqu.create('segment',[pC,pD],{strokeColor:'black',strokeWidth:1,dash:0});
var aDH = brdqu.create('segment',[pD,pH],{strokeColor:'black',strokeWidth:1,dash:0});
var aFG = brdqu.create('segment',[pF,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aFE = brdqu.create('segment',[pF,pE],{strokeColor:'black',strokeWidth:1,dash:0});
var aHG = brdqu.create('segment',[pH,pG],{strokeColor:'black',strokeWidth:1,dash:0});
var aHE = brdqu.create('segment',[pH,pE],{strokeColor:'black',strokeWidth:1,dash:0});
var pI = brdqu.create('midpoint',[pA,pB],{fixed:true,name:'I',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pJ = brdqu.create('midpoint',[pE,pH],{fixed:true,name:'J',label:{offset:[0,13]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pK = brdqu.create('midpoint',[pC,pB],{fixed:true,name:'K',label:{offset:[0,-15]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pL = brdqu.create('midpoint',[pC,pG],{fixed:true,name:'L',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pM = brdqu.create('midpoint',[pH,pG],{fixed:true,name:'',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pN = brdqu.create('midpoint',[pA,pE],{fixed:true,name:'',label:{offset:[15,0]},strokeColor:'blue',fillColor:'blue',size:0.8});
var pol = brdqu.create('polygon',[pI,pN,pJ,pM,pL,pK]);
var lFD = brdqu.create('line',[pF,pD],{dash:2,strokeWidth:1,strokeColor:'red'});
var pInt = brdqu.create('point',[3.50,3.25],{fixed:true,name:'M',label:{offset:[15,0]},strokeColor:'red',fillColor:'red',size:1.0});
</script>

Signe fonction affine

<div id='boxAffine' class='jxgbox' style='width:500px; height:500px;margin:auto;margin-top:20px;margin-bottom:10px;'></div>
<script>
var brd1 = JXG.JSXGraph.initBoard('boxAffine', {axis:true, boundingbox:[-6,6,6,-6], showCopyright:false,showNavigation:false,pan: { enabled: false}});
var a = brd1.create('slider',[[-5.5,4],[1,4],[-4,1,4]], {name:'a',snapWidth:0.1});
var b = brd1.create('slider',[[-5.5,3],[1,3],[-4,1,4]], {name:'b',snapWidth:0.1});
var fu = function(x){ return a.Value()*x+b.Value(); }
var plotG = brd1.create('functiongraph',[fu,-6,function(){return -b.Value()/a.Value();}], {strokeWidth:4,strokeColor:function(){ var coul = 'blue';if(a.Value()<0){coul = 'red';}return coul; } });
var plotD = brd1.create('functiongraph',[fu,function(){return -b.Value()/a.Value();},6], {strokeWidth:4,strokeColor:function(){ var coul = 'red';if(a.Value()<0){coul = 'blue';}return coul; } });
var text1 = brd1.create('text',[-5.5,2,function(){var s = -b.Value()/a.Value();return "-b/a = "+s;}],{fontSize:20});
</script>

Arbre probas

<div id='bbProbas' class='jxgbox' style='width:350px; height:350px;margin:auto;margin-top:20px;margin-bottom:40px;'></div>
<script>
var board = JXG.JSXGraph.initBoard('bbProbas', {boundingbox: [-12, 10, 8, -10], showCopyright:false,showNavigation:false,pan:{enabled:false}});
var s1 = board.create('segment',[[-9,0],[-4,4]],{fixed:true});
var s2 = board.create('segment',[[-9,0],[-4,-4]],{fixed:true});
var s3 = board.create('segment',[[-3,4.5],[2,8]],{fixed:true});
var s4 = board.create('segment',[[-3,3.5],[2,1]],{fixed:true});
var s5 = board.create('segment',[[-3,-4.5],[2,-8]],{fixed:true});
var s6 = board.create('segment',[[-3,-3.5],[2,-1]],{fixed:true});
var t1 = board.create('text',[-3.7,4.2,'R'],{fixed:true});
var t2 = board.create('text',[-3.7,-3.8,'R'],{fixed:true});
var t21 = board.create('text',[-3.7,-3.4,'–'],{fixed:true});
var t3 = board.create('text',[2.3, 8.2,'J'],{fixed:true});
var t4 = board.create('text',[2.3, 1.2,'J'],{fixed:true});
var t41 = board.create('text',[2.3,1.6,'–'],{fixed:true});
var t5 = board.create('text',[2.3, -7.8,'J'],{fixed:true});
var t51 = board.create('text',[2.3,-7.4,'–'],{fixed:true});
var t6 = board.create('text',[2.3, -0.8,'J'],{fixed:true});
var p1 = board.create('text',[-7, 3.1,'0,4'],{fixed:true,strokeColor:'red'});
var p2 = board.create('text',[-7, -2.8,'0,6'],{fixed:true,strokeColor:'red'});
var p3 = board.create('text',[-1, 7.6,'0,25'],{fixed:true,strokeColor:'red'});
var p4 = board.create('text',[-1, 1.8,'0,75'],{fixed:true,strokeColor:'red'});
var p5 = board.create('text',[-1, -1.5,'x'],{fixed:true,strokeColor:'red'});
var p6 = board.create('text',[-1, -6.5,'1-x'],{fixed:true,strokeColor:'red'});
</script>