PyCafe - Dash - Steam games-app

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import dash
from dash import dcc, html, dash_table
import plotly.express as px
import pandas as pd
from wordcloud import WordCloud
import base64
from io import BytesIO

# Load dataset
file_path = "https://raw.githubusercontent.com/plotly/Figure-Friday/refs/heads/main/2025/week-5/Steam%20Top%20100%20Played%20Games%20-%20List.csv"
df = pd.read_csv(file_path)

# Data Preprocessing
## Convert numerical values
for col in ['Current Players', 'Peak Today']:
    df[col] = df[col].replace(',', '', regex=True).astype(int)

df['Price Category'] = df['Price'].apply(lambda x: 'Free' if 'Free' in str(x) else 'Paid')

# Generate Word Cloud
genre_text = ' '.join(df['Genre Tags'].dropna())
wordcloud = WordCloud(width=800, height=400, background_color='black', colormap='coolwarm').generate(genre_text)
img = BytesIO()
wordcloud.to_image().save(img, format='PNG')
wordcloud_encoded = base64.b64encode(img.getvalue()).decode()

# Create figures
fig_top_10 = px.bar(df.nlargest(10, 'Current Players'), x='Current Players', y='Name', 
                     orientation='h', title='Top 10 Games by Current Players', 
                     labels={'Current Players': 'Current Players', 'Name': 'Game'},
                     template='plotly_dark')
fig_top_10.update_yaxes(categoryorder='total ascending')
fig_top_10.update_layout(title_font_color='#00FF00', paper_bgcolor='#121212', font=dict(family='Courier New', color='#00FF00'))

fig_histogram = px.histogram(df, x='Peak Today', nbins=20, title='Distribution of Peak Players', template='plotly_dark')
fig_histogram.update_layout(title_font_color='#00FF00', paper_bgcolor='#121212', font=dict(family='Courier New', color='#00FF00'))

fig_pie = px.pie(df, names='Price Category', title='Proportion of Free vs Paid Games', template='plotly_dark')
fig_pie.update_layout(title_font_color='#00FF00', paper_bgcolor='#121212', font=dict(family='Courier New', color='#00FF00'))

# Create Data Table with Thumbnails
df_table = df[['Name', 'Thumbnail URL', 'Current Players', 'Peak Today']].copy()
df_table.rename(columns={'Thumbnail URL': 'Thumbnail'}, inplace=True)

app = dash.Dash(__name__)

app.layout = html.Div(style={'backgroundColor': '#121212', 'color': '#00FF00', 'fontFamily': 'Courier New', 'padding': '20px'}, children=[
    html.H1("Steam Top 100 Played Games Analysis", style={'textAlign': 'center', 'marginBottom': '20px'}),
    
    html.Div([
        html.Div([
            html.H3("Genre Word Cloud", style={'textAlign': 'center', 'color': '#00FF00', 'fontFamily': 'Courier New'}),
            html.Img(src='data:image/png;base64,{}'.format(wordcloud_encoded), style={'width': '100%', 'display': 'block', 'margin': 'auto'})
        ], style={'width': '48%', 'display': 'inline-block', 'padding': '10px'}),
        
        html.Div([
            dcc.Graph(figure=fig_pie, style={'backgroundColor': '#1E1E1E', 'color': '#00FF00'})
        ], style={'width': '48%', 'display': 'inline-block', 'padding': '10px'})
    ], style={'display': 'flex', 'justifyContent': 'space-between'}),
    
    html.Div([
        html.Div([
            dcc.Graph(figure=fig_top_10, style={'backgroundColor': '#1E1E1E', 'color': '#00FF00'})
        ], style={'width': '48%', 'display': 'inline-block', 'padding': '10px'}),
        
        html.Div([
            dcc.Graph(figure=fig_histogram, style={'backgroundColor': '#1E1E1E', 'color': '#00FF00'})
        ], style={'width': '48%', 'display': 'inline-block', 'padding': '10px'})
    ], style={'display': 'flex', 'justifyContent': 'space-between'}),
    
    html.H3("Top Games Table", style={'textAlign': 'center', 'color': '#00FF00', 'fontFamily': 'Courier New', 'marginTop': '20px'}),
    dash_table.DataTable(
        columns=[
            {'name': 'Name', 'id': 'Name'},
            {'name': 'Thumbnail', 'id': 'Thumbnail', 'presentation': 'markdown'},
            {'name': 'Current Players', 'id': 'Current Players'},
            {'name': 'Peak Today', 'id': 'Peak Today'}
        ],
        data=[
            {
                'Name': row['Name'],
                'Thumbnail': f"![img]({row['Thumbnail']})",
                'Current Players': row['Current Players'],
                'Peak Today': row['Peak Today']
            } for _, row in df_table.iterrows()
        ],
        style_header={'backgroundColor': '#1E1E1E', 'color': '#00FF00'},
        style_cell={'backgroundColor': '#121212', 'color': '#00FF00', 'textAlign': 'center'},
        markdown_options={"html": True}
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)