Update app.py

app.py

@@ -165,28 +165,28 @@ selection = col1.button('Movies')
 col2.button('TV Series')
 
 # Displaying charts in a customized layout based on selection
-if selection:
+if selection_movies:
     st.subheader('Movies')
-    st.write('<div style="display: flex; flex-direction: row; flex-wrap: wrap;">', unsafe_allow_html=True)
-    st.write('<div style="flex: 50%; padding: 10px;">')
-    st.plotly_chart(create_treemap(df_movies, 'Parental Guide - Movies'), use_container_width=True)
-    st.plotly_chart(create_genre_bar_chart(df_movies, 'Top 10 Genres - Movies'), use_container_width=True)
-    st.write('</div>')
-    st.write('<div style="flex: 50%; padding: 10px;">')
-    st.plotly_chart(create_rating_box_chart(df_movies, 'Rating Distribution - Movies'), use_container_width=True)
-    st.plotly_chart(create_country_map(df_movies, 'Global Distribution of Movies'), use_container_width=True)
-    st.write('</div>')
-    st.write('</div>', unsafe_allow_html=True)
+    col1_1, col1_2 = st.columns(2)
+    with col1_1:
+        st.plotly_chart(create_treemap(df_movies, 'Parental Guide - Movies'), use_container_width=True)
+    with col1_2:
+        st.plotly_chart(create_genre_bar_chart(df_movies, 'Top 10 Genres - Movies'), use_container_width=True)
+    col2_1, col2_2 = st.columns(2)
+    with col2_1:
+        st.plotly_chart(create_rating_box_chart(df_movies, 'Rating Distribution - Movies'), use_container_width=True)
+    with col2_2:
+        st.plotly_chart(create_country_map(df_movies, 'Global Distribution of Movies'), use_container_width=True)
 
-else:
+elif selection_tv_series:
     st.subheader('TV Series')
-    st.write('<div style="display: flex; flex-direction: row; flex-wrap: wrap;">', unsafe_allow_html=True)
-    st.write('<div style="flex: 50%; padding: 10px;">')
-    st.plotly_chart(create_treemap(df_tv_series, 'Parental Guide - TV Series'), use_container_width=True)
-    st.plotly_chart(create_genre_bar_chart(df_tv_series, 'Top 10 Genres - TV Series'), use_container_width=True)
-    st.write('</div>')
-    st.write('<div style="flex: 50%; padding: 10px;">')
-    st.plotly_chart(create_rating_box_chart(df_tv_series, 'Rating Distribution - TV Series'), use_container_width=True)
-    st.plotly_chart(create_country_map(df_tv_series, 'Global Distribution of TV Series'), use_container_width=True)
-    st.write('</div>')
-    st.write('</div>', unsafe_allow_html=True)
+    col1_1, col1_2 = st.columns(2)
+    with col1_1:
+        st.plotly_chart(create_treemap(df_tv_series, 'Parental Guide - TV Series'), use_container_width=True)
+    with col1_2:
+        st.plotly_chart(create_genre_bar_chart(df_tv_series, 'Top 10 Genres - TV Series'), use_container_width=True)
+    col2_1, col2_2 = st.columns(2)
+    with col2_1:
+        st.plotly_chart(create_rating_box_chart(df_tv_series, 'Rating Distribution - TV Series'), use_container_width=True)
+    with col2_2:
+        st.plotly_chart(create_country_map(df_tv_series, 'Global Distribution of TV Series'), use_container_width=True)