HTML elements and Jupyter notebook

Sometimes, we cleanse our data using a tool and then analyse in a different one and build an UI using yet again, another tool. Yes, all these tools are necessary and dependable based on your need ; but sometimes when you just want to show a little demo for something that you have built or there is a demand for a regular update for a project or you just want to fetch some of quick analysis for your team , you will probably want to take the shortest possible path to show the end result. For example, Python as a language is so powerful and flexible, and with enormous range of available libraries, I think it can be real handy to do all of the above ( Yes, even creating a website).

In this article, I am talking about some of the HTML components those you can just add to your Jupyter notebook which can make a vast difference to your internal demos and general discussions.

Markdowns : -

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. It is a whole concept and you can see this has been implemented in PHP, Python , Ruby etc. If you see there is a dropdown available in your Jupyter notebook where you can just chose 'markdown' option for a cell and in that particular cell if you just write your HTML tags normally, it will display them as they supposed to be rendered.

For example, I am writing a header here

see what I mean? below are some other simple HTML tags that you can render without effort :

• Markdown markup inside HTML blocks
• Elements with id/class attribute
• "Fenced code blocks" that span multiple lines of code
• Tables
• Definition lists
• Footnotes
• Abbreviations

Dropdowns and more : -

For my analysis, I needed a dropdown with all the unique values of a column ; with change of value in that dropdown a table and a graph should also change.

Simply,

from IPython.display import display, HTML

# add HTML week filter
import ipywidgets as widgets


d = widgets.Dropdown(options=((pd.to_datetime(Filtered_Data['Week']).drop_duplicates().sort_values(ascending=False))))
display(d)        

This will display something like this :

Now, for my filtered data table ( with the date I choose from the dropdown) , the code will be :

df_group= Filtered_Data[(pd.to_datetime(Filtered_Data['Week']))==d.label.strip()]        

,where I am just taking the string available in the dropdown value and matching with the column from my df. You can design Cascading dropdowns as well, using this method.

SVGs : -

Scalable Vector Graphics is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation.

SVGWrite is a Python library that supports SVG drawings in Jupyter Notebook. You can make as animated SVG graphs as you would normally make on a simple HTML page.

Here is an example:

#!pip install svgwrite
import svgwrite
from svgwrite import cm, mm   
from IPython.display import HTML        

def generate_svg_plot():  
    dwg = svgwrite.Drawing(size=(300, 300))
    dwg.add(dwg.circle(center=(150, 150), r=100, fill='blue'))
    return dwg.tostring()         

You can find more properties and examples here : https://svgwrite.readthedocs.io/en/stable/overview.html#graphical-elements

As a general purpose programming language, Python has obviously so many other elements and packages available that you can use in many ways.

You can build web sites or industrial robots or a game or an AI app and much more, all using the same core technology. Some of these pre-built packages do wonders for avoiding future headaches.

Happy Coding!