Nbplus

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:

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.

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

To contribute, see the repository.

Submodules

GeoGebra

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

This is a Python 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 and MathBox.js.

A sample guide outlining the creation of a slider bar using nbvis is available here.

class classes.D3(name, silent=True) [source]

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 element
• canvas(height=None) – appends code to display a Canvas element
• require(*args) – requires JavaScript modules from unpkg via asynchronous modules definition

Returns:

• D3 object class instance

Return type:

• nbvis.classes.D3

Usage:

>>> 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]

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 element
• require(*args) – requires JavaScript modules from unpkg via asynchronous modules definition

Returns:

• MathBox object class instance

Return type:

• nbvis.classes.MathBox

Usage:

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

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

Replaced duplicate MathBox object "bar" ...

class classes.Vis(*args, js="", silent=True) [source]

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:

>>> 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]

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:

>>> import nbvis.magics

%%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]

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:

%%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 ...