DEV Community: Igor L.R. Azevedo

Dash: An Intriguing Framework, to Say the Least

Igor L.R. Azevedo — Tue, 08 Oct 2024 10:39:15 +0000

Code: https://github.com/igor17400/sakura-time-series

As a data scientist, you’ve probably had some pretty awesome ideas, and at your best, turned them into cool animations using Python libraries in Jupyter notebooks. But when you tried showing them to someone—like your parents—they might have just seen a bunch of colorful graphs in some weird tool called "Jupyter Notebook." To them, it’s just a fancy word for a bunch of confusing charts! Okay, maybe it’s just me… Either way, I’ve been there, and I hope you haven’t!

But, jokes aside, I think you see where I’m going. It’d be great to share our experiments and findings with people who’d be interested but don’t have a clue where to start with Jupyter Notebooks. Of course, you could use something like Power BI… but come on, did you really spend all that time learning Python just to end up back in Excel-land? 😂 I know a lot of people have faced that situation, as the meme below perfectly captures!

Over the past 5 years or so, there’s been a surge of Python visualization tools. I’ve tried a couple, like Dash and Streamlit. Personally, I like Dash more, which is why I’m putting together this tutorial. (And no, I’m not getting paid to say this! 😄) This isn’t an ad—just me sharing my experience and the ups and downs I’ve had using this framework.

Introduction

Taking the first step is always tough—especially when you're staring at all those shiny graphs and battling the urge to make everything work right now. Trust me, I’m feeling the same way while writing this blog. But before jumping in (or more like, before taking the "zero step"—we’re computer scientists, after all), start by creating a GitHub repository. I’m assuming your goal is to build this project for more than just yourself or to add it to your resume, right?

For example, I wanted to make a tutorial that teaches the basics of time series prediction, so I put together a guide, which I definitely recommend checking out! I created a repository for it called sakura-time-series. Once you’ve got your repository set up (and if you’re not familiar with this whole “GitHub magic,” check out this tutorial), clone it so you have a local folder to work with.

Next up is setting up your virtual environment. I’ll stick to Python’s virtual environment for this guide, but if you’re more comfortable with conda, feel free to go with that!

python3 -m venv venv

After running the command above, you’ll see a folder named venv, which holds everything for your virtual environment. To activate it, use source venv/bin/activate. Now that it’s up and running, it’s time to install the libraries you’ll need. I’ve listed a few general ones to get started, but feel free to add anything else you might want!

pip install pandas numpy matplotlib plotly dash dash_bootstrap_components

Initially, I had a bunch of Python and Jupyter Notebook files filled with visualizations. But, as I mentioned earlier, I want to make these more accessible so that even non-programmers can check them out. With that goal in mind, let’s create our first Dash app. We’ll start by creating a file named app.py, and inside it, we’ll add some basic code to get a feel for how it works. Once we’re comfortable with the setup, we’ll dive into more advanced features!

from dash import Dash, html

app = Dash()

app.layout = [html.Div(children='Hello World')]

if __name__ == '__main__':
    app.run(debug=True)

To run our Dash app, we need to execute the file that has our app.run() method. Keep this in mind because as our project grows, things will get more complex and organized. For now, just run python app.py and then go to http://localhost:8050/ in your browser to see it in action! You should see a very simple "Hello World" message, just like the image below.

Understanding the Structure of the Dash Framework

Dash is a powerful Python framework specifically designed for creating interactive web applications. It’s built on top of Flask, Plotly, and React.js, making it an ideal tool for turning your data and visualizations into fully interactive, web-based dashboards.

The structure of a Dash app generally revolves around three main components:

Layout: This is where you define the visual components of your app, such as buttons, sliders, dropdown menus, graphs, and other HTML elements. Each component is a building block of your app’s interface, organized in a hierarchical structure using Dash’s html and dcc (Dash Core Components) modules.
Callbacks: Callbacks are the heart of Dash’s interactivity. They allow you to link user inputs (like selecting a dropdown option or clicking a button) to updates in your app’s layout or data. In other words, they handle the app’s dynamic behavior and make it responsive.
Server Configuration: Dash apps use a Flask server under the hood, which means you can integrate the same server features such as routing, middleware, or authentication, if needed. This part typically involves initializing the app and using app.run_server() to start it.

A typical Dash project usually has a structure like:

sakura-time-series/
│
├── app.py                # Main app file
├── assets/               # Contains CSS and JS files for styling
├── data/                 # Directory for datasets
└── components/           # (Optional) Additional components or pages

The app.py file is usually where the main logic goes. It will include the layout definition, any callbacks you want to add, and the code to run the server. As your project grows, you might want to split your code into separate modules for better organization, which we'll do in a moment.

Now that we understand the basics of project organization, let’s set up our folder structure by creating the assets, data, and components directories. I’ll show you what files to add inside each folder to get started.

Since I’m working with a previous time series project, I already have the data files. If you want to use the same data, feel free to clone the sakura-time-series repository.

git clone git@github.com:igor17400/sakura-time-series.git

Here's the recommended structure:

sakura-time-series/
│
├── README.md
├── requirements.txt
├── data/
│   ├── sakura_first_bloom_dates.csv
│   └── sakura_full_bloom_dates.csv
│
├── dash-app/                        # Directory for the Dash project
│   ├── app.py                       # Main Dash application file
│   ├── assets/                      # Contains custom CSS and JS files
│   │   └── style.css                # Example CSS file
│   ├── data/                        # Dash-specific data folder
│   │   └── dash_data.csv            # Placeholder for additional datasets
│   └── components/                  # Contains layout and callbacks
│       ├── layout.py                # Organizes the layout structure
│       └── callbacks.py             # Contains Dash callbacks
| .
| .
| .
|
|-- other folders...

