.. _notebookhtmlsvgrst: ===================================== Notebook, HTML, SVG, Javascript, JSON ===================================== .. only:: html **Links:** :download:`notebook `, :downloadlink:`html `, :download:`PDF `, :download:`python `, :downloadlink:`slides `, :githublink:`GitHub|_doc/notebooks/notebook_html_svg.ipynb|*` Display SVG, JSON in a notebook. .. code:: ipython3 from jyquickhelper import add_notebook_menu add_notebook_menu() .. contents:: :local: HTML ---- .. code:: ipython3 %%html italic .. raw:: html italic .. code:: ipython3 from IPython.display import HTML HTML("some bold text") .. raw:: html some bold text .. code:: ipython3 from IPython.display import HTML, display display(HTML("some bold text")) .. raw:: html some bold text SVG --- - `SVG language `__ .. code:: ipython3 %%svg .. image:: notebook_html_svg_7_0.svg .. code:: ipython3 from IPython.display import SVG SVG(""" """) .. image:: 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. .. code:: ipython3 %%html
.. raw:: html
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. .. code:: javascript %%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 = "Student results"; zone.innerHTML += "
    "; var numStudents=0; var sum=0; var ans=0; for(var i in student){ zone.innerHTML += "
  • Student "+i+": "+student[i]+"%"; numStudents++; sum=sum+student[i]; } zone.innerHTML += "
"; ans=Math.round(sum/numStudents); zone.innerHTML += "student average is "+ans+"%"; .. parsed-literal:: with customized objects ~~~~~~~~~~~~~~~~~~~~~~~ .. code:: ipython3 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('
'.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 = "Student results"; zone.innerHTML += "
    "; var numStudents=0; var sum=0; var ans=0; for(var i in student){ zone.innerHTML += "
  • Student "+i+": "+student[i]+"%"; numStudents++; sum=sum+student[i]; } zone.innerHTML += "
"; ans=Math.round(sum/numStudents); zone.innerHTML += "student average is "+ans+"%"; """.replace("myfirstid", str(self.uuid)) display_javascript(js, raw=True) .. code:: ipython3 MyCustomObject() .. raw:: html
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 `__. .. code:: ipython3 from jyquickhelper import JSONJS JSONJS(dict(name="xavier", city="Paris", objs=[dict(number=10, street="River")])) .. raw:: html