Update app.py

app.py

@@ -1,147 +1,246 @@
-import io
-import random
-from typing import List, Tuple
+# start with the setup
+
+# supress warnings about future deprecations
+import warnings
+warnings.simplefilter(action='ignore', category=FutureWarning)
+
+import pandas as pd
+import altair as alt
+import numpy as np
+import pprint
+import datetime as dt
+from vega_datasets import data
+import matplotlib.pyplot as plt
+
+# Solve a javascript error by explicitly setting the renderer
+alt.renderers.enable('jupyterlab')
+
+#load data 
+df1=pd.read_csv("https://raw.githubusercontent.com/dallascard/SI649_public/main/altair_hw3/approval_polllist.csv")
+df2=pd.read_csv("https://raw.githubusercontent.com/dallascard/SI649_public/main/altair_hw3/approval_topline.csv")
+
+#change the approval ratings into percentage
+df1['approve_percent']=df1['approve']/100
+df1.head()
+
+df2['timestamp']=pd.to_datetime(df2['timestamp'])
+df2=pd.melt(df2, id_vars=['president', 'subgroup', 'timestamp'], value_vars=['approve','disapprove']).rename(columns={'variable':'choice', 'value':'rate'})
+df2.head()
+
+
+##TODO: replicate vis 1 
+
+##Static Component - Bars
+barchart1_1 = alt.Chart(df1).transform_joinaggregate(
+    groupby=['pollster']
+).mark_bar(height=15).encode(
+    alt.X('mean(approve_percent):Q', axis=alt.Axis(labels=True, title=None)),
+    alt.Y('pollster:N', axis=alt.Axis(labels=True, title=None)),
+    alt.Tooltip('mean(approve_percent):Q', format='.0%')
+).properties(
+    title='Average Approval Ratings for Joe Biden'
+)
 
-import aiohttp
-import panel as pn
-from PIL import Image
-from transformers import CLIPModel, CLIPProcessor
+##Static Component - Vertical Line
+vline1_1 = alt.Chart(df1).mark_rule(size=3, color="firebrick").encode(
+    alt.X('mean(approve_percent):Q')
+)
 
-pn.extension(design="bootstrap", sizing_mode="stretch_width")
+##Static Component - Text
+text1_1 = vline1_1.mark_text(
+    color='firebrick',
+    fontSize=12,
+    align='left',
+    dx=7
+).encode(
+    alt.Text('mean(approve_percent):Q', format='.2%'),
+)
 
-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",
-}
+##Put all together
+selection1 = alt.selection_interval(encodings=["y"])
+condition1 = alt.condition(selection1, alt.value(1.0), alt.value(0.6))
 
+barchart1_2 = barchart1_1.add_params(selection1).encode(
+    opacity = condition1
+)
 
-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"]
+vline1_2 = vline1_1.add_params(selection1).transform_filter(selection1)
 
+text1_2 = text1_1.transform_filter(selection1)
 
-@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
+final_viz1 = barchart1_2 + vline1_2 + text1_2
+final_viz1
 
 
-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()))
 
+#TODO: replicate vis2
 
-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"
-    )
-    inputs = processor(
-        text=class_items,
-        images=[image],
-        return_tensors="pt",  # pytorch tensors
-    )
-    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
-    
-        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)
-    
-        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),
+# Create selection and condition
+selection2 = alt.selection_interval(encodings=["x"])
+condition2 = alt.condition(selection2, alt.value(1.0), alt.value(0.6))
+
+# scatter plot
+scatter2_1 = alt.Chart(df1).mark_point().transform_joinaggregate(
+    groupby=['pollster']
+).encode(
+    alt.X('startdate:T', axis=alt.Axis(labels=True, title=None)),
+    alt.Y('mean(adjusted_approve):Q', axis=alt.Axis(title='Approval ratings')),
+    color='pollster:N',
+)
+
+# bar chart
+bar2_1 = alt.Chart(df1).mark_bar().transform_joinaggregate(
+    groupby=['pollster:N']
+).encode(
+    alt.X('mean(adjusted_approve):Q', axis=alt.Axis(title = 'Mean of Approval Ratings')),
+    alt.Y('pollster:N', axis=alt.Axis(labels=True, title=None)),
+    color='pollster:N'
+)
+
+# Put them all together
+# scatter2_1 & bar2_1
+
+scatter2_2 = scatter2_1.add_params(selection2).encode(
+    opacity = condition2
+)
+
+bar2_2 = bar2_1.add_params(selection2).transform_filter(selection2)
+
+final_viz2 = (scatter2_2 & bar2_2).properties(
+    title='Recently Reported Approval Ratings for Joe Biden'
+)
+
+final_viz2
+
+
+#TODO: replicate vis3
+# https://altair-viz.github.io/gallery/multiline_tooltip.html
+
+# Create a selection for zooming and panning across the x-axis
+scale = alt.selection_interval(bind='scales', encodings=['x'])
+
+# Create a selection and condition for the vertical line, annotation dots, and text annotations
+nearest = alt.selection_point(on='mouseover', encodings=['x'], nearest=True, empty=False)
+opacityCondition = alt.condition(nearest, alt.value(1), alt.value(0))
+
+# Create the base chart and filter to All polls
+base3 = alt.Chart(df2).mark_line(size=2.5).transform_filter(
+    alt.datum.subgroup =='All polls'
+).encode(
+    alt.X('timestamp:T', axis=alt.Axis(labels=True, title=None)),
+    y='rate:Q',
+    color='choice:N'
+).add_params(scale).properties(
+    title='Approval Ratings for Joe Biden 2021-2023'
+)
+
+# Static line chart
+# Vertical line
+selectors = alt.Chart(df2).mark_point().encode(
+    x='timestamp:T',
+    opacity=alt.value(0),
+).add_params(
+    nearest
 )