In my case, having these directories makes sense, but feel free to organize your project in a way that suits you best. Just make sure to create a dedicated folder where all your Dash files will be grouped together, similar to my dash-app folder.

Folder Overview:

dash-app/ - Main folder for all Dash-related files.
dash-app/assets/ - Contains CSS and JavaScript files for styling and any additional custom behavior.
dash-app/data/ - (Optional) Use this folder if you want to keep Dash-specific datasets separate from the main project data.
dash-app/components/ - Useful for breaking down the app into separate layout and callback files for better organization.

Project Files

1. Create `dash-app/assets/style.css`

This file will hold custom CSS styles to make our visualization a bit more polished. Here’s a simple styling example:

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
}

h1 {
    color: #FF69B4;
    text-align: center;
}

.graph-title {
    text-align: center;
    margin-top: 10px;
    color: #333;
}

.container {
    width: 80%;
    margin: auto;
}

2. Create dash-app/components/layout.py

The layout.py file defines the layout of our Dash app
Create a new file named layout.py inside the components folder and add the following code:

from dash import html, dcc
import pandas as pd
import plotly.express as px

# Load data from the CSV file
df = pd.read_csv('../../data/sakura_first_bloom_dates.csv')

# Convert the "First_Bloom" column to datetime
df['First_Bloom'] = pd.to_datetime(df['First_Bloom'] + " " + df['Year'].astype(str))

# Create a line chart using Plotly Express
fig = px.line(df, x='Year', y='First_Bloom', markers=True, title="Sakura First Bloom Dates in Kyoto")

# Define the layout of the app
def create_layout():
    return html.Div(
        className="container",
        children=[
            html.H1("Sakura Time Series Dashboard"),
            html.Div(
                className="graph-title",
                children=[
                    html.H2("First Bloom Dates for Sakura in Kyoto"),
                    dcc.Graph(
                        id='bloom-line-chart',
                        figure=fig
                    )
                ]
            )
        ]
    )

3. Create `dash-app/components/callbacks.py`

This file will be for any future interactive features. For now, we’ll keep it simple with a placeholder function:

def register_callbacks(app):
    pass  # This will hold callback functions for interactive elements later

4. Modify `dash-app/app.py`

Finally, let's modify our app.py file to combine everything. Add the following code:

from dash import Dash
from components.layout import create_layout
from components.callbacks import register_callbacks

# Initialize the Dash app
app = Dash(__name__, assets_folder='assets')

# Set the layout for the app
app.layout = create_layout()

# Register callbacks (if any)
register_callbacks(app)

# Run the server
if __name__ == '__main__':
    app.run_server(debug=True)

5. Run Your Dash App:

Once all files are in place, navigate to the dash-app folder and run: python app.py.
Open your web browser and go to http://localhost:8050/. You should see a simple dashboard showing a line chart of Sakura bloom dates in Kyoto over the years.

6. Breakdown of the Code:

layout.py: This file creates the main layout of the app using Plotly’s px.line for a time series visualization. It reads from sakura_first_bloom_dates.csv, processes the date column, and plots a line chart.
style.css: Provides custom styling to enhance the app’s appearance, changing font styles and adding margins for better spacing.
app.py: Ties everything together by setting up the app layout and starting the server.

7. Visual Output:

Your Dash app should display something similar to the image below.

Creating interactive HTML components (Dropdown)

The real advantage of using Dash isn’t just about displaying static graphs—you could easily export your Jupyter Notebook to a PDF and share it if that’s all you need. The power of Dash lies in its ability to create complex, interactive processes that allow users to explore and customize visualizations dynamically.

To showcase this interactivity, let’s start by adding a dropdown menu that enables users to select a Japanese city and view its corresponding first bloom dates over time.

Code Implementation:

1. Modify the `layout.py` file in `dash-app/components/`:

Replace the previous content of layout.py with the following code to add a dropdown menu and interactive graph:

from dash import html, dcc
import pandas as pd
import plotly.graph_objs as go

# Load the Sakura bloom data
sakura_first_bloom = pd.read_csv('../data/sakura_first_bloom_dates.csv')

# Extract the list of unique cities
cities = sakura_first_bloom['Site Name'].unique()

# Define the layout for the Dash app
def create_layout():
    return html.Div(
        className="container",
        children=[
            html.H1("Sakura Time Series Dashboard"),
            html.Div([
                html.Label("Select a City:", style={'fontWeight': 'bold'}),
                dcc.Dropdown(
                    id='city-dropdown',
                    options=[{'label': city, 'value': city} for city in cities],
                    value='Kyoto'  # Default value
                ),
            ], style={'width': '50%', 'margin': 'auto'}),

            dcc.Graph(id='city-bloom-graph'),  # Placeholder for the dynamic graph

            html.P("Select a city from the dropdown to see its first bloom dates over time.",
                   style={'fontStyle': 'italic', 'textAlign': 'center'})
        ]
    )

2. Add the interactive callbacks to `callbacks.py`:

Modify the callbacks.py file inside dash-app/components/ to define how the dropdown selection changes the graph display:

from dash import Input, Output
import pandas as pd
import plotly.graph_objs as go

# Load the data again
sakura_first_bloom = pd.read_csv('../data/sakura_first_bloom_dates.csv')

