Taller - Guardar Figuras Interactivas en HTML

📁 Taller: Guardar Gráficas Interactivas como Archivos HTML

🎯 Objetivo:

Aprenderás a guardar cada gráfica creada en Plotly como un archivo HTML interactivo, incluyendo una explicación para su mejor interpretación y datos representativos.

🔹 Instrucciones paso a paso:

1. Crea tu figura en Plotly normalmente:

   import plotly.express as px
   import pandas as pd
   
   data = pd.DataFrame({
       "Categoría": ["A", "B", "C"],
       "Ventas": [10, 20, 15]
   })
   
   fig = px.bar(data, x="Categoría", y="Ventas", title="Ventas por Categoría", text="Ventas")
   fig.update_traces(textposition="outside")
   fig.show()

2. Redacta una explicación breve y agrega los datos tabulados:

   explicacion = """
   Ventas por Categoría
   Este gráfico muestra la cantidad de ventas obtenidas en cada categoría. Nos permite comparar el rendimiento de las categorías A, B y C.
   
   Categoría
   Ventas
   A
   10
   B
   20
   C
   15
   
   """

3. Guarda la gráfica y la explicación en un archivo HTML:

   import plotly.io as pio
   
   with open("grafico_ventas.html", "w", encoding="utf-8") as f:
       f.write(explicacion)
       f.write(pio.to_html(fig, full_html=False, include_plotlyjs='cdn'))

4. Verifica que el archivo grafico_ventas.html se haya generado correctamente en tu entorno de trabajo (Google Colab o local).
5. Descarga el archivo HTML para compartirlo o insertarlo en tu página web.

📘 Notas Importantes:

• Usar full_html=False permite combinar varias figuras en un mismo documento si es necesario.
• El parámetro include_plotlyjs='cdn' garantiza que el HTML sea ligero, cargando la librería desde Internet.
• Siempre acompaña tus visualizaciones con una explicación clara y una tabla con los datos principales.

💻 Ejemplo de Resultado:

Un archivo HTML con un encabezado explicativo, una tabla con los datos y una gráfica interactiva.