Desde a última vez que joguei com dados da Serie A e criei alguns gráficos com o Plotly (confira o artigo no link abaixo), achei que deveria dar um passo adiante e tentar criar um painel para ter todos os gráficos interessantes em uma página — então esse é o começo da atualização de hoje.

Pré-requisitos:

Etapas semelhantes às mencionadas em artigos anteriores, a primeira e duas coisas antes de brincar com os dados são: obter os dados e limpá-los.

O uso de dados para o projeto atual é do Kaggle, fornecido por Massimo Belloni .https://www.kaggle.com/massibelloni/serie-a-19932017

Algumas linhas foram executadas para combinar todos os dados de diferentes arquivos csv:

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

Para este painel, gostaria de ter quatro gráficos — dois gráficos de pizza, um gráfico de mapa de árvore e um gráfico de linha.

# 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
      

Pacotes : três pacotes são necessários para construir um painel:

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)

Por favor, não use o “ className ” aqui, que é usado para definir o tamanho do gráfico. Imagine que uma página de painel pode ser dividida igualmente em 12 colunas, se um gráfico for igual a “quatro colunas”, isso significa que o gráfico terá cerca de um terço (4/12) de largura do painel. Nos códigos abaixo, temos graph1–3 para 4 colunas e graph4 para 12 colunas. Adivinha como é o painel?

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

Aqui está, a aparência final deste painel simples! Divirta-se!

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