# Register the callback function
def register_callbacks(app):
    @app.callback(
        Output('city-bloom-graph', 'figure'),
        Input('city-dropdown', 'value')
    )
    def update_graph(selected_city):
        # Filter data for the selected city
        years = sakura_first_bloom.columns[3:-2].astype(int)
        bloom_dates = pd.to_datetime(
            sakura_first_bloom.loc[sakura_first_bloom['Site Name'] == selected_city, years.astype(str)].iloc[0]
        )

        # Create scatter plot for the selected city
        fig = go.Figure()
        fig.add_trace(go.Scatter(
            x=years, y=bloom_dates, mode='markers+lines', marker=dict(color='pink'),
            line=dict(dash='dash'), name='Bloom Dates'
        ))

        fig.update_layout(
            title=f'Sakura Bloom Dates in {selected_city} (1953-2023)',
            xaxis_title='Year',
            yaxis_title='Bloom Date',
            yaxis=dict(tickformat='%b %d'),
            hovermode='closest'
        )
        return fig

3. Update the `app.py` file to connect the layout and callbacks:

Make sure app.py in dash-app/ looks like this:

from dash import Dash
from components.layout import create_layout
from components.callbacks import register_callbacks

# Initialize the Dash app
app = Dash(__name__, assets_folder='assets')

# Set the layout for the app
app.layout = create_layout()

# Register callbacks
register_callbacks(app)

# Run the server
if __name__ == '__main__':
    app.run_server(debug=True)

Breakdown of the Code:

layout.py: Defines the layout, including the dropdown menu and a placeholder for the graph (city-bloom-graph).
callbacks.py: Defines a callback function that listens for changes in the dropdown menu and updates the graph accordingly.
app.py: Initializes the Dash app, sets the layout, and connects the callbacks.

Once you run the app.py file, you should see a dashboard similar to the example image below. Keep in mind that the bloom patterns for certain cities might look quite similar, so try selecting cities like Kyoto and Naha to observe the differences more clearly.

A more in-depth review of callbacks

As previously stated callbacks are one of the most powerful features in Dash, enabling your application to become interactive and dynamic. By using callbacks, you can connect your app’s components—such as graphs, dropdowns, sliders, and buttons—so that changes in one component automatically update other components without requiring a page refresh.

How Callbacks Work

In Dash, a callback is essentially a function that is automatically triggered whenever the values of specified inputs change. The function then performs some operations (e.g., data filtering or visualization) and outputs the results to specified output components in your app.

Basic Structure of a Callback

A Dash callback typically follows this pattern:

@app.callback: This is a decorator that wraps around your callback function. It tells Dash that the wrapped function is a callback that will be triggered by the specified inputs.
Output: Defines which component and property will be updated when the callback is triggered.
Input: Specifies the components and properties that trigger the callback whenever their values change.
update_function(input_value): This is the function that gets executed when the callback is triggered. The parameters passed to this function correspond to the values of the input components. It performs some processing and returns the output, which will update the specified component.

@app.callback(
    Output(component_id='output-id', component_property='property'),
    [Input(component_id='input-id', component_property='property')]
)
def update_function(input_value):
    # Perform some operations based on the input value
    result = some_processing(input_value)
    return result

Detailed Explanation of the Callback Components

1. Input Component:

The dcc.Dropdown component is defined with the ID city-dropdown. It has a list of options (Kyoto, Naha), and the default value is set to 'Kyoto'.
Component ID: city-dropdown
Property: 'value' (the selected city)

   dcc.Dropdown(
       id='city-dropdown',
       options=[{'label': city, 'value': city} for city in df['City'].unique()],
       value='Kyoto'
   )

2. Output Component:

The dcc.Graph component is defined with the ID bloom-graph. This is where the visualization will be displayed.
Component ID: 'bloom-graph'
Property: 'figure' (the figure to be displayed in the graph)

   dcc.Graph(id='city-bloom-graph')

3. The Callback Function:

The callback function is defined using the @app.callback decorator, which connects the dropdown’s value to the graph’s figure.
Input: The selected_city parameter receives the value from the dropdown (city-dropdown).
Processing: The function filters the DataFrame sakura_first_bloom to get the bloom dates for the selected city.
Output: The filtered data is then used to create a line plot, and the resulting figure is returned to the figure property of the city-bloom-graph component.

   @app.callback(
       Output('bloom-graph', 'figure'),
       [Input('city-dropdown', 'value')]
   )
   def update_graph(selected_city):
        # Filter data for the selected city
        years = sakura_first_bloom.columns[3:-2].astype(int)
        bloom_dates = pd.to_datetime(
            sakura_first_bloom.loc[
                sakura_first_bloom["Site Name"] == selected_city, years.astype(str)
            ].iloc[0]
        )

       # Create scatter plot for the selected city
        fig = go.Figure()
        fig.add_trace(
            go.Scatter(
                x=years,
                y=bloom_dates,
                mode="markers+lines",
                marker=dict(color="pink"),
                line=dict(dash="dash"),
                name="Bloom Dates",
            )
        )

        # Update figure layout
        fig.update_layout(
            title=f"Sakura Bloom Dates in {selected_city} (1953-2023)",
            xaxis_title="Year",
            yaxis_title="Bloom Date",
            yaxis=dict(tickformat="%b %d"),
            hovermode="closest",
        )
        return fig
       return fig

Multiple Inputs and Outputs

Dash callbacks can handle multiple inputs and outputs, making them highly flexible for complex interactions. For example:

@app.callback(
    [Output('graph1', 'figure'), Output('graph2', 'figure')],
    [Input('dropdown1', 'value'), Input('dropdown2', 'value')]
)
def update_graphs(dropdown1_value, dropdown2_value):
    # Use both dropdown values to create two separate graphs
    fig1 = some_function(dropdown1_value)
    fig2 = another_function(dropdown2_value)
    return fig1, fig2

