[PYTHON] Ich habe Dash und Streamlit in der Docker-Umgebung anhand von B-League-Daten verglichen

Überblick

Ich habe Dash und Streamlit, die Visualisierungsbibliotheken von Python, berührt, daher möchte ich meine Eindrücke kurz zusammenfassen.

Über Dash und Streamlit

Dash https://dash.plotly.com/

Dash ist ein Python-Webframework, das als Python-Webframework Flask und [Django](https: /) bekannt ist. Es befindet sich in derselben Kategorie wie /docs.djangoproject.com/ja/3.1/). Im Gegensatz zum beliebten Python-Webframework ist Dash ein auf Visualisierung spezialisiertes Webframework, das auf Flask / Plotly / React basiert.

Streamlit https://www.streamlit.io/

Streamlit ist ein Python-Webframework. Wie Dash ist es auf Visualisierung spezialisiert und ein Web-Framework, das auf React / Bootstrap basiert. Im Gegensatz zu Dash unterstützt Dash nur Plotly, aber Streamlit

• Matplotlib
• Altair
• Graphviz
• Bokeh

Es unterstützt auch Visualisierungsbibliotheken wie.

Trend

Dash wurde erstmals im Jahr 2015 und Streamlit im Jahr 2018 veröffentlicht.

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

Mit Blick auf Google Trends wurde Streamlit erst seit etwa September 2019 in Japan gesucht. Da sowohl Dash als auch Streamlit Web-Frameworks für die Visualisierung von Python sind, ist die absolute Anzahl der Trends nicht groß, da die Verwendung begrenzt ist, und ich bin der Meinung, dass der Unterschied in der Anzahl der Suchvorgänge zwischen Dash und Streamlit in letzter Zeit nicht so groß ist.

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

Ich berührte Dash und Streamlit

Umgebung

Zu visualisierende Daten

Dieses Mal haben wir anhand der Daten der Anzahl der Kunden und des Gewinns / Verlusts der B1-Liga in der Saison 2019 visualisiert. Originaldaten: https://www.bleague.jp/attendance/?tab=1&year=2019&club=1event=2&setuFrom=1

Docker-Vorbereitung

Da ich Docker zum Ausführen von Dash und Streamlit verwendet habe, erstellen Sie "Dockerfile" und "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

• Der verwendete Quellcode ist auch hier verfügbar. https://github.com/hikarut/Python-Visualization

Dash

Installation

Verwenden Sie Docker, um die erforderlichen Pakete zu installieren.

pip install dash==1.14.0
pip install pandas

Anwendungsdatei erstellen

Dieses Mal werden die folgenden Dateien erstellt. Die meisten Tutorials hier sind noch da. 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)

• Obwohl es detailliert ist, ist der Docker zugewiesene Standardhost "0.0.0.0". Geben Sie dies beim Starten von Dash als Host an.
• Da Port 8001 diesmal geöffnet ist, geben Sie dies an.

Anlaufen

Da ich Docker verwende, werde ich es erstellen und starten

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

Startbildschirm

Wenn Sie oben beginnen, wird der folgende Bildschirm angezeigt. Wenn Sie eine Arena auswählen, zeigt das Diagramm die Gewinne und Verluste sowie die Anzahl der Kunden für jedes Team.

Streamlit

Installation

Verwenden Sie Docker, um die erforderlichen Pakete zu installieren.

pip install streamlit

Anwendungsdatei erstellen

Dieses Mal werden die folgenden Dateien erstellt. Darauf wird unten Bezug genommen. Referenz: [Python] Ich habe einen Test von "Streamlit" geschrieben, der das Erstellen einer Visualisierungsanwendung erleichtert.

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

Im Fall von Streamlit werden die Port- und Hostspezifikationen in die Einstellungsdatei geschrieben. Erstellen Sie sie daher unten.

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

[server]
port=8001

[browser]
serverAddress="0.0.0.0"

Anlaufen

Da wir Docker verwenden, werden wir es erstellen und starten.

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

Startbildschirm

Wenn Sie oben beginnen, wird der folgende Bildschirm angezeigt. Wie bei Dash zeigt das Diagramm bei der Auswahl einer Arena die Gewinne und Verluste sowie die Anzahl der Kunden für jedes Team.

Zusammenfassung und Eindruck des Unterschieds zwischen Dash und Streamlit

Beide können mit einfacher Visualisierung schnell erstellt werden, sodass die allgemeine Benutzerfreundlichkeit in etwa gleich ist. In Bezug auf die visuelle Erweiterbarkeit kann Streamlit nicht sehr stark erweitert werden, da das Grundlayout festgelegt ist. Was Dash betrifft, habe ich den Eindruck, dass der Freiheitsgrad hoch ist, weil HTML geschrieben werden kann. Daher ist die Gesamtmenge an Code für Dash etwas größer, und Streamlit erweckt den Eindruck, dass er einfach geschrieben werden kann.

Persönlich hatte ich das Gefühl, dass Streamlit aufgrund des allgemeinen Erscheinungsbilds und der geringen Menge an Code besser wäre.

Referenz

• Dash-Benutzer hat versucht, eine Anwendung mit Streamlit zu erstellen
• [Python] Ich habe einen Test von "Streamlit" geschrieben, der das Erstellen einer Visualisierungsanwendung erleichtert
• Streamlit: Frontend für Datenwissenschaftler