# Nbplus

[nbplus](https://github.com/callysto/nbplus) (working title) is a collection of Callysto-made Python modules for Creators wanting greater interactivity and visual aesthetic in Jupyter notebooks. These tools reflect a desire for aggregation of reusable code and uniformity in how we develop interactive content.

## Getting Started

Submodules are installed separately.

Use the following command, replacing `<submodule>` with the name of a subdirectory in [nbplus](https://github.com/callysto/nbplus):

`pip install --upgrade --force-reinstall --user git+git://github.com/callysto/nbplus.git#egg=<submodule>\&subdirectory=<submodule>`

Once installed, import a submodule by referring to itself.

e.g.

```python
from geogebra.ggb import *
from nbvis.classes import D3, MathBox, Vis
```

To contribute, see the [repository](https://github.com/callysto/nbplus).

## Submodules

### [GeoGebra](https://training.callysto.ca/extensions/nbplus)

GeoGebra is an interactive mathematics application for visualization and interaction with geometry, algebra, statistics and calculus. We have developed a Jupyter magic so that GeoGebra may be used within notebooks.

### [nbvis](https://training.callysto.ca/extensions/nbplus)

This is a Python [wrapper library](https://en.wikipedia.org/wiki/Wrapper_library) for JavaScript-based visualizations in Jupyter, and provides a streamlined means of specifying and updating visualization code. We are actively supporting [D3.js](https://d3js.org/) and [MathBox.js](https://github.com/unconed/mathbox).

A sample guide outlining the creation of a slider bar using `nbvis` is available [here](https://github.com/callysto/training-manual-live/blob/extensions/guides/nbvisGuide.ipynb).

*class* `classes.D3(name, silent=True)` [\[`source`\]](https://github.com/callysto/nbplus/blob/master/nbvis/nbvis/widgets.py)

Containerizes D3 structures.

#### Parameters:

* *name* (`string`) – a unique identifier for a class instance
* *silent* (`boolean`) – toggles verbose output

#### Methods:

* `svg(height=None)` – appends code to display an [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) element
* `canvas(height=None)` – appends code to display a [Canvas](https://en.wikipedia.org/wiki/Canvas_element) element
* `require(*args)` – requires JavaScript modules from [unpkg](https://unpkg.com/) via [asynchronous modules definition](https://en.wikipedia.org/wiki/Asynchronous_module_definition)&#x20;

#### Returns:

* D3 object class instance

#### Return type:

* `nbvis.classes.D3`

#### Usage:

```python
>>> D3.reset()
>>> foo = D3("foo", silent=False).svg(height=100)
>>> foo.require("d3-selection-multi", "d3-force-constant")
```

```
Reset list of D3 class instances!
New D3 object "foo" added to instances ...
Will require "d3-selection-multi", "d3-force-constant" ...
```

*class* `classes.MathBox(name, silent=True)` [\[`source`\]](https://github.com/callysto/nbplus/blob/master/nbvis/classes.py)

Containerizes MathBox structures.

#### Parameters:

* *name* (`string`) – a unique identifier for a class instance
* *silent* (`boolean`) – toggles verbose output

#### Methods:

* `canvas(height=None)` – appends code to display a [Canvas](https://en.wikipedia.org/wiki/Canvas_element) element
* `require(*args)` – requires JavaScript modules from [unpkg](https://unpkg.com/) via [asynchronous modules definition](https://en.wikipedia.org/wiki/Asynchronous_module_definition)&#x20;

#### Returns:

* MathBox object class instance

#### Return type:

* `nbvis.classes.MathBox`

#### Usage:

```python
>>> bar = MathBox("bar").canvas(height=200)
```

```python
>>> bar = MathBox("bar", silent=True).canvas(height=300)
```

```
Replaced duplicate MathBox object "bar" ...
```

*class* `classes.Vis(*args, js="", silent=True)` [\[`source`\]](https://github.com/callysto/nbplus/blob/master/nbvis/classes.py)

#### Parameters:

* *\*args* (`D3` or `MathBox`) – specifies object class instances to be displayed immediately
* *js* (`string`) – prepends custom JavaScript before visualization code
* *silent* (`boolean`) – toggles verbose output

#### Methods:

* None

#### Returns:

* Visualization object class instance

#### Return type:

* `nbvis.classes.Vis`

#### Usage:

```python
>>> Vis(foo, bar, silent=False);
```

```
Found D3 instance of "foo" ...
Requiring "d3-selection-multi", "d3-force-constant" ...
Found MathBox instance of "bar" ...



<IPython.core.display.Javascript object>
```

*magic* `%%d3` [\[`source`\]](https://github.com/callysto/nbplus/blob/master/nbvis/magics.py)

Creates a global variable `d3_code` and appends the content of the cell to it for later use in a D3 object class instance.

#### Flags:

* to reset all code : `--reset`
* to queue code for later execution : `--queue` or `-q`

#### Usage:

```python
>>> import nbvis.magics
```

```javascript
%%d3 --reset --queue
// a JavaScript comment
var svg = d3.select("svg");
console.log(svg);
```

```
Initialized d3_code container!
Code added to D3 visualization queue ...
```

*magic* `%%mathbox` [\[`source`\]](https://github.com/callysto/nbplus/blob/master/nbvis/magics.py)

Creates a global variable `mathbox_code` and appends the content of the cell to it for later use in a MathBox object class instance.

#### Flags:

* to reset all code : `--reset`
* to queue code for later execution : `--queue` or `-q`

#### Usage:

```javascript
%%mathbox --queue
var view = mathbox
  .cartesian({
    range: [[-2, 2], [-1, 1], [-1, 1]],
    scale: [2, 1, 1],
  })
    .axis({
      axis: 1,
    })
    .axis({
      axis: 2,
    })
var axis = mathbox.select("cartesian > axis")
console.log(axis);
```

```
Initialized mathbox_code container!
Code added to MathBox visualization queue ...
```