Before After Image in Plotly Dash

by
5/5 - (2 votes)

💡 This article will show you how to use the BeforeAfter image component in your Plotly Dash project.

Dash book author Ann just created the following stunning web project visualizing before/after galaxy images from the James Webb Space Telescope in a simple and straightforward Dash app using the BeforeAfter component of the dash-extensions library.

pip install dash-extensions

Before we dive into the code, here’s a screenshot of the stunning interactive dashboard visualization created in the project:

Feel free to visit the live app showing different exciting images from the Hubble and Webb telescopes here:

🌎 Interactive Live App: https://dash-webb-compare.herokuapp.com/

It’s fun to play with it for 5-minutes—the pics from the Universe are stunning! 🐍

You can find the source code here:

💻 Full Source Code: https://github.com/AnnMarieW/webb-compare

The code to produce this easy app can be packed in only ~40 lines Python!

I highlighted the necessary code to create the BeforeAfter component from the dash-extensions package:

from dash import Dash, html
from dash_extensions import BeforeAfter
import dash_mantine_components as dmc

app = Dash(__name__)

header = html.Div(
    [
        dmc.Title("James Webb Space Telescope", order=1),
        dmc.Text("First Images -- Before and After -- Hubble vs Webb"),
        dmc.Space(h="md"),
    ],
)


def make_before_after(before, after):
    return html.Div(
        [
            dmc.Space(h=40),
            dmc.Group(
                [dmc.Text("Hubble"), dmc.Text("Webb")],
                position="apart",
                style={"width": 1000},
            ),
            BeforeAfter(before=before, after=after, height=800, width=1000),
        ],
    )


tabs = dmc.Tabs(
    [
        dmc.Tab(make_before_after("/assets/webb_deep_field.jpg", "/assets/deep_field.jpg"), label="Galaxy Cluster SMACS 0723"),
        dmc.Tab(make_before_after("/assets/webb_stephans_quintet.jpg", "/assets/stephans_quintet.jpg"), label="Stephans Quintet"),
        dmc.Tab(make_before_after("assets/webb_carina.jpg", "/assets/carina.png"), label="Carina Nebula"),
        dmc.Tab(make_before_after("assets/webb_southern_nebula.jpg", "assets/southern_nebula.jpg"), label="Southern Ring Nebula"),
    ],
)

app.layout = dmc.MantineProvider(
    dmc.Container([header, tabs]), theme={"colorScheme": "dark"}, withGlobalStyles=True
)

if __name__ == "__main__":
    app.run()

It makes use of the BeforeAfter component and the dash_mantine_components from Plotly Dash.

Adam’s video greatly explains the Before After Image Slider — feel free to watch it and leave a like in the video for his effort educating the Dash community for free with outstanding content:

Before After Image Slider - Dash Component

You can find a tutorial on how to install dash here.

You can find our full book on Python Dash here:

Book Python Dash

If you’re interested in learning more about how to create beautiful dashboard applications in Python, check out our new book Python Dash.

You’ve seen dashboards before; think election result visualizations you can update in real-time, or population maps you can filter by demographic.

With the Python Dash library, you’ll create analytic dashboards that present data in effective, usable, elegant ways in just a few lines of code.

Get the book on NoStarch or Amazon!

Related Tutorials