3 formas de incrustar un gráfico de Matplotlib en una página HTML
3 ways to embed a Matplotlib chart in an HTML page.
Visualización de datos, aplicación web
Un tutorial sobre cómo importar un gráfico de Matplotlib en un archivo HTML
Python proporciona muchas bibliotecas para realizar diferentes operaciones, incluida la visualización de datos. Sin embargo, puede resultar complejo integrar un gráfico construido con Matplotlib en una página HTML. La solución más sencilla es exportar el gráfico como una imagen estática, como un PNG o JPEG, y luego integrarlo en su página HTML. Sin embargo, si utiliza una imagen estática, perderá cualquier posible interactividad del gráfico original.
Otra solución podría ser utilizar frameworks externos como Streamlit o Flask, pero en ambos casos, debe configurar un servidor web independiente para servir la imagen. Esta solución podría resultar demasiado costosa. En mi ciudad, decimos que ¡disparamos una mosca con un cañón!
Esta publicación de blog muestra tres estrategias para incrustar un gráfico de Matplotlib en una página HTML. Las tres soluciones son:
- Usando la biblioteca mpld3
- Codificar la imagen en base64
- Usando
py-script.
Antes de describir cada solución, describamos el escenario que usaremos para demostrar los tres casos.
El escenario
Supongamos que queremos dibujar un senoide usando Matplotlib. Aquí está el código para generar el gráfico:
- ¿Siguen siendo necesarios los científicos de datos en la era de la ...
- El poder de la llamada de función de OpenAI en los modelos de apren...
- Aprendizaje automático de efectos mixtos con GPBoost para datos eco...
import numpy as npimport matplotlib.pyplot as plt# Generar x de 0 a 2*pi con un tamaño de paso de 0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Senoide')plt.show()La siguiente figura muestra el gráfico resultante:
Usando la biblioteca mpld3
La biblioteca mpld3 combina Matplotlib y D3.js, una popular biblioteca de Javascript para visualización de datos. Mpld3 proporciona una API para exportar los gráficos de Matplotlib en D3.js.
Primero, instale la biblioteca mpld3:
pip install mpld3Para guardar su gráfico de Matplotlib como una página HTML, use la función save_html() proporcionada por mtpld3, de la siguiente manera:
import mpld3import numpy as npimport matplotlib.pyplot as plt# Generar x de 0 a 2*pi con un tamaño de paso de 0.1x = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)# Crear una figura y un ejefig, ax = plt.subplots()# Graficar el senoideax.plot(x, y)# Establecer etiquetas y títuloax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Senoide')# Mostrar el gráficompld3.save_html(fig,'fig.html')La función save_html() recibe una figura de Matplotlib como entrada y el nombre de la figura. El script genera el archivo fig.html. Si lo abre en su navegador, verá el siguiente gráfico:
El gráfico es ligeramente diferente al original porque es la versión D3.js del gráfico original. Esto significa que la biblioteca mpld3 transforma el gráfico original en D3.js. Si inspecciona el archivo HTML desde su navegador, verá que el gráfico es una imagen SVG, como se muestra en la siguiente figura:
Para insertar el gráfico generado en otra página HTML, copia el contenido del archivo generado con precisión en la posición donde deseas incluir la imagen. Para obtener más detalles sobre cómo proceder, sigue mi tutorial anterior.
Codificación de la imagen como base64
Otra solución es codificar la figura de Matplotlib como una imagen base64, como se describe en este hilo de Stack Overflow. Aquí está el código para generar la página HTML que contiene la imagen de Matplotlib:
import base64from io import BytesIOimport numpy as npimport matplotlib.pyplot as pltx = np.arange(0, 2*np.pi, 0.1)y = np.sin(x)fig, ax = plt.subplots()ax.plot(x, y)ax.set_xlabel('x')ax.set_ylabel('y')ax.set_title('Sinusoid')tmpfile = BytesIO()fig.savefig(tmpfile, format='png')encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')html = '<html>' + '<img src=\'data:image/png;base64,{}\'>'.format(encoded) + '</html>'with open('fig2.html','w') as f: f.write(html)En la práctica, generas un objeto BytesIO() y guardas la figura usando el formato PNG. Luego, utiliza la función b64encode() para codificar la imagen y la función decode() para decodificarla. Finalmente, agrega la imagen decodificada a una cadena HTML y guárdala. Como resultado, tienes exactamente la figura original de Matplotlib.
Usando py-script
Py-script es una biblioteca de Javascript que te permite incluir código Python directamente en una página HTML. Para usar Py-script, debes incluir la siguiente biblioteca py-script en el encabezado HTML:
<head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script></head>Luego, utiliza la etiqueta py-config para instalar las bibliotecas de Python requeridas:
<py-config> packages = ["matplotlib", "numpy"]</py-config>Finalmente, utiliza la etiqueta py-scrip t para incluir tu código Python:
<py-script> import numpy as np import matplotlib.pyplot as plt x = np.arange(0, 2*np.pi, 0.1) y = np.sin(x) fig, ax = plt.subplots() ax.plot(x, y) ax.set_xlabel('x') ax.set_ylabel('y') ax.set_title('Sinusoid') display(fig, target="graph-area", append=False) </py-script> <div id="graph-area"></div>Para mostrar la figura, utiliza la función display(), que recibe la figura de Matplotlib, la etiqueta HTML div donde incluir el gráfico y si utilizar la modalidad append.
Como resultado final, tienes exactamente la misma figura que la original.
Resumen
¡Felicidades! ¡Acabas de aprender tres formas de incluir un gráfico de Matplotlib en una página HTML! Las tres estrategias son:
- Usando la biblioteca mpld3 convierte tu gráfico de Matplotlib en un gráfico de D3.js
- Codificando la imagen como base64 genera una imagen PNG del gráfico de Matplotlib como una imagen codificada en base64 y luego la incluye en una página HTML
- Usando
py-scriptte permite incluir tu código Python directamente en HTML.
Artículos relacionados
Cómo insertar un gráfico de Python en un sitio web HTML
towardsdatascience.com
3 formas de construir un mapa geográfico en Python Altair
Un tutorial de visualización de datos sobre cómo construir tres mapas diferentes en Python Altair: mapa de coropletas, mapa de densidad de puntos…
towardsdatascience.com
3 Formas de Visualizar Series de Tiempo Que Puede Que No Conozcas
Un tutorial listo para ejecutar sobre cómo visualizar una serie de tiempo en Python y Altair
towardsdatascience.com
¡Manténgase conectado!
- Sígueme en Zepes
- Regístrese para mi boletín
- Conéctese en LinkedIn
- Sígueme en Twitter
- Sígueme en Facebook
- Sígueme en Github
