Notebook, HTML, SVG, Javascript, JSON

Links: notebook, html, PDF, python, slides, GitHub

Display SVG, JSON in a notebook.

from jyquickhelper import add_notebook_menu
add_notebook_menu()

HTML

%%html

<i>italic</i>
italic
from IPython.display import HTML
HTML("<b>some bold text</b>")
some bold text
from IPython.display import HTML, display
display(HTML("<b>some bold text</b>"))
some bold text

SVG

%%svg

<svg>
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #00ffff"/>
</svg>
../_images/notebook_html_svg_7_0.svg
from IPython.display import SVG
SVG("""<svg>
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>""")
../_images/notebook_html_svg_8_0.svg

Javascript

with magic commands

Usually, the javascript needs a zone in the page where the output will be inserted. That’s what the next cell does.

%%html

<div id="myfirstid"></div>

This cell will populate the zone just above. The rendering is not great when the notebook is converted into RST. Look into the HTML conversion.

%%javascript

var zone = document.getElementById("myfirstid");
var student = new Array();
student[1]=23;
student[2]=34;
student[3]=67;
student[4]=76;
student[5]=51;
student[6]=72;
zone.innerHTML = "<b>Student results</b>";
zone.innerHTML += "<ul>";
var numStudents=0;
var sum=0;
var ans=0;
for(var i in student){
    zone.innerHTML += "<li>Student "+i+": "+student[i]+"%";
    numStudents++;
    sum=sum+student[i];
}
zone.innerHTML += "</ul>";
ans=Math.round(sum/numStudents);
zone.innerHTML += "student average is "+ans+"%";
<IPython.core.display.Javascript object>

with customized objects

from IPython.display import display_html, display_javascript
import uuid

class MyCustomObject(object):
    def __init__(self, width="100%", height="100%", divid=None):
        self.uuid = divid if divid else str(uuid.uuid4())
        self.width = width
        self.height = height

    def _ipython_display_(self):
        display_html('<div id="{}" style="height: {}; width:{};"></div>'.format(self.uuid, self.width, self.height),
                     raw=True)
        js = """
            var zone = document.getElementById("myfirstid");
            var student = new Array();
            student[1]=23;
            student[2]=34;
            student[3]=67;
            student[4]=76;
            student[5]=51;
            student[6]=72;
            zone.innerHTML = "<b>Student results</b>";
            zone.innerHTML += "<ul>";
            var numStudents=0;
            var sum=0;
            var ans=0;
            for(var i in student){
                zone.innerHTML += "<li>Student "+i+": "+student[i]+"%";
                numStudents++;
                sum=sum+student[i];
            }
            zone.innerHTML += "</ul>";
            ans=Math.round(sum/numStudents);
            zone.innerHTML += "student average is "+ans+"%";
            """.replace("myfirstid", str(self.uuid))
        display_javascript(js, raw=True)
MyCustomObject()

JSON

Inspired from Pretty JSON Formatting in IPython Notebook. We use the trick described just above. The only addition is the use of an external library renderjson. The code is here : json_helper.py.

from jyquickhelper import JSONJS
JSONJS(dict(name="xavier", city="Paris", objs=[dict(number=10, street="River")]))