Exploring the Best Performing Marvel Movies with Dash and Plotly

Who doesn't love Marvel movies, right? They have captured the hearts of people all over the world, with their captivating storylines, dynamic characters, and of course, epic battle scenes. But have you ever wondered which Marvel movie has performed the best at the box office? Well, wonder no more, because I've got you covered! In this post, we'll be diving into the world of Marvel movies and analyzing their box office performance using a cool visualization created with Python's Dash library.

Check out the final dashboard! You can filter the data and compare things like the critic score and % budget recovered, the size of the bubble indicates box office performance - a bigger bubble means more money.

But let's not get ahead of ourselves, there's so much more to talk about.

We've got a CSV file that has all the juicy details about how much money each Marvel movie made, how much it cost to make, and what critics thought about it. Example of the table below.

film	category	worldwide gross ($m)	​critics % score
Ant-Man & The Wasp	Ant-Man	623	87%
Black Panther	Black Panther	1336	96%

First things first, we need to prep our dataset. We'll calculate the '% budget recovered' column and strip the percentage sign from the 'critics % score' column. Plus, we'll define the category colors and categories that we'll be using for our chart.

def preprocess_data():
    df = pd.read_csv('marvel.csv')

    # Calculate the '% budget recovered' column
    df['percent budget recovered'] = (
        df['worldwide gross ($m)'] / df['budget']) * 100

    # Remove the percentage sign and convert 'critics % score' column to numeric values
    df['critics percent score'] = pd.to_numeric(
        df['critics % score'].str.rstrip('%'))

    return df

df = preprocess_data()

Next, let's set up the layout of the dashboard. We'll create a fancy header with a title and a brief description of what we're doing. Then, we'll make some clickable buttons that'll allow us to filter the data by category. And of course, we can't forget about the bubble chart itself – we'll need to make room for that too!

app.layout = html.Div([
    html.Div([
        html.H1("Which is The Best Performing Marvel Movie?",
                className='mb-2 text-center title'),
        html.P("use the legend to filter",
               className='mb-4 text-center description'),
    ], className='header'),
    html.Div([
        html.Button(category,
                    id=f'button-{category}',
                    n_clicks=0,
                    className=f'btn btn-outline-primary mr-1 category-btn btn-category-{category.replace(" ", "-")}')
        for category in categories
    ] + [html.Button("Reset Filter",  # Add this line
                     id="reset-button",
                     n_clicks=0,
                     className="btn btn-outline-danger ml-2 reset-btn")],  # Add this line
        className='mb-4 d-flex justify-content-center'),
    html.Div(
        dcc.Graph(id='bubble-chart', config={'displayModeBar': False}),
        style={'border': 'none', 'background-color': 'rgba(0,0,0,0)'}
    ),
    dcc.Store(id='active-category', storage_type='memory'),
    html.Div(id='background-click', n_clicks=0, style={
        'position': 'fixed', 'top': 0, 'left': 0, 'width': '100%', 'height': '100%', 'zIndex': -1})
], className='wrapper')

Next, we define a callback function that updates the bubble chart based on the selected category. It takes the number of clicks for each button as input and outputs the updated bubble chart and the active category. If no category is selected, the function defaults to showing all movies.

To create the bubble chart, we filter the data by the active category and use Plotly to create a fully interactive chart. We customize the hover template of the chart to display the movie title, critical reception, budget recovery, and worldwide gross of each movie. We also add a logo to the chart to give it a professional look.

@app.callback(
    Output('bubble-chart', 'figure'),
    Output('active-category', 'data'),
    [Input(f'button-{category}', 'n_clicks')
     for category in categories] + [Input("reset-button", "n_clicks")],
    State('active-category', 'data')
)
def update_bubble_chart(*n_clicks_and_active_category):
    n_clicks = n_clicks_and_active_category[:-2]
    reset_clicks = n_clicks_and_active_category[-2]
    active_category = n_clicks_and_active_category[-1]

    # Get the button_ids from the categories
    button_ids = [f'button-{category}' for category in categories]

    # Find the clicked button
    clicked_button_idx = None
    max_clicks = -1
    for i, n_click in enumerate(n_clicks):
        if n_click > max_clicks:
            clicked_button_idx = i
            max_clicks = n_click

    if reset_clicks > 0 and active_category is not None:
        # Reset the filter
        clicked_category = None
        active_category = None
    elif clicked_button_idx is not None and max_clicks > 0:
        clicked_category = button_ids[clicked_button_idx].replace(
            "button-", "")
    else:
        clicked_category = active_category

    # Filter the dataframe based on the clicked category, if any
    if clicked_category is not None:
        filtered_df = df[df['category'] ==
                         clicked_category].reset_index(drop=True)
    else:
        filtered_df = df

Wanna check out the full code? It's all up on my GitHub!

So here's the answer you've all been waiting for - Spider-Man, Avengers, and Black Panther were the top dogs of the Marvel Studios! These movies made bank, like seriously, they more than justified the budget spent on them and they got some pretty sick reviews from the critics too!