added altair charts

app.py

@@ -5,6 +5,8 @@ import gradio as gr
 import statistics
 from scipy import stats
 import numpy as np  # Added import for numpy to compute percentiles
+import altair as alt
+import pandas as pd
 
 DATA_DIR = './storage'
 DATA_FILE = os.path.join(DATA_DIR, 'guesses.json')
@@ -31,12 +33,15 @@ def add_guess(guess):
         guesses.append(guess)
         save_guesses(guesses)
     message = compute_statistics(guesses, include_message=True)
-    return message, None  # Return None to clear the input field
+    chart = generate_plot(guesses)  # Generate the Altair chart
+    return message, None, chart  # Return message, cleared input, and chart
 
 def get_current_results():
     with lock:
         guesses = load_guesses()
-    return compute_statistics(guesses, include_message=False)
+    message = compute_statistics(guesses, include_message=False)
+    chart = generate_plot(guesses)
+    return message, chart
 
 def compute_statistics(guesses, include_message):
     n = len(guesses)
@@ -84,6 +89,49 @@ def compute_statistics(guesses, include_message):
     
     return message
 
+def generate_plot(guesses):
+    if len(guesses) < 2:
+        return None  # Not enough data to plot
+
+    # Convert the list of guesses into a Pandas DataFrame
+    df = pd.DataFrame({'Guess': guesses})
+
+    # Histogram
+    histogram = alt.Chart(df).mark_bar().encode(
+        alt.X('Guess', bin=alt.Bin(maxbins=20), title='Guess Value'),
+        alt.Y('count()', title='Frequency'),
+        tooltip=[alt.Tooltip('count()', title='Frequency')]
+    ).properties(
+        title='Histogram of Guesses',
+        width=500,
+        height=300
+    )
+
+    # CDF
+    df_sorted = df.sort_values('Guess').reset_index(drop=True)
+    df_sorted['ECDF'] = (df_sorted.index + 1) / len(df_sorted)
+
+    cdf = alt.Chart(df_sorted).mark_line(interpolate='step-after').encode(
+        x=alt.X('Guess', title='Guess Value'),
+        y=alt.Y('ECDF', title='Cumulative Probability'),
+        tooltip=[
+            alt.Tooltip('Guess', title='Guess Value'),
+            alt.Tooltip('ECDF', title='Cumulative Probability', format='.2f')
+        ]
+    ).properties(
+        title='Cumulative Distribution Function (CDF)',
+        width=500,
+        height=300
+    )
+
+    # Combine the two charts vertically
+    combined_chart = alt.vconcat(histogram, cdf).configure_title(
+        fontSize=16,
+        anchor='middle'
+    ).interactive()
+
+    return combined_chart
+
 with gr.Blocks() as demo:
     gr.Markdown("# Collective Guessing Game")
     gr.Markdown("Submit your guess and contribute to the global statistics!")
@@ -91,9 +139,17 @@ with gr.Blocks() as demo:
     submit_button = gr.Button("Submit Guess")
     with gr.Accordion("View Current Results!", open=False):
         output_text = gr.Textbox(label="Results", lines=10)
+        output_plot = gr.Plot(label="Data Visualization")  # Plot component for Altair charts
         refresh_button = gr.Button("Refresh Results")
-    submit_button.click(fn=add_guess, inputs=guess_input, outputs=[output_text, guess_input])
-    refresh_button.click(fn=get_current_results, outputs=output_text)
-    demo.load(fn=get_current_results, outputs=output_text)
-    
+    submit_button.click(
+        fn=add_guess,
+        inputs=guess_input,
+        outputs=[output_text, guess_input, output_plot]
+    )
+    refresh_button.click(
+        fn=get_current_results,
+        outputs=[output_text, output_plot]
+    )
+    demo.load(fn=get_current_results, outputs=[output_text, output_plot])
+        
 demo.launch()

requirements.txt

@@ -1,2 +1,3 @@
 gradio==5.4.0
 scipy==1.14.1
+altair