7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Python

Creación de gráficos mediante el uso de Plotly en Python

Scroll to top
Read Time: 6 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

La visualización de datos es una manera de comprender grandes cantidades de información. Ciertas tendencias y patrones pueden pasar desapercibidos en el formato de texto, por lo que la visualización de datos facilita la comprensión de lo que la información intenta decir al representarla usando diferentes gráficos.

De la documentación oficial:

plotly.py es una biblioteca de gráficos para Python, interactiva y basada en el navegador. Construida sobre plotly.js, se trata de una biblioteca de gráficos declarativa de alto nivel. plotly.js se entrega con más de 30 tipos de gráficos, incluyendo gráficos científicos, gráficos 3D, gráficos estadísticos, mapas SVG, gráficos financieros y más.

En este tutorial aprenderás sobre Plotly, la herramienta de visualización de datos. Aprenderás cómo usarla para visualizar datos en Python.

Primeros pasos

Utilizarás un framework de Python llamado Flask para crear una aplicación web en dicho lenguaje de programación. Una vez que hayas iniciado la aplicación, verás cómo usar la biblioteca Plotly para visualizar datos.

Configuración de la aplicación web de Flask

Flask es un microframework para crear aplicaciones web usando Python. La configuración de Flask es bastante sencilla. Instálalo usando PIP.

Crea un directorio llamado PythonPlot. Navega al directorio y crea un archivo llamado app.py.

Agrega el siguiente código al archivo app.py.

Arranca el servidor de la aplicación web usando el siguiente código:

Dirige tu navegador a http://localhost:5000/ y tendrás la aplicación web ejecutándose con el mensaje de bienvenida.

Ahora intentemos mostrar una página HTML desde tu aplicación web de Flask.

Crea una carpeta llamada templates y, dentro de la carpeta templates, crea un archivo llamado index.html. Dentro del archivo index.html mostrarás los gráficos creados usando plotly.

Agrega el siguiente código HTML a templates/index.html.

Importa render_template dentro del archivo app.py.

Agrega una ruta nueva llamada showLineChart dentro del archivo app.py. Así es como se ve:

Guarda los cambios anteriores y reinicia el servidor. Dirige tu navegador a http://localhost:5000/showLineChart y la página será mostrada en su interior.

Plotly Chart Display Plotly Chart Display Plotly Chart Display

Creación de un gráfico de línea usando Plotly

Comencemos con la creación de un gráfico de línea usando Plotly. importa las bibliotecas relacionadas con Plotly dentro del archivo app.py.

Utilizarás NumPy con el propósito de generar datos aleatorios para mostrarlos dentro del gráfico de línea. Importa numpy en el archivo app.py.

Utilizarás el método numpy.linspace para crear muestras espaciadas uniformemente calculadas sobre el intervalo.

El código anterior crea 500 muestras espaciadas uniformemente entre 0 y 100 para la escala del eje x.

Puedes usar numpy.random.randn con el fin de crear muestras aleatorias para la escala del eje y.

Crea una traza utilizando el método plotly.graph_objs.scatter.

Necesitas convertir la traza a formato JSON. Para eso, utilizarás el codificador JSON de Plotly, plotly.utils.PlotlyJSONEncoder.

Una vez que tengas los datos JSON, los enviarás al archivo de plantilla para mostrarlos.

Así es como se ve el archivo app.py:

Debes trabajar con los datos JSON en el lado del cliente para mostrar los datos del gráfico. En el archivo templates/index.html, agrega referencias a los siguientes scripts:

Como puedes ver en el código anterior, has hecho referencia al script plotly, además de hacer referencia a los scripts jQuery y D3.js, que también son necesarios para que plotly funcione.

Agrega el siguiente script para analizar el JSON enviado y mostrar el gráfico.

El filtro safe marca la cadena como segura de manera explícita, lo que deshabilita el escape automático. Una vez que el JSON haya sido analizado y guardado en la variable graph, lo envías al método plot de plotly junto con el ID del div en el que se mostrará el gráfico de línea.

Así es como se ve el archivo index.html:

Guarda los cambios anteriores y reinicia el servidor. Dirige tu navegador a http://localhost:5000/showLineChart y ahí tendrás el gráfico de línea.

Line Chart Using PlotlyLine Chart Using PlotlyLine Chart Using Plotly

Creación de un gráfico de varias líneas usando Plotly

Con algunas modificaciones en el gráfico de línea anterior, puedes convertirlo a un gráfico de varias líneas. Para crear un gráfico de varias líneas, debes agregar escalas adicionales en el eje y.

Comencemos creando una nueva ruta para mostrar el gráfico de varias líneas.

Crea una escala en el eje x, como lo hiciste cuando creaste el gráfico de línea, y agrega tres escalas en el eje y.

Crea trazas usando la variable xScale anterior y cada una de las escalas y.

Convierte los datos a JSON usando el codificador json de Plotly, como lo hiciste cuando creaste el gráfico de una sola línea.

Así es como se ve el enrutamiento /showMultiChart:

Guarda los cambios anteriores y reinicia el servidor. Dirige tu navegador a http://localhost:5000/showMultiChart y el gráfico de varias líneas aparecerá ahí.

Multi Line Chart Using PlotlyMulti Line Chart Using PlotlyMulti Line Chart Using Plotly

Conclusión

En este tutorial aprendiste cómo crear gráficos de línea y de varias líneas en Python usando la biblioteca Plotly. Creaste una aplicación web de Flask con Python y viste cómo crear un gráfico de línea utilizando datos de muestra generados con la biblioteca NumPy.

Puedes hacer mucho más con Plotly. Para obtener información detallada, te recomiendo que leas la documentación oficial.

El código fuente de este tutorial está disponible en el repositorio de GitHub del tutorial.

¿Cómo fue tu experiencia al aprender a crear gráficos usando Plotly? Haznos saber tus pensamientos y sugerencias en los comentarios a continuación.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.