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:
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!
https://www.sickgaming.net/blog/2022/07/...otly-dash/