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

It also supports visualization libraries such as.

trend

Dash was first released in 2015 and Streamlit in 2018.

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.

スクリーンショット 2020-08-28 7.48.15.png 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

version
Mac 10.15.3
Docker 19.03.8
docker-compose 1.25.4
Python 3.7.3

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

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)

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. dash.png

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. streamlit.png

Summary and impression of the difference between Dash and Streamlit

Dash Streamlit
ease of use Easy to use Easy to use
Code amount Many Few
Design(* Subjectivity) Old-fashioned ordinary dashboard A little modern impression
Appearance expandability high Low

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

Recommended Posts

I compared using Dash and Streamlit in Docker environment using B league data
Build and try an OpenCV & Python environment in minutes using Docker
I compared Node.js and Python in creating thumbnails using AWS Lambda
Using venv in Windows + Docker environment [Python]
I created an Anaconda environment using Docker!
I set the environment variable with Docker and displayed it in Python
I tried using google test and CMake in C
Graph time series data in Python using pandas and matplotlib
I compared Java and Python!
I compared blade and jinja2
How to debug Dash (Flask) in Docker + VSCode + remote connection environment
I want to create a pipfile and reflect it in docker
Scribble what I used when using ipython in formatting pos data
Tips for using Selenium and Headless Chrome in a CUI environment
I tried using docomo speech recognition API and Google Speech API in Java
Build a development environment using Jupyter and Flask with Python in Docker (supports both VS Code / code-server)