In this example, changes in either dropdown1 or dropdown2 will trigger the update_graphs function, which updates both graph1 and graph2 simultaneously.

Chained Callbacks

Dash also supports chained callbacks, where the output of one callback serves as the input to another. This allows you to build highly interactive and multi-step workflows.

Limitations and Considerations

Circular Dependencies: Dash does not allow circular dependencies between components (e.g., a callback’s output feeding back into its own input).
Performance: Too many callbacks can slow down the app, so consider optimizing by minimizing the number of components linked.
State: Use State alongside Input to handle components that don’t directly trigger updates (e.g., to get the value of an input box without waiting for a submit button to be pressed).

Building Advanced Interactive Components for Our Dashboard

In this section, we will take our interactive dashboard to the next level by adding dynamic behavior to the map of Japan. Our objective is to plot each city from the dataset on a map, making each city clickable. When a user clicks on a city, a detailed analysis window (modal) will be triggered, displaying insights and visualizations specific to that location. This approach transforms a static map into a powerful exploratory tool, enabling users to delve into region-specific sakura bloom patterns and other meaningful data.

Key Features We Aim to Implement:

Visualize the Dataset on a Map:
The foundation of our interactive map is a GeoJSON file that outlines Japanese prefecture boundaries. We'll use this data to create a Choroplethmapbox using the Plotly library, where each city or prefecture is distinctly colored based on its attributes.
Enable Clickable City Markers:
We’ll enhance interactivity by making each prefecture clickable. When a user selects a specific region, the dashboard will recognize the event and identify the chosen city. This functionality is achieved using Dash’s callback mechanism, which listens for clicks and updates the display based on user interactions.
Display City-Specific Information:
Upon clicking a city, a modal window will pop up, presenting detailed information about that city, such as bloom dates, trends, and unique sakura bloom patterns. This modal will serve as a dedicated space for rich visualizations and text, providing a focused view of the city's characteristics.
Ensure a Smooth User Experience:
The design should be intuitive and visually appealing. The map will occupy the majority of the screen, and the modal will be styled to complement the dashboard’s overall theme. Our goal is to create a seamless browsing experience that maintains clarity and avoids clutter.

Code Implementation and Explanations

Here’s a detailed look at how we achieve each of these behaviors, including the libraries used and how they interact to build our dashboard:

1. Using Plotly for Map Visualizations

The plotly.graph_objs module offers the Choroplethmapbox component, which is ideal for representing geographic data on a map with region-based coloring.
GeoJSON: To visualize the boundaries and shapes of each prefecture, we use a GeoJSON file. A GeoJSON is a popular format for encoding a variety of geographic data structures, making it a perfect choice for outlining regions on a map.

import plotly.graph_objs as go
import json

# Load GeoJSON file for Japanese prefectures
geojson_path = "../data/japan_prefectures.geojson"
with open(geojson_path, "r") as f:
    japan_geojson = json.load(f)

In the above snippet, we load the GeoJSON file, which contains information on Japanese prefecture shapes. This data is used to define the map boundaries.

Choropleth Map: A choropleth map shades regions based on a data variable, helping users visually compare different regions. Here’s how we set up a Choroplethmapbox to color each prefecture based on unique values.
To download the file for the Japanese prefectures refer to the following link: https://www.kaggle.com/datasets/zhanhaoh/geographic-data-of-japan

# Create a sample DataFrame to assign a color value to each prefecture
prefecture_data = pd.DataFrame(
    {
        "id": [feature["id"] for feature in japan_geojson["features"]],  # Extract IDs from GeoJSON
        "value": range(len(japan_geojson["features"]))  # Assign a different value for each prefecture
    }
)

# Create the choropleth map using Plotly
map_fig = go.Figure(
    go.Choroplethmapbox(
        geojson=japan_geojson,
        locations=prefecture_data["id"],  # Match prefecture IDs to locations in the GeoJSON
        z=prefecture_data["value"],  # The values to use for coloring
        colorscale="PuRd",  # Choose a colorscale
        marker_line_width=0.5,  # Boundary line thickness
        marker_line_color="black",  # Boundary line color
        featureidkey="id",  # Match GeoJSON id field directly
        showscale=False,
    )
)

Here, each prefecture is uniquely colored using the "PuRd" color scale, making it easy for users to visually distinguish between regions.

2. Creating a Clickable Map with Dash Callbacks

Callbacks: As we have explained before, a callback in Dash is a way to define interactivity. It uses a function that is triggered when an input changes (e.g., a user clicks on a map) and then updates a component of the dashboard (e.g., displaying a modal). Our input change now will be when the user clicks a prefecture of Japan.
- Input("japan-map", "clickData"): Monitors for click events on the map.
- Output("modal", "is_open"): Controls whether the modal is displayed.
- When a city is clicked, the callback identifies the city ID (prefecture_id) and uses it to update the modal’s content with city-specific information.

from dash import Input, Output, State, html

# Define the callback function to handle click events on the map
@app.callback(
    Output("modal", "is_open"),  # Control whether the modal is open
    Output("modal-content", "children"),  # Update modal content
    Input("japan-map", "clickData"),  # Listen for clicks on the map
    Input("close-modal", "n_clicks"),  # Listen for clicks on the modal close button
    State("modal", "is_open"),
)
def display_prefecture_info(clickData, n_clicks, is_open):
    # If a prefecture is clicked, extract its ID and display the modal
    if clickData:
        prefecture_id = clickData["points"][0]["location"]

        # Get the name of the clicked prefecture
        prefecture_name = prefecture_data[prefecture_data["id"] == prefecture_id].iloc[0]["name"]

        # Create content for the modal body
        modal_content = html.Div(
            [
                html.H4(f"Details for Prefecture: {prefecture_name}"),
                html.P(f"Prefecture ID: {prefecture_id}"),
                html.P("This is where detailed information and analysis will be displayed."),
            ]
        )

        return not is_open, modal_content

    # If the close button is clicked, close the modal
    if n_clicks:
        return not is_open, None

    return is_open, None

