Update app.py

app.py

@@ -1,27 +1,9 @@
 import json
 from collections import Counter
 import numpy as np
-import operator
-import matplotlib.pyplot as plt
-from matplotlib.ticker import FuncFormatter
-from matplotlib.patches import Ellipse
-import seaborn as sns
 import pandas as pd
-import networkx as nx
-import base64
-from collections import defaultdict
-import sys,os
-import math
-import random
-import operator
-import csv
-import matplotlib.pylab as pyl
-import itertools
-import scipy as sp
-from scipy import stats
-from scipy import optimize
-from scipy.integrate import quad
 import altair as alt
+import operator
 
 import warnings
 warnings.filterwarnings('ignore')
@@ -30,14 +12,14 @@ warnings.filterwarnings('ignore')
 events={}
 nations = ['Italy','England','Germany','France','Spain','European_Championship','World_Cup']
 for nation in nations:
-    with open('./events_%s.json' %nation) as json_data:
+    with open('events/events_%s.json' %nation) as json_data:
         events[nation] = json.load(json_data)
         
 # loading the match data
 matches={}
 nations = ['Italy','England','Germany','France','Spain','European_Championship','World_Cup']
 for nation in nations:
-    with open('./matches_%s.json' %nation) as json_data:
+    with open('matches/matches_%s.json' %nation) as json_data:
         matches[nation] = json.load(json_data)
 
 # loading the players data
@@ -50,7 +32,6 @@ competitions={}
 with open('competitions.json') as json_data:
     competitions = json.load(json_data)
 
-
 ev_all_nations = []
 for nation in nations:
     for i in range(len(events[nation])):
@@ -61,310 +42,96 @@ total = len(ev_all_nations)
 counter = {event: int((count / total) * 100) for event, count in count.items()}
 sorted_counter = sorted(counter.items(), key=operator.itemgetter(1), reverse=False)
 
-# Convert to DataFrame for Altair plotting.
-data = pd.DataFrame(sorted_counter, columns=['Event', 'Percentage'])
-
-# Generate the bar chart using Altair.
-chart = alt.Chart(data).mark_bar().encode(
-    y=alt.Y('Event:N', title=None, sort='-x'),  # Sort is handled by the data frame's order.
-    x='Percentage:Q',
-).properties(
-    width=600,
-    height=400
-)
-
-# Display the chart.
-chart.display()
-
-
-data = pd.DataFrame({
-    'Event Count': list(match_ev_count.values())
-})
-
-mean_val = int(np.mean(data['Event Count']))
-std_val = int(np.std(data['Event Count']))
-
-hist = alt.Chart(data).mark_bar().encode(
-    alt.X('Event Count:Q', bin=alt.Bin(maxbins=20), title='events (n)', 
-          axis=alt.Axis(values=np.arange(0, max(data['Event Count']) + 100, 100))),
-    alt.Y('count()', title='frequency (n)')
-).properties(
-    width=600,
-    height=400
-)
-
-text = alt.Chart(pd.DataFrame({'x': [mean_val + std_val], 'y': [1], 'text': [f'μ = {mean_val} \n σ = {std_val}']})).mark_text(
-    align='left',
-    baseline='top',
-    fontSize=20,
-    dx=-120,
-    dy=-300
-).encode(
-    x='x:Q',
-    y='y:Q',
-    text='text:N'
-)
-
-chart = hist + text
-chart.display()
-
 
-import altair as alt
-import pandas as pd
-
-
-match_id = 2576335
-a_match = []
-for nation in nations:
-    for ev in events[nation]:
-        if ev['matchId'] == match_id:
-            a_match.append(ev)
-
-for nation in nations:
-    for match in matches[nation]:
-        if match['wyId'] == match_id:
-            match_f = match
-
-df_a_match = pd.DataFrame(a_match)
-
-background_data = pd.DataFrame({
-    'x': [0],
-    'y': [0],
-    'x2': [100],
-    'y2': [100]
-})
-
-# Create the background using `mark_rect`
-background = alt.Chart(background_data).mark_rect(
-    color='#195905'  # Soccer field green color
-).encode(
-    x='x:Q',
-    y='y:Q',
-    x2='x2:Q',
-    y2='y2:Q'
-)
-
-
-#Define the center circle
-center_circle = alt.Chart(pd.DataFrame({'x': [50], 'y': [50]})).mark_point(
-    size=12000,  # Adjust size as necessary
-    color='white',
-    strokeWidth=3
-).encode(
-    x='x:Q',
-    y='y:Q'
-)
-
-border_lines_data = pd.DataFrame({
-    'x': [1, 1, 99.5, 99.5, 1],
-    'y': [1, 99.5, 99.5, 1, 1],
-    'x2': [1, 99.5, 99.5, 1, 1],
-    'y2': [99.5, 99.5, 1, 1, 1]
-})
-
-# Create the border lines using `mark_line`
-
-border_lines = alt.Chart(border_lines_data).mark_line(
-    color='white',
-    strokeWidth=3  # This controls the thickness of the line
-).encode(
-    x=alt.X('x:Q', scale=alt.Scale(domain=[1, 99.5])),
-    y=alt.Y('y:Q', scale=alt.Scale(domain=[1, 99.5])),
-    x2='x2:Q',
-    y2='y2:Q'
-)
-
-midline_data = pd.DataFrame({
-    'x': [50, 50,],
-    'y': [1, 99, ]
-})
-
-# Create the line using `mark_line`
-midline = alt.Chart(midline_data).mark_line(
-    color='white',  # Color of the line
-    strokeWidth=3   # Thickness of the line
-).encode(
-    x='x:Q',
-    y='y:Q'
-)
-lines_data = pd.DataFrame({
-    'x': [1, 17.5, 17.5, 1, 82.5,  82.5, 99,1,6.5,6.5,1, 99,93.5,93.5],
-    'y': [21.3, 21.3, 77.7, 77.7, 21.3, 77.7, 77.7,37.5,37.5,62.5,62.5,37.5,37.5,62.5],
-    'x2': [17.5, 17.5, 1, 17.5, 99,  82.5, 82.5, 6.5,6.5,1,6.5,93.5,93.5,99],
-    'y2': [21.3, 77.7, 77.7, 77.7, 21.3, 21.3,77.7,37.5,62.5,62.5,62.5,37.5,62.5,62.5]
-})
+data = pd.DataFrame(sorted_counter, columns=['Event', 'Percentage'])
 
-lines = alt.Chart(lines_data).mark_line(
-    color='white',  # Color of the lines
-    strokeWidth=3   # Thickness of the lines
-).encode(
-    x='x:Q',
-    y='y:Q',
-    x2='x2:Q',
-    y2='y2:Q'
-)
+brush = alt.selection_interval(encodings=['y'])
 
-dot_positions = pd.DataFrame({
-    'x': [12, 87],
-    'y': [50, 50]
-})
+max_value = data['Percentage'].max()
+tick_values = list(range(0, int(max_value) + 10, 10))
 
-# Create the white dots using `mark_point`
-white_dots = alt.Chart(dot_positions).mark_point(
-    size=100,  # Adjust the size as needed
-    color='white',
-    filled=True
-).encode(
-    x='x:Q',
-    y='y:Q'
+bars = alt.Chart(data).mark_bar().encode(
+    y=alt.Y('Event:N', title=None, sort='-x'),
+    x=alt.X('Percentage:Q', title='events(%)', axis=alt.Axis(values=tick_values)),
+    color=alt.condition(brush, alt.Color('Event:N', legend=None), alt.value('lightgray'))
+).add_selection(
+    brush
 )
 
-
-
-theta = np.linspace(0, np.pi, 100)  # Radians from 0 to pi for a full semicircle
-semicircle_x = 12 + 9.5 * np.cos(theta)  # Shift the semicircle to the right of x=12
-semicircle_y = 50 + 9.5 * np.sin(theta)
-
-# Convert the points to a dataframe
-semicircle_data = pd.DataFrame({
-    'x': semicircle_x,
-    'y': semicircle_y
-})
-
-# Filter to keep the right side of the semicircle only
-semicircle_data = semicircle_data[semicircle_data['x'] >= 17.5]
-
-# Create the semicircle line
-arc1 = alt.Chart(semicircle_data).mark_line(
-    color='white',
-    strokeWidth=3
-).encode(
-    x=alt.X('x', scale=alt.Scale(domain=[0, 100])),
-    y=alt.Y('y', scale=alt.Scale(domain=[0, 100]))
+average_rule = alt.Chart(data).mark_rule(color='firebrick', strokeWidth=2).encode(
+    x='mean(Percentage):Q'
+).transform_filter(
+    brush
 )
 
-
-
-theta = np.linspace(0, np.pi, 100)  # Radians from 0 to pi for a full semicircle
-semicircle_x2 = 12 + 9.5 * np.cos(theta)  # Shift the semicircle to the right of x=12
-semicircle_y2 = 50 - 9.5 * np.sin(theta)
-
-# Convert the points to a dataframe
-semicircle_data2 = pd.DataFrame({
-    'x': semicircle_x2,
-    'y': semicircle_y2
-})
-
-# Filter to keep the right side of the semicircle only
-semicircle_data2 = semicircle_data2[semicircle_data2['x'] >= 17.5]
-
-# Create the semicircle line
-arc2 = alt.Chart(semicircle_data2).mark_line(
-    color='white',
-    strokeWidth=3
+average_text = alt.Chart(data).mark_text(
+    dx=5, dy=-5, color='firebrick', align='left', fontWeight='bold'
 ).encode(
-    x=alt.X('x', scale=alt.Scale(domain=[0, 100])),
-    y=alt.Y('y', scale=alt.Scale(domain=[0, 100]))
+    x=alt.X('mean(Percentage):Q', aggregate='mean'),
+    text=alt.Text('mean(Percentage):Q', aggregate='mean', format='.1f')
+).transform_filter(
+    brush
 )
 
-
-theta = np.linspace(0, np.pi, 100)  # Radians from 0 to pi for a full semicircle
-semicircle_x3 = 87 - 9.5 * np.cos(theta)  # Shift the semicircle to the right of x=12
-semicircle_y3 = 50 + 9.5 * np.sin(theta)
-
-# Convert the points to a dataframe
-semicircle_data3 = pd.DataFrame({
-    'x': semicircle_x3,
-    'y': semicircle_y3
-})
-
-# Filter to keep the right side of the semicircle only
-semicircle_data3 = semicircle_data3[semicircle_data3['x'] <= 82.5]
-
-# Create the semicircle line
-arc3 = alt.Chart(semicircle_data3).mark_line(
-    color='white',
-    strokeWidth=3
-).encode(
-    x=alt.X('x', scale=alt.Scale(domain=[0, 100])),
-    y=alt.Y('y', scale=alt.Scale(domain=[0, 100]))
+chart1 = alt.layer(bars, average_rule, average_text).properties(
+    width=600,
+    height=500,
+    title='Events Distribution'
 )
 
+# Display the combined chart
+chart1
 
+match_ev_count = {}
+for nation in nations:
+    for ev in events[nation]:
+        if ev['matchId'] not in match_ev_count:
+            match_ev_count[ev['matchId']] = 1
+        else:
+            match_ev_count[ev['matchId']] += 1
 
-theta = np.linspace(0, np.pi, 100)  # Radians from 0 to pi for a full semicircle
-semicircle_x4 = 87 - 9.5 * np.cos(theta)  # Shift the semicircle to the right of x=12
-semicircle_y4 = 50 - 9.5 * np.sin(theta)
-
-# Convert the points to a dataframe
-semicircle_data4 = pd.DataFrame({
-    'x': semicircle_x4,
-    'y': semicircle_y4
+data = pd.DataFrame({
+    'Event Count': list(match_ev_count.values())
 })
 
-# Filter to keep the right side of the semicircle only
-semicircle_data4 = semicircle_data4[semicircle_data4['x'] <= 82.5]
-
-# Create the semicircle line
-arc4 = alt.Chart(semicircle_data4).mark_line(
-    color='white',
-    strokeWidth=3
-).encode(
-    x=alt.X('x', scale=alt.Scale(domain=[0, 100]), title=None ),
-    y=alt.Y('y', scale=alt.Scale(domain=[0, 100]), title=None)
-)
+event_count_values = list(match_ev_count.values())
+min_value = min(event_count_values)
+max_value = max(event_count_values)
 
 
-df_a_match['x'] = [pos[0]['x'] for pos in df_a_match['positions']]
-df_a_match['y'] = [pos[0]['y'] for pos in df_a_match['positions']]
+ticks = list(range((min_value // 200) * 200, (max_value // 200 + 1) * 200, 200))
 
-brush = alt.selection(type='interval', encodings=['x','y'])
-#Create scatter plots for events and color by teamId
+click = alt.selection_single(encodings=['x'], nearest=True)
 
-team_event = alt.Chart(df_a_match).mark_point(
-    size=50,  # Adjust the size as necessary
-    opacity=1,
-    filled=True
-).encode(
-    x=alt.X('x:Q', axis=alt.Axis(labels=False, ticks=False, grid=False)),
-    y=alt.Y('y:Q', axis=alt.Axis(labels=False, ticks=False, grid=False)),
-    #color=alt.Color('teamId:N', legend=None, scale=alt.Scale(domain=list(df_a_match['teamId'].unique()), range=['black', 'cyan'])),
-    color=alt.condition(brush,  # Only apply color to selected points
-                        alt.Color('teamId:N', legend=None, scale=alt.Scale(domain=list(df_a_match['teamId'].unique()), range=['black', 'cyan'])),
-                        alt.value('lightgray')), 
-    tooltip=['eventName:N', 'teamId:N', 'x:Q', 'y:Q']
+hist = alt.Chart(data).mark_bar().encode(
+    alt.X('Event Count:Q', bin=alt.Bin(maxbins=20), title='events (n)', axis=alt.Axis(values=ticks)),
+    alt.Y('count()', title='frequency (n)'),
+    tooltip=[alt.Tooltip('mean(Event Count):Q', title='Mean', format='.2f')]
+).properties(
+    width=600,
+    height=400
 ).add_selection(
-    brush
+    click
 )
 
-
-
-
-# Combine the pitch background, center dot, and events
-soccer_pitch = alt.layer(background, border_lines, midline, lines, white_dots, arc1, arc2, arc3, arc4, center_circle, team_event).properties(
-    width=700,
-    height=440,
-    title="Lazio - Internazionale, 2 - 3"
+mean_rule = alt.Chart(data).transform_filter(
+    click
+).mark_rule(color='firebrick', size=3).encode(
+    x='mean(Event Count):Q',
 )
 
-bars = alt.Chart(df_a_match).mark_bar().encode(
-    y=alt.Y('eventName:N', sort='-x', title=None),
-    x=alt.X('count():Q', title=None),
-    # This specifies a separate color encoding for the bar chart based on eventName
-    color=alt.Color('eventName:N',legend=None)
-).transform_filter(
-    brush
+chart2 = alt.layer(hist, mean_rule).properties(
+    title='Histogram of Event Counts with Click Interaction and Tooltip'
 )
 
+chart2
 
-
-combined_chart = alt.hconcat(
-    soccer_pitch,
-    bars
+combined_chart1 = alt.hconcat(
+    chart1,
+    chart2,
+    spacing=10
 ).resolve_scale(
     color='independent'
 )
-# Display the combined chart
-combined_chart.display()
-
+combined_chart1