Notebook customization and PandasGUI
Jupyter Notebook custom.js and custom.css¶
In the new version of Jupyter Notebook (version 7 and above), the handling of custom.js and custom.css has changed. Previously, you could use these files to customize the appearance and behavior of your notebooks. However, with the update to Jupyter Notebook 7, these files no longer work as they did in earlier versions.
For custom.css, you can still apply custom styles, but the process is slightly different. You need to place your custom.css file in the Jupyter configuration directory, typically found at ~/.jupyter/custom/.
As for custom.js, it is no longer supported in the same way. The new version of Jupyter Notebook uses a different JavaScript implementation, which means custom JavaScript modifications need to be handled differently.
Custom.js and custom.css are the two entry points for persistently customizing the notebook's user interface. They are located in the user's home directory .jupyter/custom folder and part of my dotfile repository.
Generate table of contents¶
Press t and c in command mode to update the table of contents below.
PandasGUI¶
Pandasgui provides a simple GUI for dataframe objects.
PandasGUI default settings (JSON)¶
from pandasgui import store
store.DEFAULT_SETTINGS
It's possible to set a new JSON file with the user's preferences:
https://gitlab.com/Sevepy/.dotfiles/-/raw/master/.jupyter/custom/preferences.json
# this variable must be instantiated -> BEFORE <- importing the module
store.LOCAL_DATA_DIR = 'C:\\Users\\Seve\\.jupyter\\custom'
import pandas as pd
from pandasgui import show
An example dataset:
df = pd.read_csv("https://tessarinseve.pythonanywhere.com/staticweb/dataset_1000.csv",index_col=0)
df.head
show(df)
from pandasgui.store import SETTINGS_STORE
Copy and paste "code export" and remove the last two lines as follows:
import plotly.express as px
from pandasgui import show
if None is not None:
df = df.dropna(subset=[None])
fig = px.scatter(data_frame=df, x='Col2', y='Col1', color='Col5', symbol=
None, size=None, trendline=None, marginal_x=None, marginal_y=None,
facet_row=None, facet_col=None, render_mode=SETTINGS_STORE.render_mode.
value, )
fig
Figure's Caption¶
Use a figure alt text to generate a caption.
%%html
<style>
#md_img_caption {
position: relative;
z-index: 1000;
display: none;
background: blue;
color: white;
padding: 5px;
}
</style>