Update app.py

app.py

@@ -1,147 +1,184 @@
-import io
-import random
-from typing import List, Tuple
-
-import aiohttp
+# load up the libraries
 import panel as pn
-from PIL import Image
-from transformers import CLIPModel, CLIPProcessor
-
-pn.extension(design="bootstrap", sizing_mode="stretch_width")
-
-ICON_URLS = {
-    "brand-github": "https://github.com/holoviz/panel",
-    "brand-twitter": "https://twitter.com/Panel_Org",
-    "brand-linkedin": "https://www.linkedin.com/company/panel-org",
-    "message-circle": "https://discourse.holoviz.org/",
-    "brand-discord": "https://discord.gg/AXRHnJU6sP",
-}
-
-
-async def random_url(_):
-    pet = random.choice(["cat", "dog"])
-    api_url = f"https://api.the{pet}api.com/v1/images/search"
-    async with aiohttp.ClientSession() as session:
-        async with session.get(api_url) as resp:
-            return (await resp.json())[0]["url"]
-
-
-@pn.cache
-def load_processor_model(
-    processor_name: str, model_name: str
-) -> Tuple[CLIPProcessor, CLIPModel]:
-    processor = CLIPProcessor.from_pretrained(processor_name)
-    model = CLIPModel.from_pretrained(model_name)
-    return processor, model
-
-
-async def open_image_url(image_url: str) -> Image:
-    async with aiohttp.ClientSession() as session:
-        async with session.get(image_url) as resp:
-            return Image.open(io.BytesIO(await resp.read()))
-
+import pandas as pd
+import altair as alt
+import math
+from vega_datasets import data
+
+# Define functions
+def plot_event_distribution(df, eventName):
+    time_labels = ['0-5', '5-10', '10-15', '15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50', '50-55', '55-60', '60-65', '65-70', '70-75', '75-80', '80-85', '85-90', '>90']
+    time_labels_plt = ['0-5', '5-10', '10-15', '15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '>45', '45-50', '50-55', '55-60', '60-65', '65-70', '70-75', '75-80', '80-85', '85-90', '>90']
+
+    event_data = df[df['eventName'] == eventName].copy()
+    event_data['timeLabel'] = "0"
+
+    for index, row in event_data.iterrows():
+        minute = row['minute']
+        match_period = row['matchPeriod']
+        time_label = '1'
+
+        if minute > 45 and match_period == '1H':
+            time_label = '>45'
+        else:
+            left = math.floor(minute / 5)
+            if left < len(time_labels) - 1:
+                time_label = time_labels[left]
+            else:
+                time_label = '>90'
+
+        event_data.loc[index, 'timeLabel'] = time_label
+
+    return event_data
+
+def create_event_distribution_df(event_dfs, event_names):
+    # 初始化一个空的DataFrame来存储结果
+    results_df = pd.DataFrame(columns=['TeamName', 'eventName', 'timeLabel', 'total_counts', 'matchPeriod'])
+    for event_df, event_name in zip(event_dfs, event_names):
+        group_counts = event_df.groupby(['TeamName', 'timeLabel', 'matchPeriod']).size().reset_index(name='total_counts')
+        group_counts['eventName'] = event_name
+        results_df = pd.concat([results_df, group_counts], ignore_index=True)
+
+    return results_df
+
+def create_altair_chart(final_df, eventName, order, if_add_xticks=False):
+    
+    selection_interval=alt.selection_interval(encodings=["x"])
+    
+    mouse_hover = alt.selection_point(on="mouseover", empty=True)
+
+    color_encode = alt.Color('matchPeriod:N', title='', scale=alt.Scale(domain=['1H', '2H'], range=['rgb(76, 114, 176)', 'rgb(85, 168, 104)']))
+
+    # 这里我们用yellow card来举例   
+    # 1. Base bar plot
+    base1 = alt.Chart(final_df[final_df['eventName'] == '{}'.format(eventName)]).encode(
+        x = alt.X('timeLabel:O', scale=alt.Scale(domain=order, paddingInner=0.2), axis=alt.Axis(grid=True, labels=False)),
+        y = alt.Y('sum(total_counts):Q', title='{} (n)'.format(eventName), axis=alt.Axis(tickCount=3, titleFontSize=24, labelFontSize=18)),    
+        color = alt.condition(selection_interval, 
+                            color_encode, 
+                            alt.value("lightgray")),
+        opacity=alt.condition(mouse_hover, alt.value(1), alt.value(0.5))
+    ).add_selection(
+        selection_interval,
+        mouse_hover
+    )
+    
+    if if_add_xticks:
+        base1 = base1.encode(
+            x = alt.X('timeLabel:O', title='match time (min)' ,scale=alt.Scale(domain=order, paddingInner=0.2), axis=alt.Axis(grid=True, titleFontSize=24, labelFontSize=18)),
+        )
+    
+    bar_chart_yellow1 = base1.mark_bar()
 
-def get_similarity_scores(class_items: List[str], image: Image) -> List[float]:
-    processor, model = load_processor_model(
-        "openai/clip-vit-base-patch32", "openai/clip-vit-base-patch32"
+    # 2. Add vertical line
+    vertical_line1 = alt.Chart(final_df[(final_df['eventName'] == '{}'.format(eventName)) & (final_df['timeLabel'] == ' ')]).encode(
+        # only show the vertical line at x == ' '
+        x = alt.X('timeLabel:O', scale=alt.Scale(domain=[' ']), title=''),
     )
-    inputs = processor(
-        text=class_items,
-        images=[image],
-        return_tensors="pt",  # pytorch tensors
+    
+    vertical_line1 = vertical_line1.mark_rule(color='orange', strokeWidth=2)
+
+    # 3. Add text
+    text_chart1 = alt.Chart(final_df[(final_df['eventName'] == '{}'.format(eventName)) & (final_df['timeLabel'] == ' ')]).encode(
+        # only show the vertical line at x == ' '
+        x = alt.X('timeLabel:O', scale=alt.Scale(domain=[' ']), title=''),
     )
-    outputs = model(**inputs)
-    logits_per_image = outputs.logits_per_image
-    class_likelihoods = logits_per_image.softmax(dim=1).detach().numpy()
-    return class_likelihoods[0]
-
-
-async def process_inputs(class_names: List[str], image_url: str):
-    """
-    High level function that takes in the user inputs and returns the
-    classification results as panel objects.
-    """
-    try:
-        main.disabled = True
-        if not image_url:
-            yield "##### ⚠️ Provide an image URL"
-            return
     
-        yield "##### ⚙ Fetching image and running model..."
-        try:
-            pil_img = await open_image_url(image_url)
-            img = pn.pane.Image(pil_img, height=400, align="center")
-        except Exception as e:
-            yield f"##### 😔 Something went wrong, please try a different URL!"
-            return
+    text_chart1 = text_chart1.mark_text(align='center', baseline='middle', fontSize=23, color='orange', dy=-100, text='Half Time', font='Arial')
     
-        class_items = class_names.split(",")
-        class_likelihoods = get_similarity_scores(class_items, pil_img)
     
-        # build the results column
-        results = pn.Column("##### 🎉 Here are the results!", img)
+    # 4. Add the rank bar
+    bar_rank_yellow = alt.Chart(final_df[final_df['eventName'] == '{}'.format(eventName)]).transform_filter(selection_interval).transform_aggregate(
+        sum_total_counts='sum(total_counts)',
+        groupby=['TeamName']
+    ).transform_window(
+        rank='rank(sum_total_counts)',
+        sort=[alt.SortField('sum_total_counts', order='descending')]
+    ).transform_filter(
+        alt.datum.rank < 10  # Note: Change this to <= if you want to include the 10th position
+    ).encode(
+        x=alt.X('sum_total_counts:Q', title='', axis=alt.Axis(labelFontSize=9)),
+        y=alt.Y('TeamName:N', sort='-x', title='Team Name', axis=alt.Axis(titleFontSize=24, labelFontSize=12, orient='right'))
+    )
     
-        for class_item, class_likelihood in zip(class_items, class_likelihoods):
-            row_label = pn.widgets.StaticText(
-                name=class_item.strip(), value=f"{class_likelihood:.2%}", align="center"
-            )
-            row_bar = pn.indicators.Progress(
-                value=int(class_likelihood * 100),
-                sizing_mode="stretch_width",
-                bar_color="secondary",
-                margin=(0, 10),
-                design=pn.theme.Material,
-            )
-            results.append(pn.Column(row_label, row_bar))
-        yield results
-    finally:
-        main.disabled = False
-
-
-# create widgets
-randomize_url = pn.widgets.Button(name="Randomize URL", align="end")
-
-image_url = pn.widgets.TextInput(
-    name="Image URL to classify",
-    value=pn.bind(random_url, randomize_url),
-)
-class_names = pn.widgets.TextInput(
-    name="Comma separated class names",
-    placeholder="Enter possible class names, e.g. cat, dog",
-    value="cat, dog, parrot",
-)
+    if if_add_xticks:
+        bar_rank_yellow = bar_rank_yellow.encode(
+            x=alt.X('sum_total_counts:Q', title='Average {}'.format(eventName), axis=alt.Axis(titleFontSize=24,labelFontSize=9)),
+        )
+    
+    bar_rank_yellow =  bar_rank_yellow.mark_bar(color='orange').properties(width=300, height=250)
+    
+    # 5. Combine all the charts
+    first = (bar_chart_yellow1 + vertical_line1 + text_chart1)
+    first = first.encode(tooltip=alt.Tooltip('sum(total_counts):Q', format='.0f'))
+    # bar_rank_yellow = bar_rank_yellow.encode(tooltip=alt.Tooltip('sum(total_counts):Q', format='.0f'))
+    yellow = first.properties(width=700, height=250) | bar_rank_yellow
 
-input_widgets = pn.Column(
-    "##### 😊 Click randomize or paste a URL to start classifying!",
-    pn.Row(image_url, randomize_url),
-    class_names,
-)
+    return yellow
+
+# we want to use bootstrap/template, tell Panel to load up what we need
+pn.extension(design='bootstrap')
 
-# add interactivity
-interactive_result = pn.panel(
-    pn.bind(process_inputs, image_url=image_url, class_names=class_names),
-    height=600,
+# we want to use vega, tell Panel to load up what we need
+pn.extension('vega')
+
+# create a basic template using bootstrap
+template = pn.template.BootstrapTemplate(
+    title='SI649 Scientific Visualization Project',
 )
 
-# add footer
-footer_row = pn.Row(pn.Spacer(), align="center")
-for icon, url in ICON_URLS.items():
-    href_button = pn.widgets.Button(icon=icon, width=35, height=35)
-    href_button.js_on_click(code=f"window.open('{url}')")
-    footer_row.append(href_button)
-footer_row.append(pn.Spacer())
-
-# create dashboard
-main = pn.WidgetBox(
-    input_widgets,
-    interactive_result,
-    footer_row,
+# 0. the main column will hold our key content
+maincol = pn.Column()
+
+# 1. Load the Data
+url = 'https://raw.githubusercontent.com/yanzhuo2001/SI_649_Projects/main/scientific%20viz%20project/final_data.csv'
+df = pd.read_csv(url)
+
+for index, row in df.iterrows():
+    minute = row['minute']
+    minute1 = math.floor(minute)
+    df.loc[index, 'minute1'] = minute1
+
+YC_df = plot_event_distribution(df, 'Yellow_Card')
+RC_df = plot_event_distribution(df, 'Red_Card')
+Goal_df = plot_event_distribution(df, 'Goal')
+
+event_dfs = [YC_df, RC_df, Goal_df]
+event_names = ['Yellow_Card', 'Red_Card', 'Goal']
+final_df = create_event_distribution_df(event_dfs, event_names)
+final_df = final_df[final_df['matchPeriod'].isin(['1H', '2H'])]
+
+for name in final_df['TeamName'].unique():
+    new = pd.DataFrame({
+        'eventName': ['Yellow_Card', 'Red_Card', 'Goal'],
+        'timeLabel': [' '] * 3,
+        'total_counts': [0] * 3,
+        'matchPeriod': ['1H']*3,
+        'TeamName': [name] *3
+    })
+    final_df = pd.concat([final_df, new], ignore_index=True)
+    
+order = ['0-5', '5-10', '10-15', '15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '>45', ' ', '45-50', '50-55', '55-60', '60-65', '65-70', '70-75', '75-80', '80-85', '85-90', '>90']
+
+yellow = create_altair_chart(final_df, 'Yellow_Card', order, if_add_xticks=False)
+red = create_altair_chart(final_df, 'Red_Card', order, if_add_xticks=True)
+goal = create_altair_chart(final_df, 'Goal', order, if_add_xticks=False)
+
+final = (goal & yellow & red).configure_legend(
+    orient='top-left',     # 图例位置在左上角
+    labelFontSize=18,      # 图例标签的字体大小
+    symbolSize=250,        # 图例符号的大小
+    fillColor='white',     # 图例背景颜色
+    strokeWidth=2,         # 图例边框粗细
+    padding=10,            # 图例内的填充
+).configure_view(
+    strokeWidth=1,         # 图表边框粗细
+    stroke='black'
 )
 
-title = "Panel Demo - Image Classification"
-pn.template.BootstrapTemplate(
-    title=title,
-    main=main,
-    main_max_width="min(50%, 698px)",
-    header_background="#F08080",
-).servable(title=title)
+# 2. append the plot
+maincol.append(final)   
+template.main.append(maincol)
+
+# Indicate that the template object is the "application" and serve it
+template.servable(title="SI649 Scientific Visualization Project")