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

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.

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.

スクリーンショット 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

J'ai touché Dash et Streamlit

environnement

version
Mac 10.15.3
Docker 19.03.8
docker-compose 1.25.4
Python 3.7.3

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

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)

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

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

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

Dash Streamlit
facilité d'utilisation Facile à utiliser Facile à utiliser
Montant du code Beaucoup Peu
Conception(* Subjectivité) Tableau de bord ordinaire à l'ancienne Une petite impression moderne
Extensibilité de l'apparence haute Faible

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

Recommended Posts

J'ai comparé l'utilisation de Dash et Streamlit dans l'environnement Docker en utilisant les données de la ligue B
Créez et essayez un environnement OpenCV et Python en quelques minutes à l'aide de Docker
J'ai comparé Node.js et Python lors de la création d'une miniature à l'aide d'AWS Lambda
Utilisation de venv dans un environnement Windows + Docker [Python]
J'ai créé un environnement Anaconda à l'aide de Docker!
J'ai défini des variables d'environnement dans Docker et je les ai affichées en Python.
J'ai essayé d'utiliser google test et CMake en C
Graphique des données de séries chronologiques en Python à l'aide de pandas et matplotlib
J'ai comparé Java et Python!
J'ai comparé lame et jinja2
Comment déboguer Dash (Flask) dans Docker + VSCode + environnement de connexion à distance
Je veux créer un fichier pip et le refléter dans le menu fixe
Scribble ce que j'ai utilisé lors de l'utilisation d'ipython dans le formatage des données de position
Conseils d'utilisation de Selenium et Headless Chrome dans un environnement CUI
J'ai essayé d'utiliser l'API de reconnaissance vocale docomo et l'API Google Speech en Java
Créer un environnement de développement à l'aide de Jupyter et Flask avec Python dans Docker (prend en charge à la fois VS Code / code-server)