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!

Problem Formulation and Solution Overview

In this article, you’ll learn how to increment a dictionary value in Python.

To make it more fun, we have the following running scenario:

Trinity Bank keeps track of its latest mortgage rates in a Dictionary format. Recently there has been a steady increase in rates. How would Trinity Bank increment/increase the Dictionary value of a selected rate?

Question: How would we write code to increment a Dictionary value in Python?

We can accomplish this task by one of the following options:

• Method 1: Use Dictionary Key Name
• Method 2: Use Dictionary.get()
• Method 3: Use Dictionary.update()
• Method 4: Use Unpacking using the * Operator
• Method 5: Use Dictionary Comprehension

Method 1: Use Dictionary Key Name

This method passes an existing Dictionary Key Name to access and increment the appropriate Value.

mtg_rates['30-Year-Fixed'] += 1

print(mtg_rates['30-Year-Fixed'])

In this example, the 30-Year-Fixed mortgage rate is referenced by name (mtg_rates['30-Year-Fixed']) and its value is incremented by one (1).

Then, this updated value is saved back to mtg_rates['30-Year-Fixed'] and output to the terminal.

Method 2: Use Dictionary.get()

This method uses the Dictionary.get() method and passes a Dictionary Key as an argument to retrieve and increment the corresponding Value.

mtg_rates['20-Year-Fixed'] = mtg_rates.get('20-Year-Fixed') + 2

print(mtg_rates['20-Year-Fixed'])

In this example, the 20 Year Fixed mortgage rate is referenced and accessed using (mtg_rates.get('20-Year-Fixed')). This value is then incremented by two (2).

Then, this updated value is saved back to mtg_rates['20-Year-Fixed'] and output to the terminal.

Method 3: Use Dictionary.update()

This method uses Dictionary.update() to reference the appropriate Key and increment the Value.

new_rate = mtg_rates['10-Year-Variable'] + 3

mtg_rates.update({'10-Year-Variable': new_rate})

print(mtg_rates['10-Year-Variable'])

In this example, the current value of a 10 Year Variable mortgage rate is retrieved, incremented by three (3) and saved to new_rate.

Next, the appropriate Key for the key:value pair is accessed, and the Value is updated to reflect the contents of new_rate and output to the terminal.

Method 4: Use Unpacking

This method uses Unpacking to increment the Value of a key:value pair.

mtg_rates = {**mtg_rates, '7-Year-Variable': 9.011}

print(mtg_rates)

Above, accesses the 7 Year Variable mortgage rate, increments the rate to the amount indicated (9.011), and outputs it to the terminal.

Method 5: Use Dictionary Comprehension

This method increments all Mortgage Rates in one fell swoop using Dictionary Comprehension.

new_rates = dict(((key, round(value*1.10, 3)) for key, value in mtg_rates.items()))

print(new_rates)

Above, accesses each mortgage rate in the mtg_rates Dictionary and increments the rate by 1.10. Then, round() is called to round the results down to three (3) decimal places. The result saves to new_rates and output to the terminal.

Summary

These methods of incrementing a Dictionary Value should give you enough information to select the best one for your coding requirements.

Good Luck & Happy Coding!

Regex Humor