Seit ich das letzte Mal mit Daten der Serie A gespielt und einige Diagramme mit Plotly erstellt habe (lesen Sie den Artikel über den Link unten), dachte ich, ich sollte einen Schritt weiter gehen und versuchen, ein Dashboard zu erstellen, damit ich alle interessanten Diagramme auf einer Seite haben kann — dann ist das der Anfang des heutigen Updates.

Voraussetzungen:

Ähnlich wie in früheren Artikeln erwähnt, sind die ersten und zwei Dinge vor dem Spielen mit Daten: Daten abrufen und Daten bereinigen.

Die Datennutzung für das aktuelle Projekt stammt von Kaggle, bereitgestellt von Massimo Belloni .https://www.kaggle.com/massibelloni/serie-a-19932017

Ein paar Zeilen wurden ausgeführt, um alle Daten aus verschiedenen CSV-Dateien zu kombinieren:

# Import the packages for data cleaning:
import pandas as pd
import glob
import numpy as np
# Setup the file path & get all files
path = r'....\SerieA'
all_files = glob.glob(path + "/*.csv")
table = []
for filename in all_files:
    data = pd.read_csv(filename, index_col=None, header=0)
    table.append(data)
frame = pd.concat(table, axis=0, ignore_index=True)
#Only use the first eight columns
df = frame.iloc[:,0:7]

# Identify the winner:
df['Winner'] = np.where(df['FTR'] == 'H',df['HomeTeam'],
                          np.where(df['FTR'] == 'A', df['AwayTeam'], "Draw"))
# Identify if the winner is home team or away team:
df['Result'] = np.where(df['FTR'] == 'H','HomeTeamWin',
                          np.where(df['FTR'] == 'A', 'AwayTeamWin', "Draw"))
# The year of the match:
df['Year']=pd.DatetimeIndex(df['Date']).year

df.to_csv('seriearaw.csv')

Für dieses Dashboard hätte ich gerne vier Diagramme – zwei Tortendiagramme, ein Baumdiagramm und ein Liniendiagramm.

# get the right package:
import plotly.express as px
chart1 = px.pie(df, values =df.groupby('Result')['Result'].count(),
               title='Serie A - results from 1993 - 2017',
                height = 500)
chart1.update(layout=dict(title=dict(x=0.5)))

      

       Figure 1
      
chart2 = px.pie(df, values = df.groupby('Winner')['Winner'].count(),title = "Serie A Result from 1993 - 2017 - Most Win Team", height = 500)
chart2.update(layout=dict(title=dict(x=0.5)))
chart2.update_traces(textposition='inside', textinfo='percent')

      

       Figure 2
      
chart3 = px.treemap(df, path=['Winner'], values = 'TotalGoal',height = 500, title = "Serie A Result from 1993 - 2017 - Most Win Team")
chart3.update(layout=dict(title=dict(x=0.5)))
chart3.update_traces(textinfo = 'label + value')

      

       Figure 3
      
# Create a different dataframe for chart4:
total_goal =df.groupby('Year')['TotalGoal'].agg('sum').reset_index(name ='Sum')
total_goal = total_goal[(total_goal.Year != 2017) & (total_goal.Year != 1993)]
chart4 = px.line(data_frame = total_goal, x ='Year', y = 'Sum', title = 'Total Goals by Year',
              line_shape = 'spline',height=500)
chart4.update(layout=dict(title=dict(x=0.5)))
chart4

      

       Figure 4
      

Pakete : Zum Erstellen eines Dashboards sind drei Pakete erforderlich:

import dash
# html is used to set up the layout, and dcc is used to embed the graphs to the dashboard:
import dash_core_components as dcc
import dash_html_components as html

# Setup the style from the link:
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# Embed the style to the dashabord:
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

Bitte hier nicht den „ className “ angeben , mit dem definiert wird, wie groß das Diagramm aussieht. Stellen Sie sich vor, dass eine Dashboard-Seite gleichmäßig in 12 Spalten unterteilt werden kann. Wenn ein Diagramm „vier Spalten“ entspricht, bedeutet dies, dass das Diagramm etwa ein Drittel (4/12) der Breite des Dashboards ausmacht. In den folgenden Codes haben wir graph1–3 für 4 Spalten und graph4 für 12 Spalten. Ratet mal, wie das Dashboard aussieht?

graph1 = dcc.Graph(
        id='graph1',
        figure=chart1,
        className="four columns" 
    )
graph2 = dcc.Graph(
        id='graph2',
        figure=chart2,
        className="four columns"
    )
graph3 = dcc.Graph(
        id='graph3',
        figure=chart3,
        className="four columns"
    )
graph4 = dcc.Graph(
        id='graph4',
        figure=chart4,
        className="twelve columns"
    )

# setup the header
header = html.H2(children="SerieA Dataset Analysis")
# setup to rows, graph 1-3 in the first row, and graph4 in the second:
row1 = html.Div(children=[graph1, graph2, graph3],)
row2 = html.Div(children=[graph4])
# setup & apply the layout
layout = html.Div(children=[header, row1, row2], style={"text-align": "center"})
app.layout = layout

if __name__ == "__main__":
    app.run_server()

Bitte schön, das endgültige Aussehen dieses einfachen Dashboards! Habe Spaß!

Referenz: https://coderzcolumn.com/tutorials/data-science/build-dashboard-using-python-dash-plotly-and-deploy-online-pythonanywhere