3. Creating a Custom Modal Window for Displaying City Information

Dash Bootstrap Components (dbc): dbc.Modal is a component from the Dash Bootstrap library used to create stylish pop-up windows. We define its header, body, and footer to present the detailed city data in a structured manner.
For more information on this library please refer to the following link: https://dash-bootstrap-components.opensource.faculty.ai/

dbc.Modal(
    [
        dbc.ModalHeader(dbc.ModalTitle("Prefecture Analysis")),
        dbc.ModalBody(id="modal-content"),  # The content updates dynamically
        dbc.ModalFooter(
            dbc.Button("Close", id="close-modal", className="ml-auto")
        ),
    ],
    id="modal",
    size="lg",
    is_open=False,  # Modal is closed by default
)

Why This Approach Works

This method ensures a streamlined and visually appealing user experience. Users can click on a city to see detailed insights without leaving the map, making the exploration of the sakura bloom data more interactive and intuitive.

By combining the power of Plotly, Dash, and GeoJSON, we’ve built a flexible and interactive tool that encourages users to explore regional data in a visually compelling way.

Animation link

That's it for now!

I hope this proves to be helpful to someone other than just me!

✧⁺⸜(^-^)⸝⁺✧

MLP-Mixer (Theory)

Igor L.R. Azevedo — Wed, 02 Oct 2024 02:53:16 +0000

TL;DR - This is the first article I am writing to report on my journey studying the MPL-Mixer architecture. It will cover the basics up to an intermediate level. The goal is not to reach an advanced level.

Reference: https://arxiv.org/abs/2105.01601

Introduction

From the original paper it's stated that

We propose the MLP-Mixer architecture (or “Mixer” for short), a competitive but conceptually and technically simple alternative, that does not use convolutions or self-attention. Instead, Mixer’s architecture is based entirely on multi-layer perceptrons (MLPs) that are repeatedly applied across either spatial locations or feature channels. Mixer relies only on basic matrix multiplication routines, changes to data layout (reshapes and transpositions), and scalar nonlinearities.

At first, this explanation wasn’t very intuitive to me. With that in mind, I decided to investigate other resources that could provide an easier explanation. In any case, let’s keep in mind that the proposed architecture is shown in the image below.

MLP-Mixer consists of per-patch linear embeddings, Mixer layers, and a classifier head. Mixer layers contain one token-mixing MLP and one channel-mixing MLP, each consisting of two fully-connected layers and a GELU nonlinearity. Other components include: skip-connections, dropout, and layer norm on the channels.

Unlike CNNs, which focus on local image regions through convolutions, and transformers, which use attention to capture relationships between image patches, the MLP-Mixer uses only two types of operations:

Patch Mixing (Spatial Mixing)
Channel Mixing

Image Patches

In general, from the figure below, we can see that this architecture is a "fancy" classification model, where the output of the fully connected layer is a class. The input for this architecture is an image, which is divided into patches.

In case you're not 100% sure what a patch is, when an image is divided into 'patches,' it means the image is split into smaller, equally sized square (or rectangular) sections, known as patches. Each patch represents a small, localized region of the original image. Instead of processing the entire image as a whole, these smaller patches are analyzed independently or in groups, often for tasks like object detection, classification, or feature extraction. Each patch is then provided to a "Per-patch Fully-connected" layer and subsequently a " $\times$ (Mixer Layer)."

MLP-Mixer

How the MLP-Mixer Processes Patches

For a clear example, let's take a 224x224 pixel image which can be divided into 16x16 pixel patches, when diving the image we'll have

\frac{224}{16} = 14

So, the 224x224 pixel image will be divided into a grid of 14 patches along the width and 14 patched along the height. This results in a 14x14 grid of patches. The total number of patches is then calculated by $14 \times 14 = 196$ patches. After diving the image into patches, each patch will contain $16 \times 16 = 256$ pixels. These pixel values can be flattened into a 1D vector of length 256.

It's crucial to note that if the image has multiple channels (like RGB with 3 channels), each patch will actually have $\times 16 \times 16 = 768$ values because each pixel in a RGB image has three color channels.

Thus, for an RGB image:

Each patch can be represented as a vector of 768 values
We then have 196 patches, each represented by a 768-dimensional vector

Each patch (a 768-dimensional vector in our example) is projected into a higher-dimensional space using a linear layer (MLP). This essentially gives each patch an embedding that is used as the input to the MLP-Mixer. More specifically, after dividing the image into patches, each patch is processed by the Per-patch Fully-connected layer (depicted in the second row).

Per-patch Fully Connected Layer

Each patch is essentially treated as a vector of values, as we have explained before, a 768-dimensional vector in our example. These values are passed through a fully connected linear layer, which transforms them into another vector. This is done for each patch independently. The role of this fully connected layer is to map each patch to a higher-dimensional embedding space, similar to how token embeddings are used in transformers.

N x Mixer Layers

This part shows a set of stacked mixer layers that alternate between two different types of MLP-based operations:

