Jupyter Notebook/Lab magic wrapper for the JavaScript math-sketching utility JSXGraph
Project description
jsxgraph-magic
jsxgraph-magic is an IPython magic wrapper for the famous JavaScript math-sketching package JSXGraph. jsxgraph-magic enables you to use JSXGraph in Notebook and see the sketching in the output cell.
Requirements
- A network connection is required to fetch the JavaScript and CSS file for JSXGraph.
- IPython is required since the magic is the concept of the IPython.
- IPython alone cannot be much useful. Please try Jupyter Lab or Jupyter Notebook to edit with the Notebook.
Installation
-
From PIP:
pip install jsxgraph-magic
-
Development install:
git clone https://github.com/chunxy/jsxgraph-magic.git cd jsxgraph-magic pip install -e ./
Usage
-
As with usual IPython magic, remember to
%load_ext jsxgraph-magic
before using this magic. -
This repo contains the cell magic named as jsxgraph. The magic should be used as:
%%jsxgraph [-w WIDTH] [-h HEIGHT] id <JSXGraph descriptions>
where id is the
id
of the HTML element to embed the JSXGraph board, width and height is the width and height of the board inpx
respectively, <JSXGraph descriptions> is the usual JavaScript code to describe the graph using the JSXGraph library.You may also run the following magic to see the description:
%%jsxgraph?
A simple example of Five-circle Theorem (code from JSXGrpah website) will be
%%load_ext jsxgraph-magic
%%jsxgraph jxgbox -w 400 -h 400
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5]});
var p = [], l = [], i = [], c = [], j = [], k;
p[0] = brd.create('point',[-2.5,-3],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[1] = brd.create('point',[-0,4],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[2] = brd.create('point',[2.5,-3],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[3] = brd.create('point',[-4,0],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[4] = brd.create('point',[4,0],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
for (k=0;k<5;k++) {
l[k] = brd.create('segment',[p[k],p[(k+1)%5]],{strokeColor:'black',strokeWidth:1});
}
for (k=0;k<5;k++) {
i[k] = brd.create('intersection',[l[k],l[(k+2)%5],0],{name:'',strokeColor:'#EAEA00',fillColor:'#EAEA00'});
}
for (k=0;k<5;k++) {
c[k] = brd.create('circumcircle',[p[k],i[k],i[(k+2)%5]],{strokeColor:'gray', strokeWidth:1, point: {visible: false}});
}
for (k=0;k<5;k++) {
j[k] = brd.create('intersection',[c[k],c[(k+2)%5],0],{name:'',strokeColor:'#EA0000',fillColor:'#EA0000'});
}
cc = brd.create('circumcircle',[j[0],j[2],j[3]],{strokeColor:'red',strokeWidth:2,point:{strokeColor:'#000000',fillColor:'#000000',size:1}});
brd.update();
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.