Accessing DOM In Jupyter Notebook

Why access DOM in Jupyter Notebook ?

Most of the time we use: matplotlib, seaborn, bokeh …etc to visually represent data . By using D3 you get an ultimate freedom of modification and customization with respect to your data visualization. Sometimes the unique visualization for your analytics might not be available in the graphing tools that you usually use. Hence D3 has a lot of examples which can be used by modifying it for your needs (custom visualization)

Jupyter NoteBook has a function that will give you access to the DOM.

from Python.core.display import HTML 

So how does it really work?

When you write html followed by a string in the Notebook it will interpret that string and put it into the DOM . The image below explains that:

Simple example that modifies the DOM is given below 

HTML('''

<style scoped>

.steely{

  color:steelblue,

  Font: 16px script,

}

</style>

<h1 class='steely'> Hello Dom </h1> 

''')

References:

https://medium.com/@stallonejacob/d3-in-juypter-notebook-685d6dca75c8