Swipe#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn
import pandas as pd

pn.extension()

The Swipe layout enables you to quickly compare two panels laid out on top of each other with a part of the before panel shown on one side of a slider and a part of the after panel shown on the other side.

Parameters:#

objects (list): The before and after components to lay out.
value (int): The percentage of the after panel shown. Default is 50.

Styling-related parameters:

slider_width (int): The width of the slider in pixels. Default is 12.
slider_color (str): The color of the slider. Default is ‘black’.

For further layout and styling-related parameters see the Control the size, Align Content and Style tutorials.

The Swipe layout accepts any two objects, which must have identical sizing options to work as intended.

Here we compare two images of mean surface temperatures in 1945-1949 and temperatures between 2015-2019:

gis_1945 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_1945-1949.png'
gis_2015 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_2015-2019.png'

pn.Swipe(gis_1945, gis_2015)

The layout can compare any type of component, e.g. here we will compare two violin plots:

import hvplot.pandas

penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')

pn.Swipe(
    penguins[penguins.species=='Chinstrap'].hvplot.violin('bill_length_mm', color='#00cde1'),
    penguins[penguins.species=='Adelie'].hvplot.violin('bill_length_mm', color='#cd0000'),
    value=51
)

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).