[PYTHON] I compared using Dash and Streamlit in Docker environment using B league data

Overview

I have touched Dash and Streamlit, which are Python visualization libraries, so I would like to briefly summarize my impressions.

About Dash and Streamlit

Dash https://dash.plotly.com/

Dash is a Python web framework known as the Python web framework Flask and [Django](https: /). It is in the same category as /docs.djangoproject.com/ja/3.1/). Unlike most Python web frameworks, Dash specializes in visualization and is a web framework based on Flask / Plotly / React.

Streamlit https://www.streamlit.io/

Streamlit is a Python web framework. Like Dash, it specializes in visualization and is a web framework based on React / Bootstrap. Unlike Dash, Dash only supports Plotly, but Streamlit

• Matplotlib
• Altair
• Graphviz
• Bokeh

It also supports visualization libraries such as.

trend

Dash was first released in 2015 and Streamlit in 2018.

• Dash：https://pypi.org/project/dash/0.0.0/
• Streamlit：https://pypi.org/project/streamlit/0.1/

Looking at Google Trends, Streamlit has only recently been searched in Japan since around September 2019. Since both Dash and Streamlit are web frameworks for visualization of Python, the absolute number of trends is not large because the usage is limited, and I feel that the difference in the number of searches between Dash and Streamlit is not so large recently.

https://trends.google.co.jp/trends/explore?date=2018-01-01%202020-08-27&geo=JP&q=dash%20plotly,streamlit

I touched Dash and Streamlit

environment

Data to visualize

This time, we visualized using the data of the number of customers in the arena of the B1 league in the 2019 season and the winning and losing. Original data: https://www.bleague.jp/attendance/?tab=1&year=2019&club=1event=2&setuFrom=1

Docker preparation

Since I used Docker to run Dash and Streamlit, create Dockerfile and docker-compose.yml.

Dockerfile

FROM python:3
USER root

RUN apt-get update
RUN apt-get install -y vim less
RUN apt-get install -y zsh less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

# dash
RUN pip install dash==1.14.0
RUN pip install pandas

# streamlit
RUN pip install streamlit

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

EXPOSE 8001
CMD ["bash"]

docker-compose.yml

version: '3'
services:
  python-visualization:
    restart: always
    build: .
    container_name: 'python-visualization'
    ports:
      - "8001:8001"
    working_dir: '/root/'
    tty: true
    volumes:
      - ./src:/root/src/
      - ~/.zshrc:/root/.zshrc

• The source code used is also available here. https://github.com/hikarut/Python-Visualization

Dash

Installation

Use Docker to install the required packages.

pip install dash==1.14.0
pip install pandas

Creating an application file

This time, the following files are created. Most of the tutorials here are still there. https://dash.plotly.com/layout

src/dash/app.py

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

b1_data = pd.read_csv('src/data/b1_2019.csv')

color="home_victory", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash B-league'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    dcc.Dropdown(
        id = 'dropdown-for-example',
        options = [{'label': i, 'value': i} for i in b1_data.arena.unique()],
        value = b1_data.arena.min()
    ),
    dcc.Graph(
        id='example-graph'
    )
])

@app.callback(
    Output('example-graph', 'figure'),
    [Input('dropdown-for-example', 'value')])

def update_figure(selected):
    filtered_df = b1_data[b1_data.arena == selected]

    fig = px.bar(filtered_df, x="home_team", y="attendance", color="home_victory", barmode="group")

    fig.update_layout(transition_duration=500)

    return fig

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8001, debug=True)

• Although it is detailed, the default host assigned to Docker is 0.0.0.0, so specify that as the host when starting Dash.
• Also, since port 8001 is open this time, specify that.

Start-up

Since I am using Docker, I will build and start it

$ docker-compose up -d --build
$ docker-compose exec python-visualization zsh -c "python src/dash/app.py"

Startup screen

When you start the above, the following screen will appear. When you select an arena, the graph shows the wins and losses and the number of customers for each team.

Streamlit

Installation

Use Docker to install the required packages.

pip install streamlit

Creating an application file

This time, the following files are created. This is referred to below. Reference: [Python] I wrote a test of "Streamlit" that makes it easy to create a visualization application

src/streamlit/app.py

import streamlit as st
import plotly.express as px
import plotly.io as pio
import pandas as pd

# data
b1_data = pd.read_csv('../data/b1_2019.csv')

st.title('Bleagu Data')

# sidemenu
st.sidebar.markdown(
    "# Sidebar"
)

template = st.sidebar.selectbox(
    "Template", list(pio.templates.keys())
)

arena = st.sidebar.selectbox(
    "Arena", list(b1_data.arena.unique())
)

filtered_df = b1_data[b1_data.arena == arena]
st.write(
    px.bar(filtered_df, x="home_team", y="attendance", color="home_victory", barmode="group", template=template)
)

In the case of Streamlit, the port and host specifications are written in the configuration file, so create them below.

toml:src/streamlit/.streamlit/config.toml

[server]
port=8001

[browser]
serverAddress="0.0.0.0"

Start-up

Since we are using Docker, we will build and start it.

$ docker-compose up -d --build
$ dc exec python-visualization zsh -c "cd src/streamlit && streamlit run app.py"

Startup screen

When you start the above, the following screen will appear. As with Dash, when you select an arena, the graph shows the wins and losses and the number of customers for each team.

Summary and impression of the difference between Dash and Streamlit

Both can be created quickly with simple visualization, so the overall usability is about the same. In terms of extensible appearance, Streamlit cannot be expanded very much because the basic layout is fixed, As for Dash, I have the impression that the degree of freedom is high because HTML can be written. So the overall amount of code is a little more for Dash, and Streamlit gives the impression that it can be written simply.

Personally, I felt that Streamlit would be better because of the overall appearance and the small amount of code.

reference

• Dash user tried to make an application using Streamlit
• [Python] I wrote a test of "Streamlit" that makes it easy to create a visualization application
• Streamlit: Front End for Data Scientists