/tutormagic

Jupyter notebook magics to embed pythontutor.com within an IFrame in the Jupyter (classic or Lab) notebook using the code from a Jupyter code cell.

Primary LanguagePythonMIT LicenseMIT

tutormagic extension for the Jupyter notebook

Recommendation

Have a look to nbtutor, a more polished and better solution.

Jupyter notebook magics to embed http://www.pythontutor.com within an IFrame in the Jupyter notebook or to open a new tab in the browser using the code from a notebook code cell (using the IPython kernel).

Install

pip install tutormagic

or with conda

conda install -c kikocorreoso tutormagic

or (for the development version)

pip install git+https://github.com/kikocorreoso/tutormagic.git

Tested on Python 2.7.x/3.4.x/3.5.x/3.6.x/3.7.x/3.8.x/3.9.x and Jupyter 3.x/4.x/5.x/6.x.

Usage

First, load the extension:

%load_ext tutormagic

Once loaded, in a code cell in the notebook type the following:

%%tutor --lang python3
# some python code
# ...

to create an IFrame within the notebook with the http://www.pythontutor.com page with the code included in the Jupyter code cell or:

%%tutor --lang python3 --tab
# some python code
# ...

to open http://www.pythontutor.com page in a new browser tab with the code included in the Jupyter code cell.

Options

--lang or -l: it allows you to choose one of the available languages supported by pythontutor. If this option is not used then it will consider the code in the cell as Python3 code.

  • %%tutor --lang python3 or %%tutor -l python3 or %%tutor to show a pythontutor IFrame with python3 code.
  • %%tutor --lang python2 or %%tutor -l python2 to show a pythontutor IFrame with python2 code.
  • %%tutor --lang py3anaconda or %%tutor -l py3anaconda to show a pythontutor IFrame with py3anaconda code. This option allows you to import libs like numpy. This is experimental.
  • %%tutor --lang java or %%tutor -l java to show a pythontutor IFrame with java code.
  • %%tutor --lang javascript or %%tutor -l javascript to show a pythontutor IFrame with javascript code.
  • %%tutor --lang typescript or %%tutor -l typescript to show a pythontutor IFrame with typescript code.
  • %%tutor --lang ruby or %%tutor -l ruby to show a pythontutor IFrame with ruby code.
  • %%tutor --lang c or %%tutor -l c to show a pythontutor IFrame with c code.
  • %%tutor --lang c++ or %%tutor -l c++ to show a pythontutor IFrame with c++ code.
https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/normal.png

--height or -h: it changes the height of the output area display in pixels. It is used to define the height of the IFrame used to embed http://pythontutor.com within the notebook. If the --tab option is used this option will be ignored.

https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/height.png

--tab or -t: it will open http://pythontutor.com in a new tab instead of within an IFrame within the notebook.

--secure or -s: it will use HTTPS to open PythonTutor.com. This is useful when being used in a notebook that uses SSL.

--link or -k: it will display a link to PythonTutor, not via an iFrame.

https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/link1.png

--run or -r: Use this option if you also want to run the code in the cell in the notebook.

https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/run1.png

You can customize how PythonTutor is rendered via the options available below in the URL params. The following options are available:

  • Use the --cumulative option to tell PythonTutor to the cumulative to True
https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/cumulative1.png
  • Use the --heapPrimitives option to tell PythonTutor to render objects on the heap
https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/test_heap1.png
  • Use the --textReferences option to tell PythonTutor to use text labels for references
  • Use the --curInstr followed by a number to start the visualisation at the defined step
https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/current1.png
  • Use the --verticalStack to set visualization to stack atop one another.
https://raw.githubusercontent.com/kikocorreoso/tutormagic/master/imgs/vertical1.png

Examples

Example notebook included in the repository.

Example (in spanish) notebook.

Name of the extension

The name of the extension was suggested by Doug S. Blank (@dsblank).

Changelog

Version 0.3.1

  • Added option --lang py3anaconda (thanks to @naereen).

Version 0.3.0

  • Added options --secure, --link, --cumulative, --heapPrimitives and --textReferences (thanks to James Quacinella (@jquacinella)).
  • Added options --run, --curInstr and --verticalStack.

Version 0.2.0

  • Added new --tab option (thanks to Holger Karl (@hkarl)).
  • Added new --height option (thanks to Tom Simonart(@tomsimonart)).
  • Added new languages available on http://pythontutor.com (Typescript, Ruby, C and C++).

Version 0.1.0

  • Initial version