-class_names = pn.widgets.TextInput(
-    name="Comma separated class names",
-    placeholder="Enter possible class names, e.g. cat, dog",
-    value="cat, dog, parrot",
+
+rules = alt.Chart(df2).mark_rule(size=4, color='lightgray').encode(
+    x='timestamp:T'
+).transform_filter(
+    nearest
 )
 
-input_widgets = pn.Column(
-    "##### 😊 Click randomize or paste a URL to start classifying!",
-    pn.Row(image_url, randomize_url),
-    class_names,
+#interaction dots
+points = base3.mark_point(size=90).encode(
+    opacity= opacityCondition  # alt.condition(nearest, alt.value(1), alt.value(0))
 )
 
-# add interactivity
-interactive_result = pn.panel(
-    pn.bind(process_inputs, image_url=image_url, class_names=class_names),
-    height=600,
+#interaction text labels
+text = base3.mark_text(fontSize=14, align='left', dx=7).transform_filter(
+    alt.datum.subgroup =='All polls'
+).encode(
+    text=alt.condition(nearest, 'rate:Q', alt.value(' '), format='.2f')
 )
 
-# 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,
+#Put them all together
+alt.layer(
+    base3, selectors, points, rules, text
+).properties(
+    width=400, height=300
 )
 
-title = "Panel Demo - Image Classification"
-pn.template.BootstrapTemplate(
-    title=title,
-    main=main,
-    main_max_width="min(50%, 698px)",
-    header_background="#F08080",
-).servable(title=title)
+
+
+## Viz 4
+# Import panel and vega datasets
+
+import panel as pn
+import vega_datasets
+
+# Enable Panel extensions
+pn.extension()
+
+# Define a function to create and return a plot
+
+def create_plot(subgroup, date_range, moving_av_window):
+
+    # Apply any required transformations to the data in pandas
+    approve_data = df2[df2['choice']=='approve']
+    filtered_data = approve_data[approve_data['subgroup'] == subgroup]
+    filtered_data = filtered_data[(filtered_data['timestamp'].dt.date >= date_range[0]) & \
+                                  (filtered_data['timestamp'].dt.date <= date_range[1])]
+    filtered_data['mov_avg'] = filtered_data['rate'].rolling(window=moving_av_window).mean().shift(-moving_av_window//2)
+
+    # Line chart
+    smoothed_line = alt.Chart(filtered_data).mark_line(color='red', size=2).encode(
+        x='timestamp:T',
+        y='mov_avg:Q'
+    )
+
+    # Scatter plot with individual polls
+    scatter4 = alt.Chart(filtered_data).mark_point(size=2, opacity=0.7, color='grey').encode(
+        x='timestamp:T',
+        y=alt.Y('rate:Q', title='approve', scale=alt.Scale(domain=[30, 60])),
+    ).properties(width=600, height=400)
+
+    # Put them togetehr
+    plot = (scatter4+smoothed_line).encode(
+        y=alt.Y(axis=alt.Axis(title='approve, mov_avg'))
+        )
+
+    # Return the combined chart
+    return plot
+
+# Create the selection widget
+dropdown = pn.widgets.Select(options=['All polls', 'Adults', 'Voters'], name='Select')
+
+# Create the slider for the date range
+date_range_slider = pn.widgets.DateRangeSlider(name='Date Range Slider', 
+                                               start=df2['timestamp'].dt.date.min(), 
+                                               end=df2['timestamp'].dt.date.max(),
+                                               value=(df2['timestamp'].dt.date.min(), df2['timestamp'].dt.date.max()),
+                                               step=1)
+
+# Create the slider for the moving average window
+window_size_slider = pn.widgets.IntSlider(name='Moving average window', start=1, end=100, value=1)
+
+# Bind the widgets to the create_plot function
+final_test = pn.Row(pn.bind(create_plot, subgroup=dropdown, 
+                            date_range=date_range_slider, 
+                            moving_av_window=window_size_slider))
+
+# window_size_slider
+
+# Combine everything in a Panel Column to create an app
+maincol = pn.Column()
+maincol.append(final_test)
+maincol.append(dropdown)
+maincol.append(date_range_slider)
+maincol.append(window_size_slider)
+
+
+# set the app to be servable
+template = pn.template.BootstrapTemplate(
+    title='SI649 Altair Assignment 3',
+)
+template.main.append(maincol)
+template.servable(title="SI649 Altair Assignment 3")