Inspired by blog posts here and there, I wanted to write such animation entirely in a Jupyter notebook.
In the process I made slight adjustments:
- I changed the disposition of the circles so that they fill as much space as possible, using a bit of trigonometry, so that (1) circles remain visible even for large numbers, (2) there is never overlapping.
- I added a zoom in/out feature to capture the fractal aspect of such diagrams.
- The input field accepts expression like '257*13' so that you can get the pattern without a side calculator.
The notebook makes heavy use of the %%javascript magic and the impressive d3.js library.
The function write_js_to_output is necessary to store the js code in an output cell, which enables:
- the notebook to run the js stored in the outpout cells upon load without the user having to manually run the cells
- nbconvert to create a standalone HTML page containing the notebook output ready for posting. Here is the result.
Note that for security reasons explained in the IPython notebook documentation, the javascript in the notebook will run upon load only if you have run it manually before with the same profile. On the other hand nbconvert will always include the javascript in the HTML page created.