[PYTHON] J'ai comparé l'utilisation de Dash et Streamlit dans l'environnement Docker en utilisant les données de la ligue B

Aperçu

J'ai touché Dash et Streamlit, qui sont les bibliothèques de visualisation de Python, je voudrais donc résumer brièvement mes impressions.

À propos de Dash et Streamlit

Dash https://dash.plotly.com/

Dash est un framework Web Python, bien connu sous le nom de framework Web Python Flask et [Django](https: /). Il est dans la même catégorie que /docs.djangoproject.com/ja/3.1/). Contrairement au framework Web Python populaire, Dash est un framework Web spécialisé dans la visualisation et basé sur Flask / Plotly / React.

Streamlit https://www.streamlit.io/

Streamlit est un framework Web Python. Comme Dash, il est spécialisé dans la visualisation et est un framework web basé sur React / Bootstrap. Contrairement à Dash, Dash prend uniquement en charge Plotly, mais Streamlit

• Matplotlib
• Altair
• Graphviz
• Bokeh

Il prend également en charge les bibliothèques de visualisation telles que.

tendance

Dash est sorti pour la première fois en 2015 et Streamlit en 2018.

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

En regardant Google Trends, Streamlit n'a été recherché que récemment au Japon depuis septembre 2019 environ. Étant donné que Dash et Streamlit sont des cadres Web pour la visualisation de Python, le nombre absolu de tendances n'est pas grand car l'utilisation est limitée, et je pense que la différence dans le nombre de recherches entre Dash et Streamlit n'est pas si grande récemment.

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

J'ai touché Dash et Streamlit

environnement

Données à visualiser

Cette fois, nous avons visualisé en utilisant les données du nombre de clients et les victoires / pertes de l'arène de la ligue B1 lors de la saison 2019. Données originales: https://www.bleague.jp/attendance/?tab=1&year=2019&club=1event=2&setuFrom=1

Préparation Docker

Depuis que j'ai utilisé Docker pour exécuter Dash et Streamlit, créez Dockerfile et 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

• Le code source utilisé est également disponible ici. https://github.com/hikarut/Python-Visualization

Dash

Installation

Utilisez Docker pour installer les packages requis.

pip install dash==1.14.0
pip install pandas

Créer un dossier de candidature

Cette fois, les fichiers suivants sont créés. La plupart des tutoriels ici sont toujours là. 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)

• Bien qu'il soit détaillé, l'hôte par défaut attribué à Docker est 0.0.0.0, alors spécifiez-le comme hôte lors du démarrage de Dash.
• De plus, comme le port 8001 est ouvert cette fois, spécifiez cela.

Commencez

Puisque j'utilise Docker, je vais le construire et le démarrer

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

Écran de démarrage

Lorsque vous démarrez ce qui précède, l'écran suivant apparaît. Lorsque vous sélectionnez une arène, le graphique montre les victoires et les pertes et le nombre de clients pour chaque équipe.

Streamlit

Installation

Utilisez Docker pour installer les packages requis.

pip install streamlit

Créer un dossier de candidature

Cette fois, les fichiers suivants sont créés. Ceci est référencé ci-dessous. Référence: [Python] J'ai écrit un test de "Streamlit" qui facilite la création d'une application de visualisation

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)
)

Dans le cas de Streamlit, les spécifications du port et de l'hôte sont écrites dans le fichier de configuration, alors créez-les ci-dessous.

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

[server]
port=8001

[browser]
serverAddress="0.0.0.0"

Commencez

Puisque nous utilisons Docker, nous allons le construire et le démarrer.

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

Écran de démarrage

Lorsque vous démarrez ce qui précède, l'écran suivant apparaît. Comme avec Dash, lorsque vous sélectionnez une arène, le graphique montre les victoires et les pertes et le nombre de clients pour chaque équipe.

Résumé et impression de la différence entre Dash et Streamlit

Les deux peuvent être créés rapidement avec une simple visualisation, de sorte que la convivialité globale est à peu près la même. En termes d'extensibilité visuelle, Streamlit ne peut pas être beaucoup étendu car la disposition de base est fixe, Quant à Dash, j'ai l'impression qu'il a une grande liberté car il sait écrire du HTML. La quantité globale de code est donc un peu plus importante pour Dash, et Streamlit donne l'impression qu'il peut être écrit simplement.

Personnellement, j'ai senti que Streamlit serait meilleur en raison de l'apparence générale et de la petite quantité de code.

référence

• L'utilisateur de Dash a essayé de créer une application à l'aide de Streamlit
• [Python] J'ai écrit un test de "Streamlit" qui facilite la création d'une application de visualisation
• Streamlit: Front End for Data Scientists