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.
1 |
pip install flask
|
Crea un directorio llamado PythonPlot. Navega al directorio y crea un archivo llamado app.py.
1 |
mkdir PythonPlot
|
2 |
cd PythonPlot
|
Agrega el siguiente código al archivo app.py.
1 |
from flask import Flask |
2 |
app = Flask(__name__) |
3 |
|
4 |
@app.route("/") |
5 |
def hello(): |
6 |
return "Welcome to TutsPlus!" |
Arranca el servidor de la aplicación web usando el siguiente código:
1 |
FLASK_APP=app.py flask run |
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.
1 |
<!doctype html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<style type="text/css"> |
6 |
.header{ |
7 |
text-align: center; |
8 |
background-color: rgb(136, 185, 229); |
9 |
height: 70px; |
10 |
line-height: 70px; |
11 |
}
|
12 |
.chart{ |
13 |
margin-top: 30px; |
14 |
text-align: center; |
15 |
}
|
16 |
</style>
|
17 |
</head>
|
18 |
|
19 |
<body>
|
20 |
|
21 |
<div class="header"> |
22 |
<h2>
|
23 |
Plotly Chart Demo |
24 |
</h2>
|
25 |
</div>
|
26 |
|
27 |
<div id="chart" class="chart"> |
28 |
Chart will be here |
29 |
</div>
|
30 |
|
31 |
</body>
|
32 |
|
33 |
</html>
|
Importa render_template dentro del archivo app.py.
1 |
from flask import Flask, render_template |
Agrega una ruta nueva llamada showLineChart dentro del archivo app.py. Así es como se ve:
1 |
@app.route('/showLineChart') |
2 |
def line(): |
3 |
return render_template('index.html') |
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.
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.
1 |
import plotly |
2 |
import plotly.plotly as py |
3 |
import plotly.graph_objs as go |
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.
1 |
import numpy as np |
Utilizarás el método numpy.linspace para crear muestras espaciadas uniformemente calculadas sobre el intervalo.
1 |
count = 500 |
2 |
xScale = np.linspace(0, 100, count) |
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.
1 |
yScale = np.random.randn(count) |
Crea una traza utilizando el método plotly.graph_objs.scatter.
1 |
trace = go.Scatter( |
2 |
x = xScale, |
3 |
y = yScale |
4 |
)
|
Necesitas convertir la traza a formato JSON. Para eso, utilizarás el codificador JSON de Plotly, plotly.utils.PlotlyJSONEncoder.
1 |
data = [trace] |
2 |
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder) |
Una vez que tengas los datos JSON, los enviarás al archivo de plantilla para mostrarlos.
1 |
return render_template('index.html', |
2 |
graphJSON=graphJSON) |
Así es como se ve el archivo app.py:
1 |
from flask import Flask, render_template |
2 |
import json |
3 |
import plotly |
4 |
import plotly.plotly as py |
5 |
import plotly.graph_objs as go |
6 |
|
7 |
import numpy as np |
8 |
|
9 |
app = Flask(__name__) |
10 |
|
11 |
@app.route('/showLineChart') |
12 |
def line(): |
13 |
count = 500 |
14 |
xScale = np.linspace(0, 100, count) |
15 |
yScale = np.random.randn(count) |
16 |
|
17 |
# Create a trace
|
18 |
trace = go.Scatter( |
19 |
x = xScale, |
20 |
y = yScale |
21 |
)
|
22 |
|
23 |
data = [trace] |
24 |
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder) |
25 |
return render_template('index1.html', |
26 |
graphJSON=graphJSON) |
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:
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
2 |
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
3 |
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script> |
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.
1 |
var graphs = {{graphJSON | safe}}; |
2 |
Plotly.plot('chart',graphs,{}); |
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:
1 |
<!doctype html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<style type="text/css"> |
6 |
.header{ |
7 |
text-align: center; |
8 |
background-color: rgb(136, 185, 229); |
9 |
height: 70px; |
10 |
line-height: 70px; |
11 |
}
|
12 |
.chart{ |
13 |
margin-top: 30px; |
14 |
text-align: center; |
15 |
}
|
16 |
</style>
|
17 |
</head>
|
18 |
|
19 |
<body>
|
20 |
|
21 |
<div class="header"> |
22 |
<h2>
|
23 |
Plotly Chart Demo |
24 |
</h2>
|
25 |
</div>
|
26 |
|
27 |
<div id="chart" class="chart"> |
28 |
</div>
|
29 |
|
30 |
</body>
|
31 |
|
32 |
<!-- D3.js -->
|
33 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
34 |
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
35 |
<!-- Plotly.js -->
|
36 |
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script> |
37 |
|
38 |
<script type="text/javascript"> |
39 |
|
40 |
var graphs = {{graphJSON | safe}}; |
41 |
|
42 |
Plotly.plot('chart',graphs,{}); |
43 |
|
44 |
</script>
|
45 |
|
46 |
</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.
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.
1 |
@app.route('/showMultiChart') |
2 |
def multiLine(): |
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.
1 |
count = 500 |
2 |
xScale = np.linspace(0, 100, count) |
3 |
y0_scale = np.random.randn(count) |
4 |
y1_scale = np.random.randn(count) |
5 |
y2_scale = np.random.randn(count) |
Crea trazas usando la variable xScale anterior y cada una de las escalas y.
1 |
trace0 = go.Scatter( |
2 |
x = xScale, |
3 |
y = y0_scale |
4 |
)
|
5 |
trace1 = go.Scatter( |
6 |
x = xScale, |
7 |
y = y1_scale |
8 |
)
|
9 |
trace2 = go.Scatter( |
10 |
x = xScale, |
11 |
y = y2_scale |
12 |
)
|
Convierte los datos a JSON usando el codificador json de Plotly, como lo hiciste cuando creaste el gráfico de una sola línea.
1 |
data = [trace0, trace1, trace2] |
2 |
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder) |
3 |
return render_template('index.html', |
4 |
graphJSON=graphJSON) |
Así es como se ve el enrutamiento /showMultiChart:
1 |
@app.route('/showMultiChart') |
2 |
def multiLine(): |
3 |
count = 500 |
4 |
xScale = np.linspace(0, 100, count) |
5 |
y0_scale = np.random.randn(count) |
6 |
y1_scale = np.random.randn(count) |
7 |
y2_scale = np.random.randn(count) |
8 |
|
9 |
# Create traces
|
10 |
trace0 = go.Scatter( |
11 |
x = xScale, |
12 |
y = y0_scale |
13 |
)
|
14 |
trace1 = go.Scatter( |
15 |
x = xScale, |
16 |
y = y1_scale |
17 |
)
|
18 |
trace2 = go.Scatter( |
19 |
x = xScale, |
20 |
y = y2_scale |
21 |
)
|
22 |
data = [trace0, trace1, trace2] |
23 |
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder) |
24 |
return render_template('index1.html', |
25 |
graphJSON=graphJSON) |
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í.
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.
By