1. Patch Mixing: In this layer, the model mixes information between patches. This means it looks at the relationships between patches in the image (i.e., across different spatial locations). It's achieved through an MLP that treats each patch as a separate entity and computes the interactions between them.

2. Channel Mixing: After patch mixing, the channel mixing layer processes the internal information of each patch independently. It looks at the relationships between different pixel values (or channels) within each patch by applying another MLP.

These mixer layers alternate between patch mixing and channel mixing. They are applied N times, where N is a hyperparameter to configure the number of times the layers are repeated. The goal of these layers is to mix both spatial (patch-wise) and channel-wise information across the entire image.

Global Average Pooling

After passing through several mixer layers, a global average pooling layer is applied. This layer helps reduce the dimensionality of the output by averaging the activations across all patches. The global average pooling layer computes the average value across all patches, essentially summarizing the information from all patches into a single vector. This reduces the overall dimensionality and prepares the data for the final classification step. Additionally, it helps aggregate the learned features from the entire image in a more compact way.

Fully Connected Layer for Classification

This layer is responsible for taking the output of the global average pooling and mapping it to a classification label. The fully connected layer takes the averaged features from the global pooling layer and uses them to make a prediction about the class of the image. The number of output units in this layer corresponds to the number of classes in the classification task.

Quick Recap Until Now

Input Image: the image is divided into small patches
Per-patch Fully Connected Layer: Each patch is processed independently by a fully connected layer to create patch embeddings
Mixer Layers: The patches are then passed through a series of mixer layers, where information is mixed spatially (between patches) and channel-wise (within patches)
Global Average Pooling: The features from all patches are averaged to summarize the information
Fully Connected Layer: Finally, the averaged features are used to predict the class label of the image

Overview of the Mixer Layer Architecture

As stated before, the Mixer Layer architecture consists of two alternating operations:

Patch Mixing
Channel Mixing

Each mixing state is handled by a MLP, and there are also skip-connections and layer normalization steps included. Let's go step by step through how an image is processed using as a reference the image shown below:

Mixer Layer

Note, that the image itself is not provided as an input to this diagram. Actually, the image has already been divided into patches as explained before and each patch is processed by a per-patch fully connected layer (linear embedding). The output of that state is what enters the Mixer Layer. Here is how it goes:

Before reaching this layer, the image has already been divided into patches. These patches are flattened and embedded as vectors (after the per-patch fully connected layer)
The input to this diagram consists of tokens (one for each patch) and channels (the feature dimensions for each patch)
So the input is structured as a 2D tensor with: Patches (one patch per token in the sequence) and Channels (features within each patch)
In simple terms, as shown in the image we can think of the input as a matrix where: Each row represents a patch, and each column represents a channel (feature dimension)

Processing Inside the Mixer Layer

Now, let's break down the key operations in this Mixer Layer, which processes the patches that come from the previous stage:

1. Layer Normalization

The first step is the normalization of the input data to improve training stability. This happens before any mixing occurs.

2. Patch Mixing (First MLP Block)

After normalization, the first MLP block is applied. In this operations, the patches are mixed together. The idea here is to capture the relationships between different patches.
This operation transposes the input so that it focuses on the patches dimension
Then, a MLP is applied along this patches dimension. This is done to allow the model to exchange information between patches and learn how patches relate spatially.
Once this mixing is done, the input is transposed back to its original format, where channels are in the focus again.

3. Skip Connection

The architecture uses a skip-connection (bypass residual layers, allowing any layer to flow directly to any subsequent layer) that adds the original input (before patch mixing) back to the output of the patch mixing block. This helps avoid degradation of information during training.

4. Layer Normalization

Another layer normalization step is applied to the output of the token mixing operation before the next operation (channel mixing) is applied

5. Channel Mixing (Second MLP Block)

The second MLP block performs channel mixing. Here, each patch is processed independently by a separate MLP. The goal is to model relationships between the different channels (features) within each patch.
The input is processed along the channels dimension (without mixing information between different patches). The MLP learns to capture dependencies between the various features within each patch

6. Skip Connection (for Channel Mixing)

Similar to patch mixing, there's a skip-connection in the channel mixing block as well. This allows the model to retain the original input after the channel mixing operation and helps in stabilizing the learning process.

With the step by step explanation above we can summarize it with some key points:

Patch Mixing - this part processes the relationships between different patches (spatial mixing), allowing the model to understand global spatial patterns across the image
Channel Mixing - this part processes the relationships within each patch (channel-wise mixing), learning to capture dependencies between the features (such as pixel intensities or features maps) within each patch
Skip Connections - The skip connections help the network retain the original input and prevent vanishing gradient problems, especially in deep networks

Inside the MLP Block

The MLP block used in the MLP-Mixer architecture can be seen in the image below:

MLP Architecture

1. Fully Connected Layer

