Scrollable Window in Jupyter


Are you working in Jupyter Notebook and using DataFrames? Sometimes you want to display hundreds or thousands of rows of data but you don’t want to take up that much screen space. Try this technique. This function, create_scrollable_table, is easy to use and creates a window in the browser that is scrollable. You can adjust the size of the window by setting the pixels. It’s set to 180px in the code below. I have an example of how I’ve used it when I was working with the IMDB database, which has a few million rows of data in it when you first load it. This is great for exploratory data analysis on a single column. For example, you may want to see a list of all the different values in a column along with the frequency of those values occurring.

# create code for scrollable window.
from IPython.display import display, HTML # for Scrollable Window
# function to create scrollable table within a small window
from IPython.display import display, HTML
def create_scrollable_table(df, table_id, title):
    html = f'<h3>{title}</h3>'
    html += f'<div id="{table_id}" style="height:180px; overflow:auto;">'
    html += df.to_html()
    html += '<div>'
    return html
# Using the scrollable window for DataFrame called df - here is the example code: 
# Note: substitute your DataFrame name with the df in the above code.
#
# html_numerical = create_scrollable_table(df, 'd', 'Dataset in a Scrollable Window')
# display(HTML(html_numerical))

You can adjust the vertical size of the window by increasing or decreasing the number of pixels in the function. It’s currently set to 180.

IMDB Example

Here is an example of how to use the scrollable window with a dataset. Our dataset is a DataFrame in pandas that is called df_movies and has a column called year. We have a list of movies, each with a value for year, representing the year it was released. We want to know the frequency of year year. We will use groupby().

df2 = pd.DataFrame(df_movies.groupby(['year'])['year'].count())
df2.columns.values[0] = "frequency"
df3 = df2.reset_index()
df3.index += 1
html_numerical = create_scrollable_table(df3, 'df_movies', 'year and frequency of the year')
display(HTML(html_numerical))

Scrollable Window in Jupyter

The sequence of numbers (1, 2, 3, 4 and so on) on the left side are not in the database. They were created for your convenience by the reset_index() command.

Leave a Reply