semvec/pypi-packages huggingface dataset:
jsxgraph-magic 0.0.2
Jupyter Notebook/Lab magic wrapper for the JavaScript math-sketching utility JSXGraph
License: MIT

# jsxgraph-magic

**jsxgraph-magic** is an IPython magic wrapper for the famous JavaScript math-sketching package [JSXGraph](https://github.com/jsxgraph/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](https://github.com/jupyterlab/jupyterlab) or [Jupyter Notebook](https://github.com/jupyter/notebook) to edit with the Notebook.

## Installation

- From PIP:
  
  ```shell
  pip install jsxgraph-magic
  ```
  
- Development install:
  
  ```shell
  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 in `px` 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](https://en.wikipedia.org/wiki/Five_circles_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();
```