.. _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 += "
";
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