Jupyter Notebook Customization and PandasGUI

Jupyter notebooks custom.js and custom.css are the two entry points for persistently customizing the notebook's user interface. They can be created from scratch or installed separately or together with the rest of my configuration from my dotfiles repository. Notebooks will be displayed in dark mode, with progressive numbers for each h1/h2 heading and the possibility to update the notebook's table of contents with a keyboard shortcut.

PandasGUI

PandasGUI is a pure python graphical interface for displaying Pandas DataFrames, a tool particularly useful for exploring datasets.

By modifying the default settings of the Pandas GUI application, graphs generated with PandasGUI can be also displayed inside the notebook. The user's defined settings are included in the following preferences.json file:

{
    "theme": "dark",
    "editable": true,
    "auto_finish": true,
    "refresh_statistics": true,
    "render_mode": "svg",
    "aggregation": "mean",
    "title_format": "<h2>{name}:</h2> {title_columns}{title_dimensions}{names}{title_y}{title_z}{over_by}{title_x} {selection}<br><sub>{groupings}{filters} {title_trendline}</sub>"
}

Note that it modifies the value render_mode (svg or webgl) and theme (dark) compared to the default settings.

A graph created with PandasGUI can then be displayed inside the notebook by copying and pasting the generated python code after pressing the code export button, as shown in the video below.

Figure's caption

A left-side caption taken from a figure's alt text can be displayed conveniently with a simple Jquery (hover) method included in the custom.js file, as shown below.

    $('img').hover(function(){
        // Hover on
        var alt = $(this).attr('alt')
        if(typeof alt !== "undefined")
        {
            if( $('#md_img_caption').length)        
            {
                $(this).next("span").show();
            } else {
                $("<span id='md_img_caption'>"+alt+"</span>").insertAfter($(this));
                $(this).next("span").show();
            }
        }     
    },function(){
        //Hover out
       $('span[id^="md_img_caption"]').remove()
    });

The notebook in the video can be downloaded here.