Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center output (plots) in the notebook

I just upgraded to IPython 1.0 and the new notebook interface performs really well. On my screen it now has a default width of about 50% of the page which improves readability. However, i often work with long timeseries which i prefer to display as wide as possible.

Very wide pictures will only extend further to the right. Is there a way to display output wider then the default to expand in a centered matter?

The attached picture shows a normal inline plot in the first cell, which is less wide then the default notebook width. The second plot is wider and expands to the right. This leaves about the left quarter of my screen unused.

enter image description here

like image 425
Rutger Kassies Avatar asked Aug 22 '13 12:08

Rutger Kassies


People also ask

How do you center a plot in Jupyter notebook?

The Plots in the Jupyter Notebook can be Centered by Using HTML CSS Code Snippet. The Code for aligning the plots at center is shown below, by using this Code Snippet all the plots can be centered in the Jupyter Notebook.


2 Answers

What I do is the following. This might help, but it also creates a beautifully rendered notebook.

Have a look at this online book about Bayesian Statistics. This is really nice.

They load a custom CSS at the end of the notebook using this code:

from IPython.core.display import HTML
def css_styling():
    styles = open("custom.css", "r").read() #or edit path to custom.css
    return HTML(styles)
css_styling()

You can download this custom CSS from the books github repo HERE: Drop it in the notebook folder and call the code above

Also note their nice matplotlibrc file. You can change the look and feel of the plots calling this code. Call this early in the notebook and all matplotlib plots will look pretty cool.

    import json
    s = json.load( open("bmh_matplotlibrc.json") )  #edit path to json file
    matplotlib.rcParams.update(s)

Download the JSON file HERE from GITHUB

like image 129
Tooblippe Avatar answered Oct 06 '22 07:10

Tooblippe


The Plots in the Jupyter Notebook can be Centered by Using HTML CSS Code Snippet.

The Code for aligning the plots at center is shown below, by using this Code Snippet all the plots can be centered in the Jupyter Notebook.

from IPython.core.display import HTML as Center

Center(""" <style>
.output_png {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style> """)
  • Make Sure you run this Code Snippet in Code Cell, not in Markdown Cell.

enter image description here

like image 36
Kranthi Avatar answered Oct 06 '22 09:10

Kranthi