The input (whether it's patch embeddings or channels, depending on the context) first passes through a fully connected layer. This layer performs a linear transformation of the input, meaning it multiplies the input by a weight matrix and adds a bias term.

2. GELU (Gaussian Error Linear Unit) Activation

After the first fully connected layer, a GELU activation function is applied. GELU is a non-linear activation function that is smoother than the ReLU. It allows for a more fine-grained activation, as it approximates the behavior of a normal distribution. The formula for GELU is given by

\cdot \Phi(x)

where $Φ(x)\Phi(x)$ is the cumulative distribution function of a standard Gaussian distribution. The choice of GELU in MLP-Mixer is intended to improve the model’s ability to handle non-linearities in the data, which helps the model learn more complex patterns.

How it works in context:

In the Token Mixing MLP, this block is applied across the patch (token) dimension, mixing information across different patches
In the Channel Mixing MLP, the same structure is applied across the channels dimension, mixing the information within each patch independently.

Intuition - The MLP block acts as the core computational unit within the MLP-Mixer. By using two fully connected layers with an activation function in between, it learns to capture both linear and non-linear relationships within the data, depending on where it is applied (either for mixing patches or channels).

Conclusion

The MLP-Mixer offers a unique approach to image classification by leveraging simple multilayer perceptrons (MLPs) for both spatial and channel-wise interactions. By dividing an image into patches and alternating between patch mixing and channel mixing layers, the MLP-Mixer efficiently captures global spatial dependencies and local pixel relationships without relying on traditional convolutional operations. This architecture provides a streamlined yet powerful method for extracting meaningful patterns from images, demonstrating that, even with minimal reliance on complex operations, impressive performance can be achieved in deep learning tasks. It is important to note, however, that this architecture can be applied to different fields, such as time series predictions, even though it was initially proposed for vision tasks.

If you've made it this far, I want to express my gratitude. I hope this has been helpful to someone other than just me!

✧⁺⸜(^-^)⸝⁺✧

What are Financial Markets?

Igor L.R. Azevedo — Wed, 02 Oct 2024 02:23:45 +0000

Introduction

Financial markets are platforms where buyers and sellers come together to trade financial assets like stocks, bonds, currencies, and commodities. These markets play a crucial role in the economy by facilitating the flow of capital and enabling price discovery, risk management, and the allocation of resources.

Types of Financial Markets

Stock Market: A market where shares of publicly listed companies are bought and sold. Examples include the New York Stock Exchange (NYSE) and Nasdaq.
Bond Market: This market deals with the buying and selling of debt securities, primarily bonds issued by corporations, municipalities, and governments.
Commodities Market: A market where raw materials like gold, oil, and agricultural products are traded. Major examples include the Chicago Mercantile Exchange (CME) and the London Metal Exchange (LME).
Forex Market: Also known as the foreign exchange market, it's where currencies are traded. The Forex market is the largest and most liquid financial market in the world.
Derivatives Market: A market for financial contracts (such as options and futures) that derive their value from an underlying asset, like stocks, bonds, or commodities.

Portfolio of Stocks

A portfolio is a collection of financial assets such as stocks, bonds, and other securities owned by an individual or institution. Diversifying a portfolio—investing in a variety of assets—can help reduce risk. For instance, if one stock underperforms, gains in another might offset the loss, leading to a more stable return.

Python Examples

I'll assume you already know the basic of python programming. Thus, I recommend creating a python environment python -m venv venv and then installing the libraries shown below

pip install yfinance pandas matplotlib

Let's analyze a basic basic example of fetching historical stock data using the yfinance library.

import yfinance as yf
import matplotlib.pyplot as plt

# Fetching data for Apple, Microsoft, and Google
stocks = ['AAPL', 'MSFT', 'GOOGL']
data = yf.download(stocks, start="2023-01-01", end="2024-01-01")

# Plotting the closing prices
data['Close'].plot(figsize=(10, 7))
plt.title("Stock Prices")
plt.xlabel("Date")
plt.ylabel("Price (USD)")
plt.show()

At the moment I executed the code above I got the following image

We can see from the image above that, as stated in our code, we are retrieving the stock values for the companies Apple, Google, and Microsoft for the period starting on '2023-01-01' and ending on '2024-01-01'

Why AAPL, MSFT, GOOGL though?

A ticker symbol is a unique series of letters assigned to a security or stock for trading purposes. This symbol serves as an abbreviation that identifies a particular stock on a stock exchange. Here’s a breakdown of ticker symbols for some well-known companies:

AAPL: This is the ticker symbol for Apple Inc., one of the world's largest technology companies known for products like the iPhone, iPad, and Mac computers.
MSFT: This symbol represents Microsoft Corporation, a leading technology company specializing in software, personal computers, and services like Azure cloud computing.
GOOGL: Alphabet Inc. uses this ticker for its Class A shares. Alphabet is the parent company of Google, the world's leading search engine and digital advertising platform.
AMZN: This is the ticker for Amazon.com, Inc., a major player in e-commerce, cloud computing, and streaming services.
NFLX: The ticker symbol for Netflix, Inc., a leading streaming entertainment service provider, is NFLX.
FB: Meta Platforms, Inc. (formerly Facebook, Inc.) trades under this symbol, representing one of the largest social media and technology companies.
NVDA: NVIDIA Corporation uses this ticker. NVIDIA is a leading manufacturer of graphics processing units (GPUs) for gaming and professional markets, as well as system on a chip units for mobile devices and automotive markets.

These ticker symbols are essential for investors, analysts, and traders as they provide a quick and easy way to identify and trade stocks on the various stock exchanges around the world.

Portfolio of Stocks

Let’s say now you have a portfolio with equal investments in Apple, Microsoft, and Google. How can you calculate the portfolio’s returns?

Let's write a python script for this.

import pandas as pd

# Assuming equal weights for each stock
weights = [1/3, 1/3, 1/3]

# Calculate daily returns
returns = data['Close'].pct_change()

# Calculate portfolio returns
portfolio_returns = returns.dot(weights)

# Plotting the portfolio returns
portfolio_returns.plot(figsize=(10, 7))
plt.title("Portfolio Returns")
plt.xlabel("Date")
plt.ylabel("Return")
plt.show()

Then, we obtain the following output image which represents our daily portfolio returns.

However, this graph above is a bit hard to understand. How could we get a better intuition of what's happening with our money? Let's see another script

# Calculating cumulative returns
cumulative_returns = (1 + portfolio_returns).cumprod() - 1

# Calculating mean and standard deviation of returns
mean_return = portfolio_returns.mean()
std_dev = portfolio_returns.std()

print(f"Cumulative Return: {cumulative_returns[-1]:.2%}")
print(f"Average Daily Return: {mean_return:.2%}")
print(f"Volatility (Std Dev): {std_dev:.2%}")

Basically here is what we're doing.

In financial analysis, it’s essential to evaluate how a portfolio has performed over time. The following metrics are key to understanding the returns and risk associated with a portfolio.

1. Cumulative Returns

Cumulative return is a measure of the total return on an investment over a period, assuming all profits are reinvested. It is calculated by multiplying the returns for each period (1 + return), then subtracting 1 at the end.

The formula for cumulative return $R_c$
over a series of periods is:

R_c = \left( \prod_{t=1}^{n} (1 + r_t) \right) - 1

Where:

$r_t$ is the return in period t.

$n$ is the total number of periods.

In the Python code:

cumulative_returns = (1 + portfolio_returns).cumprod() - 1

portfolio_returns is a series of daily returns.

(1 + portfolio_returns).cumprod() calculates the cumulative product of 1 + rt over the series, and subtracting 1 gives the cumulative return.

2. Mean Return (Average Daily Return)

The mean return is the average return of the portfolio over a specified period. It provides insight into what an investor might expect to earn per period, on average.

The formula for mean return μ is:

\mu = \frac{1}{n} \cdot \sum^n_{t = 1} r_t

Where:

$r t$ is the return in period t.

$n$ is the total number of periods.

In Python:

mean_return = portfolio_returns.mean()

portfolio_returns.mean() computes the average of all daily returns.

3. Volatility (Standard Deviation of Returns)

Volatility is a measure of the risk or uncertainty associated with the returns of a portfolio. It is typically measured using the standard deviation, which quantifies how much the returns deviate from the mean return.

The formula for standard deviation $σ\sigma$ is:

\sigma = \sqrt{ \frac{1}{n} \sum_{t=1}^{n} (r_t - \mu)^2 }

Where:

$r_t$ is the return in period t.

$μ\mu$ is the mean return.

$n$ is the total number of periods.

In Python:

std_dev = portfolio_returns.std()

portfolio_returns.std() computes the standard deviation of daily returns.

4. Putting It All Together

Finally, you can print the calculated cumulative return, average daily return, and volatility:

print(f"Cumulative Return: {cumulative_returns[-1]:.2%}")
print(f"Average Daily Return: {mean_return:.2%}")
print(f"Volatility (Std Dev): {std_dev:.2%}")

cumulative_returns[-1] fetches the last value in the cumulative returns series, representing the total cumulative return up to the most recent date.

mean_return and std_dev represent the average daily return and the portfolio's volatility, respectively.

Summary

Cumulative Return provides the overall growth of the portfolio, assuming reinvestment of returns.

Mean Return gives the average return per period, indicating the portfolio's typical performance.

Volatility (Standard Deviation) quantifies the risk or variability in returns, with higher volatility indicating greater risk.

Understanding these metrics helps investors assess both the potential reward and the risk associated with a portfolio. For our example then we have the following results:

Cumulative Return: 57.54%

Average Daily Return: 0.19%

Volatility (Std Dev): 1.31%

That's it for now!

If you've made it this far, I want to express my gratitude. I hope this has been helpful to someone other than just me!

✧⁺⸜(^-^)⸝⁺✧

DEV Community: Igor L.R. Azevedo

Dash: An Intriguing Framework, to Say the Least

Introduction

Understanding the Structure of the Dash Framework

Folder Overview:

Project Files

1. Create dash-app/assets/style.css

2. Create dash-app/components/layout.py

3. Create dash-app/components/callbacks.py

4. Modify dash-app/app.py

5. Run Your Dash App:

6. Breakdown of the Code:

7. Visual Output:

Creating interactive HTML components (Dropdown)

Code Implementation:

1. Modify the layout.py file in dash-app/components/:

2. Add the interactive callbacks to callbacks.py:

3. Update the app.py file to connect the layout and callbacks:

Breakdown of the Code:

A more in-depth review of callbacks

How Callbacks Work

Basic Structure of a Callback

Detailed Explanation of the Callback Components

1. Input Component:

2. Output Component:

3. The Callback Function:

Multiple Inputs and Outputs

Chained Callbacks

Limitations and Considerations

Building Advanced Interactive Components for Our Dashboard

Key Features We Aim to Implement:

Code Implementation and Explanations

1. Using Plotly for Map Visualizations

2. Creating a Clickable Map with Dash Callbacks

3. Creating a Custom Modal Window for Displaying City Information

Why This Approach Works

MLP-Mixer (Theory)

Introduction

Image Patches

How the MLP-Mixer Processes Patches

Per-patch Fully Connected Layer

N x Mixer Layers

Global Average Pooling

Fully Connected Layer for Classification

Quick Recap Until Now

Overview of the Mixer Layer Architecture

Processing Inside the Mixer Layer

Inside the MLP Block

Conclusion

What are Financial Markets?

Introduction

Types of Financial Markets

Portfolio of Stocks

Python Examples

Why AAPL, MSFT, GOOGL though?

Portfolio of Stocks

Summary

1. Create `dash-app/assets/style.css`

3. Create `dash-app/components/callbacks.py`

4. Modify `dash-app/app.py`

1. Modify the `layout.py` file in `dash-app/components/`:

2. Add the interactive callbacks to `callbacks.py`:

3. Update the `app.py` file to connect the layout and callbacks: