Update app.py

app.py

@@ -15,14 +15,14 @@ pn.extension('vega')
 events={}
 nations = ['Italy','England','Germany','France','Spain','European_Championship','World_Cup']
 for nation in nations:
-    with open('events/events_%s.json' %nation) as json_data:
+    with open('./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/matches_%s.json' %nation) as json_data:
+    with open('./matches_%s.json' %nation) as json_data:
         matches[nation] = json.load(json_data)
 
 # loading the players data
@@ -34,8 +34,7 @@ with open('players.json') as json_data:
 competitions={}
 with open('competitions.json') as json_data:
     competitions = json.load(json_data)
-
-ev_all_nations = []
+    ev_all_nations = []
 for nation in nations:
     for i in range(len(events[nation])):
         ev_all_nations.append(events[nation][i]['eventName'])
@@ -85,70 +84,302 @@ chart1 = alt.layer(bars, average_rule, average_text).properties(
 # Display the combined chart
 chart1
 
-match_ev_count = {}
+match_id = 2576335
+a_match = []
 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
+        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)
 
-data = pd.DataFrame({
-    'Event Count': list(match_ev_count.values())
+background_data = pd.DataFrame({
+    'x': [0],
+    'y': [0],
+    'x2': [100],
+    'y2': [100]
 })
 
-event_count_values = list(match_ev_count.values())
-min_value = min(event_count_values)
-max_value = max(event_count_values)
+# Create the background
+background = alt.Chart(background_data).mark_rect(
+    color='#195905'
+).encode(
+    x='x:Q',
+    y='y:Q',
+    x2='x2:Q',
+    y2='y2:Q'
+)
 
 
-ticks = list(range((min_value // 200) * 200, (max_value // 200 + 1) * 200, 200))
+#Define the center circle
+center_circle = alt.Chart(pd.DataFrame({'x': [50], 'y': [50]})).mark_point(
+    size=12000,
+    color='white',
+    strokeWidth=3
+).encode(
+    x='x:Q',
+    y='y:Q'
+)
 
-click = alt.selection_single(encodings=['x'], nearest=True)
 
-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
+# Create the border lines
+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]
+})
+
+
+border_lines = alt.Chart(border_lines_data).mark_line(
+    color='white',
+    strokeWidth=3
+).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',
+    strokeWidth=3
+).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]
+})
+
+lines = alt.Chart(lines_data).mark_line(
+    color='white',
+    strokeWidth=3
+).encode(
+    x='x:Q',
+    y='y:Q',
+    x2='x2:Q',
+    y2='y2:Q'
+)
+
+dot_positions = pd.DataFrame({
+    'x': [12, 87],
+    'y': [50, 50]
+})
+
+# Create the white dots
+white_dots = alt.Chart(dot_positions).mark_point(
+    size=100,
+    color='white',
+    filled=True
+).encode(
+    x='x:Q',
+    y='y:Q'
+)
+
+
+
+theta = np.linspace(0, np.pi, 100)
+semicircle_x = 12 + 9.5 * np.cos(theta) 
+semicircle_y = 50 + 9.5 * np.sin(theta)
+
+semicircle_data = pd.DataFrame({
+    'x': semicircle_x,
+    'y': semicircle_y
+})
+
+semicircle_data = semicircle_data[semicircle_data['x'] >= 17.5]
+
+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]))
+)
+
+
+
+theta = np.linspace(0, np.pi, 100)
+semicircle_x2 = 12 + 9.5 * np.cos(theta)
+semicircle_y2 = 50 - 9.5 * np.sin(theta)
+
+semicircle_data2 = pd.DataFrame({
+    'x': semicircle_x2,
+    'y': semicircle_y2
+})
+
+
+semicircle_data2 = semicircle_data2[semicircle_data2['x'] >= 17.5]
+
+
+arc2 = alt.Chart(semicircle_data2).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]))
+)
+
+
+theta = np.linspace(0, np.pi, 100)
+semicircle_x3 = 87 - 9.5 * np.cos(theta)
+semicircle_y3 = 50 + 9.5 * np.sin(theta)
+
+
+semicircle_data3 = pd.DataFrame({
+    'x': semicircle_x3,
+    'y': semicircle_y3
+})
+
+
+semicircle_data3 = semicircle_data3[semicircle_data3['x'] <= 82.5]
+
+
+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]))
+)
+
+
+
+theta = np.linspace(0, np.pi, 100)
+semicircle_x4 = 87 - 9.5 * np.cos(theta)
+semicircle_y4 = 50 - 9.5 * np.sin(theta)
+
+semicircle_data4 = pd.DataFrame({
+    'x': semicircle_x4,
+    'y': semicircle_y4
+})
+
+semicircle_data4 = semicircle_data4[semicircle_data4['x'] <= 82.5]
+
+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)
+)
+
+
+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']]
+
+
+# brush2 = alt.selection_interval(
+#     on="[mousedown[event.shiftKey], mouseup] > mousemove",
+#     translate="[mousedown[event.shiftKey], mouseup] > mousemove!",
+# )
+
+brush2 = alt.selection(type='interval', encodings=['x', 'y'])
+
+team_event = alt.Chart(df_a_match).mark_point(
+    size=50,
+    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.condition(brush2,
+                        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']
 ).add_selection(
-    click
+    brush2
+)
+
+
+zoom = alt.selection_interval(
+    bind='scales',
+    on="[mousedown[!event.shiftKey], mouseup] > mousemove",
+    translate="[mousedown[!event.shiftKey], mouseup] > mousemove!",
+)
+
+
+
+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"
+)
+
+
+soccer_pitch = soccer_pitch.add_selection(
+    zoom,
+)
+
+
+
+bars = alt.Chart(df_a_match).mark_bar().encode(
+    y=alt.Y('eventName:N', sort='-x', title=None),
+    x=alt.X('count():Q', title='frequency'),
+    color=alt.Color('eventName:N',legend=None)
+).transform_filter(
+   brush2
 )
 
-mean_rule = alt.Chart(data).transform_filter(
-    click
-).mark_rule(color='firebrick', size=3).encode(
-    x='mean(Event Count):Q',
+
+annotations_df = pd.DataFrame({
+    'text': ['You can select part of the graph to see distributoon of events'],
+    'x': [0],
+    'y': [0]
+})
+
+annotations_chart = alt.Chart(annotations_df).mark_text(
+    align='left',
+    baseline='middle',
+    fontSize=12,
+    fontStyle='italic'
+).encode(
+    text='text:N'
+).properties(
+    width=700,
+    height=20
 )
 
-chart2 = alt.layer(hist, mean_rule).properties(
-    title='Histogram of Event Counts with Click Interaction and Tooltip'
+soccer_pitch_with_annotations = alt.vconcat(
+    soccer_pitch,
+    annotations_chart,
+    spacing=5
 )
 
-chart2
 
-combined_chart1 = alt.hconcat(
-    chart1,
-    chart2,
+combined_chart2 = alt.hconcat(
+    soccer_pitch_with_annotations,
+    bars,
     spacing=10
 ).resolve_scale(
     color='independent'
 )
-combined_chart1
+
 
 
 chart1_panel = pn.pane.Vega(chart1, sizing_mode='stretch_width')
-chart2_panel = pn.pane.Vega(chart2, sizing_mode='stretch_width')
-combined_chart1_panel = pn.pane.Vega(combined_chart1, sizing_mode='stretch_width')
+combined_chart1_panel = pn.pane.Vega(combined_chart2, sizing_mode='stretch_width')
 
 
 dashboard = pn.Column(
     "# My Interactive Dashboard",  # 可以添加标题
     chart1_panel, 
-    chart2_panel,
-    combined_chart1_panel
+    combined_chart2_panel
 )
 
 # 设置应用程序为可服务的