💡 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!