Exploring JSXGraph

Apr 14, 2018 · 2 min read · jsxgraph ·

JSXGraph is a graphics package deveoped in Javascript, and which seems to be tailor-made for a static blog such as this. It consists of only two files: the javascript file itself, and an accompanying css file, which you can download. Alternaively you can simply link to the online files at the Javascript content delivery site cdnjs managed by cloudflare. There are cloudflare servers all over the world - even in my home town of Melbourne, Australia.

So I modified the head.html file of my theme to include a link to the necessary files:

So I downloaded the javascript and css files as described here and also, for good measure, added the script line (from that page) to the layouts/partials/head.html file of the theme. Then copied the following snippet from the JSXGraph site:

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>

However, to make this work the entire script needs to be inside a <div>, </div> pair, like this:

<div id="box" class="jxgbox" style="width:500px; height:500px;">
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>
</div>

Just to see how well this works, here’s Archimedes’ neusis construction of an angle trisection: given an angle \(\theta\) in a unit semicircle, its trisection is obtained by laying against the circle a straight line with points \(P\) and \(Q\) spaced 1 apart (drag point B about the circle to see this in action):

For what it’s worth, here is the splendid javascript code to produce the above figure:

<div id="jxgbox" class="jxgbox" style="width:700px; height:400px;"></div>
<script type="text/javascript">
   var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1.5, 1.5, 2.5, -0.5], keepaspectratio: true, axis:false, useMathJax:true});
   var noshow = {visible:false, label:{visible:false}};
   var A = board.create('point',[0,0],{name:"A"});
   var x1 = board.create('point',[-1,0],noshow);
   var x2 = board.create('point',[1,0],noshow);
   var xAxis = board.create('line',[x1,x2],{strokeColor:"#AAAAAA",label:{visible:false}});
   var yAxis = board.create('line',[[0,-1],[0,1.5]],{strokeColor:"#AAAAAA",label:{visible:false}});
   var c = board.create('semicircle',[x1,x2]);
   var B = board.create('glider',[-0.6,0.8,c],{name:'B'});
   var BC = board.create('circle',[B,0.05],{strokeColor:"red",label:{visible:false}});
   var th = board.create('angle',[B,A,x1],{name:"\\(\\theta\\)"});
   var C = board.create('point',[()=>Math.cos(th.Value()/3),()=>Math.sin(th.Value()/3)],{name:"B/3"});
   var L = board.create('line',[B,C],noshow);
   var P = board.create('intersection',[L,xAxis],{name:'P'});
   var N1 = board.create('segment',[B,A],{label:{visible:false}});
   var N2 = board.create('segment',[A,C],{label:{visible:false}});
   var N3 = board.create('segment',[B,P],{label:{visible:false}});
   var th3 = board.create('angle',[C,P,A],
                           {name:"\\(\\theta/3\\)",
                            label:{autoPosition:true,offset:[0,20]}});
   var neusis = board.create('segment',[C,P],{strokeWidth:6,strokeColor:"#008800"});
 </script>

Quite wonderful, it is.