Don't Look! I'm changing!

URL Copied

Ipynb'S Were Made For The WebMarkdown FeaturesMarkdownSpanning A Single LineFootnotesWrap Multiple LinesNest Multiple DivsCode Cells FeaturesCell FlagsIpynb MagicIpythonDisplay JavascriptDisplay Html & Py TemplatingIntegrationsAltair / Vega-EmbedFolium / LeafletDataplayObservablehqPivottablejsMpld3Nvd3 Python-Nvd3BokehMatplotlibNetworkx - PlotlyGoogle Colabs

ColabBinderBinderOpen Source Love svg3
NPM LicenseActiveGitHub last commit
GitHub starsGitHub watchersGitHub forksGitHub followers

Ipynb's were made for the web

Sample Image

Did you know Python notebooks (.ipynb)'s are just JSON objects that get shown from a web browser? Cells and their outputs are all interactive HTML elements rendered from the JSON. When you execute python code in a python cell, it gets sent to the Jupyter backend service which runs the python code, updates the JSON, and returns the results back to the webpage. This is true for all notebook environments, even in VS Code.


Go Figure!


Subsequently, I built Ipynb2Web and this demo page. Colab


Click a shape!

IPYNBIPYNB FileIPYNB2WebIPYNB to WebIPYNB->IPYNB2WebPage_ContentPage ContentIPYNB2Web->Page_Content

The converter starts by reading in YAML FrontMatter and then processesing each markdown and code cell. Code cells input and outputs may get conditional treatment using flags.


Click a shape!

nb2jsonnb2jsonread_nbread_nbnb2json->read_nb0. Converts IPYNB to HTMLget_metadataget_metadataread_nb->get_metadata1a. Strips out MetaDataconvertNbconvertNbread_nb->convertNb1b. Converts the remainder to HTMLcleanCellcleanCellconvertNb->cleanCell2. Handles component in the same waymarkdownmarkdowncleanCell->markdown3a. ConvertprocessCodeprocessCodecleanCell->processCode3b. ProcessgetFlagsgetFlagsprocessCode->getFlags4a. Processing InstructionsprocessSourceprocessSourceprocessCode->processSource4b.processOutputprocessOutputprocessCode->processOutput4c.getFlags->processSourcegetFlags->processOutputmakeDetailsmakeDetailsprocessSource->makeDetailsprocessOutput->makeDetails

Inspired by nbdev and nbConvert.

Markdown Features

Markdown

  1. Simple markdown still works as expected.
    • lists work
    • Checklists work
      • Twice Nested Checklist work
  2. Caption
    [![caption](image_url)](hyperlink)
  3. <b> Escape special chars in markdown using backslashes. <b>

Spanning A Single Line

Create span elements similar to hyperlinks.

 [This text will be highlighted]{.className.highlight #id}

This text will be highlighted

Footnotes

Here is an inline note Inlines notes help keep your thoughts organized where CSS can define how they behave.

 Here is an inline note.^[Inlines notes.]{.dootdootdoo}

Here is another inline note. Inlines notes.

and another inline note. Inlines notes.

Wrap Multiple Lines

Wrap content with three colons ::: which convert to spans with {.specific #attributes}

This is a ::: {.tip} You say whatever you need to say between the colons :::
This ::: {.info} is an info box
This is a .warning box
This is a .important box
This is a .caution box
This is a .border box

Nest Multiple Divs

 :::::: {.border}
 Create a div using three colons and nest them by adding 3 colons outwards.

 ::: { #idName .className }
     Your interior div here.
 :::
 ::::::

Code Cells Features

You can put raw html and js in markdown but not the other way around.

This approach really cool because I can write html in markdown without a hitch.
For example, click this blue text. I put javascript right in the middle of this sentence within the .ipynb doc.

Naturally, code cells show executed code; So run the cells!

System outputs however, do not get rendered (error, install & import messages, etc..)

Running %%Javascript

When you use %%javascript to run JavaScript code in a Jupyter notebook, the code gets executed within a script tag. This means that variables or functions you define will be added to the global scope and are thus accessible to all the other cells (remember that the notebook is actually a webpage).

%%javascript 
 console.log('hello world')

Running the above code in an .ipynb then check your dev tool logs.
In VSCode this can be found by navigating to help>toggle dev tools

Cell flags

Flags have to be on the first row of python cells with spaces between.

Ipynb Magic

Magic does not play nicely with cell flags but is supported

Here's Some Python Output

Missing: pygal, bokeh, holoviews, plotly, prophet, tensorflow, web components.

Ipython

Display Javascript

Using this method Javascript is persisted in the outputs of the cell and will be executed when the document is reloaded.

This text should be overwritten to show displaySetValue from above
This text should be overwritten to show displaySetValue from above

Information obtained from: Advanced Outputs

eval_js differs from display.Javascript because eval_js expressions are not persisted in the notebook document and will not be executed when the document is reloaded.

Display Html & Py Templating

import requests
 
 resp = requests.get('https://carlos-a-diez.com')
 
 from IPython.display import display, HTML
 
 display(HTML(resp.content.decode('utf-8')[:-4]))

Integrations

Altair / Vega-Embed

vega-embed

embed

hello-vega-embed

Folium / Leaflet

  1. Folium JavascriptLink

  2. Folium Adding Javascript

  3. Folium How to Use Custom Javascript

  4. Folium Custom HTML JS

  5. Folium Click Event

Dataplay

ObservableHQ

You've seen them with the diagrams at the intro!

pivottablejs

pivottablejs

MPLD3

The mpld3 project brings together Matplotlib, the popular Python-based graphing library, and D3js, the popular JavaScript library for creating interactive data visualizations for the web. The result is a simple API for exporting your matplotlib graphics to HTML code which can be used within the browser, within standard web pages, blogs, or tools such as the IPython notebook.

NVD3 python-nvd3

python-nvd3 homepage and docs

NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js offers you.

This will output the following HTML to render a live chart. The HTML could be stored into a HTML file, used in a Web application

Bokeh

MatPlotLib

networkx - Plotly

Network Graphs

Google Colabs

The output of each cell (while in colabs) is hosted in a separate sandboxed iframe without direct access to the contents of other cells, but they can create BroadcastChannels to communicate between cells on the same page.

This will execute and trigger in realtime in the converted HTML doc:

This will not run on start

This will execute on start (converted HTML doc) and any time you run the cell (in Colabs):