import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
Display SVG, JSON in a notebook.
from jyquickhelper import add_notebook_menu
add_notebook_menu()
%%html
<i>italic</i>
from IPython.display import HTML
HTML("<b>some bold text</b>")
from IPython.display import HTML, display
display(HTML("<b>some bold text</b>"))
%%svg
<svg>
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #00ffff"/>
</svg>
from IPython.display import SVG
SVG("""<svg>
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>""")
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+"%";
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()
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")]))