Update app.py

app.py

@@ -155,6 +155,7 @@ import streamlit as st
 # Set page config as the first Streamlit command
 st.set_page_config(layout="wide", page_title="AskReddit Data Explorer")
 
+import os
 import pandas as pd
 import matplotlib.pyplot as plt
 from nltk.sentiment.vader import SentimentIntensityAnalyzer
@@ -164,73 +165,51 @@ import altair as alt
 from datetime import datetime
 import praw
 
-# Custom CSS for a more aesthetic dashboard
+# Custom CSS to beautify the app
 st.markdown("""
 <style>
-    /* Main title styling */
-    .main-title {
-        color: #2196F3;
-        text-align: center;
-        font-size: 3em;
-        font-weight: bold;
-        padding: 20px 0;
-        margin-bottom: 30px;
+    .reportview-container {
+        background: #f0f2f6
     }
-    
-    /* Plot container styling */
-    .plot-container {
-        background: white;
+    .main {
+        background: #ffffff;
         padding: 20px;
         border-radius: 10px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        margin: 10px;
-        border: 2px solid #2196F3;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
-    
-    /* Plot title styling */
-    .plot-title {
-        color: #1976D2;
-        font-size: 1.5em;
-        font-weight: bold;
-        margin-bottom: 20px;
+    h1 {
+        color: #1E88E5;
+        text-align: center;
+        padding-bottom: 20px;
+        border-bottom: 2px solid #1E88E5;
+    }
+    h2 {
+        color: #333;
+        border-bottom: 1px solid #ddd;
         padding-bottom: 10px;
-        border-bottom: 2px solid #E3F2FD;
     }
-    
-    /* Button styling */
-    .stButton > button {
-        background-color: #2196F3;
+    .stButton>button {
+        background-color: #1E88E5;
         color: white;
-        border: none;
-        border-radius: 5px;
-        padding: 10px 20px;
-        font-weight: bold;
     }
-    
-    .stButton > button:hover {
-        background-color: #1976D2;
-    }
-    
-    /* Selectbox styling */
-    .stSelectbox {
-        border: 2px solid #2196F3;
-        border-radius: 5px;
-    }
-    
-    /* Chart border styling */
-    .chart-wrapper {
-        border: 2px solid #2196F3;
+    .plot-container {
+        background: #ffffff;
+        padding: 20px;
         border-radius: 5px;
-        padding: 10px;
-        margin-top: 10px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        margin-bottom: 20px;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Title with custom styling
-st.markdown('<h1 class="main-title">AskReddit Dashboard</h1>', unsafe_allow_html=True)
+# Streamlit App Title
+st.title("AskReddit Dashboard")
 
-# Initialize Reddit API client
+# Download NLTK resources
+nltk.download('vader_lexicon', quiet=True)
+nltk.download('stopwords', quiet=True)
+
+# Initialize the Reddit API client
 reddit = praw.Reddit(
     client_id="dFhdA1_6NWavjmAEt83r2A",
     client_secret="l4UsnweG9HdHLffJ9ZbAow0-HRocWA",
@@ -245,6 +224,8 @@ def fetch_askreddit_posts(limit=100):
         posts.append({
             'title': post.title,
             'score': post.score,
+            'id': post.id,
+            'url': post.url,
             'num_comments': post.num_comments,
             'num_crossposts': post.num_crossposts,
             'created_utc': datetime.fromtimestamp(post.created_utc),
@@ -255,40 +236,34 @@ def fetch_askreddit_posts(limit=100):
         })
     return pd.DataFrame(posts)
 
+# Fetch data
 df = fetch_askreddit_posts()
 
-# Create layout
+# Create two rows with two columns each
 row1_col1, row1_col2 = st.columns(2)
 row2_col1, row2_col2 = st.columns(2)
 
-# Plot 1: Time Series
+# Plot 1: Number of Posts vs Time of Day
 with row1_col1:
     st.markdown('<div class="plot-container">', unsafe_allow_html=True)
-    st.markdown('<p class="plot-title">Number of Posts vs Time of Day</p>', unsafe_allow_html=True)
+    st.subheader("Number of Posts vs Time of Day")
     days_order = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
     selected_day = st.selectbox('Select Day of the Week:', days_order)
-    
     plot_data = df[df['day_of_week'] == selected_day].groupby('hour').size().reset_index(name='count')
-    chart = alt.Chart(plot_data).mark_line(
-        point=True,
-        color='#2196F3'
-    ).encode(
+    
+    chart = alt.Chart(plot_data).mark_line(point=True).encode(
         x=alt.X('hour:Q', title='Hour of Day'),
         y=alt.Y('count:Q', title='Number of Posts'),
         tooltip=['hour', 'count']
-    ).properties(height=300).configure_view(
-        strokeWidth=2,
-        stroke='#E3F2FD'
-    )
-    st.markdown('<div class="chart-wrapper">', unsafe_allow_html=True)
+    ).properties(title=f'Posts on {selected_day}', height=300)
+    
     st.altair_chart(chart, use_container_width=True)
     st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
 
-# Plot 2: Scatter Plot
+# Plot 2: Scatter Plot: Comments vs Score
 with row1_col2:
     st.markdown('<div class="plot-container">', unsafe_allow_html=True)
-    st.markdown('<p class="plot-title">Comments vs Score Analysis</p>', unsafe_allow_html=True)
+    st.subheader("Scatter Plot of Comments or Crossposts vs Score")
     
     col1, col2 = st.columns(2)
     with col1:
@@ -298,105 +273,59 @@ with row1_col2:
     
     x_axis = 'num_crossposts' if crossposts_button else 'num_comments'
     
-    scatter_chart = alt.Chart(df).mark_circle(
-        color='#2196F3'
-    ).encode(
+    scatter_chart = alt.Chart(df).mark_circle().encode(
         x=alt.X(f'{x_axis}:Q', title=x_axis.replace('_', ' ').title()),
         y=alt.Y('score:Q', title='Score'),
         tooltip=['title', x_axis, 'score']
-    ).properties(height=300).configure_view(
-        strokeWidth=2,
-        stroke='#E3F2FD'
+    ).properties(
+        height=300,
+        title=f'Correlation between {x_axis.replace("_", " ").title()} and Score'
     )
     
-    st.markdown('<div class="chart-wrapper">', unsafe_allow_html=True)
     st.altair_chart(scatter_chart, use_container_width=True)
     st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
 
-# Plot 3: Word Cloud
+# Plot 3: Word Cloud by Sentiment
 with row2_col1:
     st.markdown('<div class="plot-container">', unsafe_allow_html=True)
-    st.markdown('<p class="plot-title">Word Cloud by Sentiment</p>', unsafe_allow_html=True)
-    
+    st.subheader("Word Cloud by Sentiment")
     analyzer = SentimentIntensityAnalyzer()
     df['sentiment'] = df['title'].apply(lambda x: analyzer.polarity_scores(x)['compound'])
     df['sentiment_category'] = df['sentiment'].apply(
         lambda score: 'positive' if score > 0.05 else 'negative' if score < -0.05 else 'neutral'
     )
-    
     selected_sentiment = st.selectbox("Select Sentiment", ['positive', 'negative', 'neutral'])
     filtered_titles = " ".join(df[df['sentiment_category'] == selected_sentiment]['title'])
-    
-    wordcloud = WordCloud(
-        width=800,
-        height=400,
-        background_color='white',
-        colormap='Blues'
-    ).generate(filtered_titles)
-    
+    wordcloud = WordCloud(width=400, height=150, background_color='white').generate(filtered_titles)
     fig, ax = plt.subplots(figsize=(10, 6))
     ax.imshow(wordcloud, interpolation='bilinear')
     ax.axis('off')
-    ax.set_facecolor('white')
-    fig.patch.set_facecolor('white')
-    
-    st.markdown('<div class="chart-wrapper">', unsafe_allow_html=True)
     st.pyplot(fig)
     st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
 
-# Plot 4: Bubble Chart
+# Plot 4: Author Performance Bubble Chart
 with row2_col2:
     st.markdown('<div class="plot-container">', unsafe_allow_html=True)
-    st.markdown('<p class="plot-title">Author Performance Analysis</p>', unsafe_allow_html=True)
-    
+    st.subheader("Author Performance Bubble Chart")
     bubble_chart = alt.Chart(df).mark_circle().encode(
         x=alt.X('num_comments:Q', title='Number of Comments'),
         y=alt.Y('score:Q', title='Score'),
-        size=alt.Size('upvote_ratio:Q', scale=alt.Scale(range=[20, 200])),
-        color=alt.Color('upvote_ratio:Q', scale=alt.Scale(scheme='blues')),
+        size=alt.Size('upvote_ratio:Q', title='Upvote Ratio', scale=alt.Scale(range=[20, 200])),
+        color=alt.Color('author:N', legend=None),
         tooltip=['author', 'num_comments', 'score', 'upvote_ratio']
     ).properties(
-        width=400,
-        height=300
-    ).configure_view(
-        strokeWidth=2,
-        stroke='#E3F2FD'
+        width=600,
+        height=350
     )
-    
-    st.markdown('<div class="chart-wrapper">', unsafe_allow_html=True)
-    st.altair_chart(bubble_chart, use_container_width=True)
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.altair_chart(bubble_chart, use_container_width=False)
     st.markdown('</div>', unsafe_allow_html=True)
 
 # Display raw data
 if st.checkbox("Show Raw Data"):
     st.write(df)
 
-# Summary section
+# Summary
 st.markdown('<div class="plot-container">', unsafe_allow_html=True)
-st.markdown('<p class="plot-title">Project Summary</p>', unsafe_allow_html=True)
-st.markdown("""
-This project used dataset from the r/AskReddit subreddit. It includes various fields such as post scores, 
-the number of comments, upvote ratios, and timestamps, providing a comprehensive view of post performance 
-and user engagement. The dataset was explored through several interactive visualizations designed to reveal 
-key insights effectively.
-
-A line graph was used to display the number of posts by the hour for each day of the week, with a dropdown 
-menu allowing users to select specific days, making it easy to identify and compare posting patterns such 
-as peak activity hours.
-
-A scatter plot illustrated the correlation between post scores and other engagement metrics like the number 
-of comments and crossposts, with interactive buttons enabling users to switch the x-axis variable and examine 
-relationships influencing post success.
-
-A word cloud incorporating sentiment analysis enriched the exploration by categorizing post titles as positive, 
-negative, or neutral using VADER sentiment analysis. Words were color-coded based on their sentiment, and users 
-could toggle between categories and explore different color palettes.
-
-Lastly, a bubble chart provided a unique perspective on individual author performance, with bubbles representing 
-authors, their size reflecting the upvote ratio, and their position showing the number of comments and post scores, 
-offering an engaging way to analyze user contributions.
-""")
-st.markdown('</div>', unsafe_allow_html=True)
+st.markdown("### Project Summary")
+st.markdown("This project used dataset from the r/AskReddit subreddit. It includes various fields such as post scores, the number of comments, upvote ratios, and timestamps, providing a comprehensive view of post performance and user engagement. The dataset was explored through several interactive visualizations designed to reveal key insights effectively. A line graph was used to display the number of posts by the hour for each day of the week, with a dropdown menu allowing users to select specific days, making it easy to identify and compare posting patterns such as peak activity hours. A scatter plot illustrated the correlation between post scores and other engagement metrics like the number of comments and crossposts, with interactive radio buttons enabling users to switch the x-axis variable and examine relationships influencing post success. A word cloud incorporating sentiment analysis enriched the exploration by categorizing post titles as positive, negative, or neutral using VADER sentiment analysis. Words were color-coded based on their sentiment, and users could toggle between categories and explore different color palettes, making the visualization both informative and visually appealing. Lastly, a bubble chart provided a unique perspective on individual author performance, with bubbles representing authors, their size reflecting the upvote ratio, and their position showing the number of comments and post scores, offering an engaging way to analyze user contributions.")
+st.markdown('</div>', unsafe_allow_html=True)