ejemplos de graficos

app.py

@@ -7,8 +7,8 @@ import streamlit as st
 from PIL import Image
 from sklearn.linear_model import LinearRegression
 from streamlit_option_menu import option_menu
-import tableauserverclient as TSC
-import streamlit.components.v1 as components
+import plotly.express as px
+
 # from streamlit.components.v1 import IFrame
 
 image = Image.open('./assets/logo_latam_brain.png')
@@ -16,6 +16,8 @@ logo = Image.open('./assets/LatamBrainlogo.png')
 scrum = Image.open("./assets/Scrum'ProcessLB.png")
 dashboard_ejemplo = Image.open('./assets/dashboard_ejemplo.png')
 
+df = pd.read_csv('./ML/ds_salaries.csv')
+
 st.markdown("""<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>""",
             unsafe_allow_html=True)
@@ -128,10 +130,6 @@ if selected2 == "Home":
     col2.markdown(mati, unsafe_allow_html=True)
     col3.markdown(catriel, unsafe_allow_html=True)
 
-
-
-
-
 # Pagina Projects
 if selected2 == "Projects":
     st.markdown('''
@@ -168,7 +166,53 @@ En resumen, la industria de la tecnología y la analítica de datos está en con
 
     st.image(dashboard_ejemplo, width=700)
 
+    # Crea un gráfico
+    st.bar_chart(df['salary'])
+
+    st.title('Ejemplo de gráfico de barras apiladas')
 
+    chart = alt.Chart(df).mark_bar().encode(
+        x='work_year:N',
+        y='salary:Q',
+        color='categoria:N'
+    ).properties(
+        width=700,
+        height=400
+    )
+
+    st.altair_chart(chart, use_container_width=True)
+
+    st.title('Ejemplo de gráfico de líneas')
+
+    chart = alt.Chart(df).mark_line().encode(
+        x='work_year:N',
+        y='salary:Q',
+        color='categoria:N'
+    ).properties(
+        width=700,
+        height=400
+    )
+
+    st.altair_chart(chart, use_container_width=True)
+
+    st.title('Ejemplo de gráfico de dispersión')
+
+    chart = alt.Chart(df).mark_point().encode(
+        x='work_year:Q',
+        y='salary:Q',
+        color='genero:N'
+    ).properties(
+        width=700,
+        height=400
+    )
+
+    st.altair_chart(chart, use_container_width=True)
+
+    st.title('Ejemplo de gráfico de pastel')
+
+    fig = px.pie(df, values='work_year', names='salary')
+
+    st.plotly_chart(fig, use_container_width=True)
 
     st.markdown('''
             <br>
@@ -195,7 +239,6 @@ En resumen, el mercado de empleo de datos en Latinoamérica ofrece grandes oport
 
     st.image(dashboard_ejemplo, width=700)
 
-
     st.markdown('''
         <br>
         <h3>Predicción de nuevos puestos de trabajo con ML</h3>
@@ -205,11 +248,7 @@ En resumen, el mercado de empleo de datos en Latinoamérica ofrece grandes oport
     # st.set_page_config(page_title="Predicción de nuevos puestos de trabajo",
     #                    page_icon=":bar_chart:", layout="wide")
 
-
-
     # Cargar los datos
-    df = pd.read_csv(
-        './ML/ds_salaries.csv')
 
     # Seleccionar las columnas relevantes
     df_relevant = df[['job_title', 'work_year']]
@@ -347,7 +386,6 @@ En resumen, el mercado de empleo de datos en Latinoamérica ofrece grandes oport
 #
 if selected2 == "New":
 
-
     progress_text = "Operation in progress. Please wait."
     my_bar = st.progress(0, text=progress_text)