[Tut] Before After Image in Plotly Dash

[xSicKxBot]

Before After Image in Plotly Dash

5/5 – (1 vote)

This article will show you how to use the

Code:

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

Code:

dash-extensions

library.

Code:

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

Code:

BeforeAfter

component from the

Code:

dash-extensions

package:

Code:

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

Code:

BeforeAfter

component and the

Code:

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:



You can find a tutorial on how toinstall 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!