Use These Tips Next Time you create a Jupyter Notebook

In this article, we will take a look at some of the ways to make a Jupyter Notebook look more appealing.

6 min readNov 30, 2022

INTRODUCTION

Which one do you like better?

Below are two images. Take a look at both of them and evaluate them for a moment to decide which one is more appealing to look at.

OR

It’s quite obvious the second image is more appealing since there is more information using images and mathematical formulas that have been given out.

AGENDA

Let’s lay out the agenda for the article that we are going to be going through:-

HTML & CSS
Images
GIFs
Interactive Plots
LaTeX
Alert Blocks
Table Of Contents

HTML & CSS

HTML (HyperText Markup Language) is a programming language used to structure a web page and its content. The HTML and CSS support has been extended recently to Python markdown cells and it’s a fun way to make notebooks look not so dull.

The way images have a certain resolution, the way text looks on a web page is controlled by HTML, and the structure of the page is dictated by tags some of which are mentioned below:-

For example:

If the below line of code was to be written, it will center align the text and since its within the h1 tag it will be considered a Main heading which is what Google will use while displaying the website higher or lower in the Google Search results

<h1 align="center"><font color='green'>Header 1</font></h1>
<h2 align="center"> <font color='gray'>Header 2</font></h2>
<h3 align="center"> <font color='blue'>Header 3</font></h3>

The above code is going to look something like this when executed:

Moving over to CSS, it’s the language we use to style a Web page. CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on the screen, on paper, or in other media. It can control the layout of multiple web pages all at once and the external stylesheets are stored in CSS files.

CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes.

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it became a nightmare for web developers. The development of large websites, where fonts & color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page which saved a lot of time for the developers.

IMAGES

They say “A picture is worth a thousand images”. We human beings are visual creatures and our brains are wired in such a way that an image speaks more to us than a line would.

With HTML language, we can also add images, add alternative text, and manipulate its height or width. The HTML <img> tag is used to embed an image in a web page. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

Below should be the code to display an image in the center which is going to take your Jupyter Notebook to a whole other level.

<center>
<img src="https://www.insaid.co/wp-content/uploads/2021/05/insaid-text-logo-2x.png" width=600>
</center>

GIFs

Gifs work just like images. Paste that gif URL inside the `<img>` tag to display it! This would be great since there are so many conceptual diagrams that can be used like the below one.

<center>
<img src="https://media0.giphy.com/media/xTk9ZE94CfWTe2fzMI/giphy.gif?cid=790b761178cfaf4c9228f8bf08ef264f23e0d4cc35224f35&rid=giphy.gif&ct=g" width=300>
</center>

Oops, Wrong GIF.

Well, the below GIF depicts how gradient descent happens and gifs help us visualize this so easily which makes it a must in your arsenal.

INTERACTIVE PLOTS

The great thing about interactive plots is they are something that a user can interact with. The idea is to create charts and graphs which the end-user will be able to personally explore and adjust and not just read passively.

It Offers tools for engaging with the information shown in real time, allowing the end user to see more details, and generate new insights. The Top Library for that would be Plotly

LaTeX

If you are not familiar with LaTeX, it is a high-quality typesetting system with features designed for the production of technical & scientific documentation and is a De-facto standard for the communication and publication of scientific documents.

With the help of LaTeX, you can write a formula like the one below which makes the reading experience amazing.

ALERT BLOCKS

Alert blocks can be thought of as text or a pop-up that is used for different purposes, like displaying information, show warnings, or alerting users.

Another thing that you can probably add to your notebook is the Table Of Contents. It basically is a list of headings that tells the reader what the flow of the notebook is going to be.

With the help of HTML’s anchor tag, you can link the Table of Contents to the subsection so that when a reader clicks on that heading in the table he lands on the section.

CONCLUSION

We have learned how to embed images in Jupyter notebook and got a better understanding of how to use HTML and CSS for improving the overall look of our notebook.
We now have a better understanding of using interactive plots and writing documentation using Plotly and LaTeX respectively.
A Table of Contents is a list of headings that tells the reader what the flow of the notebook is going to be and that’s something we now understand better.
Up Next, I’ll be covering some visualization libraries that are easy to use and offers great visualization with less code.
If you liked the tips and they proved to be helpful to you, I’d appreciate it if you can give the article a clap and follow me for more upcoming Data Science, Machine Learning, and Artificial Intelligence articles.

Final Thoughts and Closing Comments

There are some vital points many people fail to understand while they pursue their Data Science or AI journey. If you are one of them and looking for a way to counterbalance these cons, check out the certification programs provided by INSAID on their website. If you liked this article, I recommend you go with the Global Certificate in Data Science & AI because this one will cover your foundations, machine learning algorithms, and deep neural networks (basic to advance).