Plotly: crea gráficos interactivos con datos espaciales

Plotly es una biblioteca de código abierto para la visualización de datos en Python que permite la creación de gráficos interactivos. Esta interactividad de los gráficos es la principal característica de Plotly, permitiendo que el usuario usuario pueda hacer zoom, desplazarse, mover el cursor para ver información detallada o seleccionar datos.

logo

Características de Plotly

  • Plotly permite crear gráficos de líneas, barras, dispersión, gráficos de caja, histogramas, mapas de calor, gráficos 3D, mapas geoespaciales, gráficos de superficie, y muchos otros.
  • Una característica interesante es que permite incorporar datos geoespaciales (latitud, longitud) y visualizarlos sobre mapas de MapBox y OpenStreetMap.
  • Plotly dispone de una interfaz de alto nivel llamada Plotly Express, que permite crear gráficos complejos con pocas líneas de código.
  • Plotly se integra con Dash que es un framework que permite crear aplicaciones web interactivas de los gráficos.

gráficos interactivos con Plotly

Comparativa entre Plotly y Matplotlib

Si comparamos Plotly con Matplotlib, que es la otra gran librería para crear gráficos con datos de Python, podemos decir de forma resumida que Plotly crea gráficos dinámicos o interactivos y Matplotlib gráficos estáticos.

Plotly y especialmente cuando se emplea Plotly Express, es sencillo de utilizar. Con pocas líneas de código se puede crear un gráfico. Por su lado los gráficos en Matplotlib son personalizables, es decir podemos configurar casi todos su aspectos, aunque esto implica más líneas de código y algo más de complejidad.

Plotly: se integra fácilmente con Dash, lo que permite crear aplicaciones web interactivas con gráficos de Plotly. También se puede usar en Jupyter Notebooks y otras plataformas como Flask o Django. Por su lado; Matplotlib se integra bien con otras bibliotecas de análisis de datos como Pandas o NumPy. Esto hace que Matplotlib sea practicamente la biblioteca de referencia para gráficos estáticos en Python.

En cuanto al renderizado, podemos indicar que Plotly, renderiza gráficos en HTML, CSS y JavaScript, lo que lo hace ideal para aplicaciones web o para generar gráficos interactivos que se puedan visualizar en navegadores, mientras que Matplotlib renderiza gráficos como imágenes estáticas, lo que lo hace más adecuado para informes estáticos o gráficos en PDFs o formatos de imagen como PNG o SVG.

Primeros pasos con Plotly

Lo primero que debemos hacer es instalar Plotly. También instalaremos Dash porque nos permitirá ver el gráfico como si se tratase de una aplicación web:

pip install dash plotly

Una vez instalada la librería estamos en disposición de empezar a trabajar.

El grafico más sencillo que podemos construir solo requiere de tres líneas de código:

import plotly.express as px
fig = px.bar(x=["2019", "2020", "2021","2022","2023"], y=[11688,7114,28676,97872,3508])
fig.show()

gráficos interactivos con Plotly

Como se puede observar, tenemos un gráfico de barras que al movernos sobre él nos muestra los datos de forma interactiva. Puedes ver un ejemplo equivalente aquí.

En la primera línea hemos importado ploty, concretamente Plotly Express que es una interfaz de alto nivel de la biblioteca Plotly, que simplifica la creación de gráficos . A continuación creamos un grafico de barras mediante la función px.bar() a la que se le proporcionan los datos de los ejes x e y. La última línea, se encarga de mostrar el gráfico en una ventana emergente o incrustado (dependiendo de dónde se ejecute el código). Si estamos en Jupyter Notebooks, el gráfico aparecerá dentro de la celda del notebook. Si estamos ejecutando el código en un script, se abrirá en el navegador de forma interactiva.

Personalizando el gráfico

En el apartado anterior creamos un grafico muy simple y ahora intentaremos mejorar su presentación añadiendo títulos y etiquetas.

Partimos del código anterior y los modificamos añadiendo dos nuevas secciones.

import plotly.express as px

fig = px.bar(x=["2019", "2020", "2021","2022","2023"], y=[11688,7114,28676,97872,3508])

# Modificar el gráfico: añadir título y cambiar el color de las barras
fig.update_layout(
    title="Superficie quemada en Castilla y León (Has)",  # Añadir título
    xaxis_title="Año",  # Etiqueta del eje X
    yaxis_title="Superficie quemada (Has)",  # Etiqueta del eje Y
    title_x=0.5  # Centrar el título
)

# Cambiar el color de las barras a naranja
fig.update_traces(marker_color='orange')

# Mostrar el gráfico
fig.show()

Los métodos update permiten configurar la apariencia del gŕafico.

  • update_layout() se usa para actualizar el diseño general del gráfico. Modifica aspectos como los títulos, etiquetas de los ejes, tamaño, márgenes, leyendas, y colores de fondo, entre otros.
  • update_traces() se usa para actualizar los elementos gráficos que representan los datos, como barras, líneas, puntos de dispersión, etc. En este ejemplo que tenemos un gráfico de barras podemos cambiar las propiedades visuales de las barras, como el color, estilos de líneas o transparencia.

Otros métodos son:

  • update_xaxes() y update_yaxes() se utilizan para modificar las propiedades específicas de los ejes X e Y.
  • update_geos() se usa para actualizar mapas o visualizaciones geoespaciales.

gráficos interactivos con Plotly

Gráficos con datos espaciales

Ploty permite representar datos espaciales sobre un mapa de fondo, creando un mapa interactivo. Al utilizar Dash, ese mapa lo podemos visualizar como si se tratase de una página web. Vamos a poner un ejemplo sencillo, en que se crea un mapa con la ubicación de algunas ciudades sobre un mapa de fondo de OpenStreetMap.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd

# Datos de ejemplo: ubicaciones de ciudades con sus latitudes y longitudes
data = {
    'Ciudad': ['Gijón', 'Salamanca', 'Cádiz', 'Barcelona', 'Almería'],
    'Latitud': [43.5322, 40.9701, 36.5210, 41.3851, 36.8340],
    'Longitud': [-5.6611, -5.6635, -6.2886, 2.1734, -2.4637]
}

df = pd.DataFrame(data)

# Crear un mapa interactivo utilizando Plotly Express
fig = px.scatter_mapbox(
    df, 
    lat="Latitud", 
    lon="Longitud", 
    hover_name="Ciudad", 
    zoom=3,
    mapbox_style="open-street-map"  # Estilo de mapa de fondo
)

# Inicializar la aplicación Dash
app = dash.Dash(__name__)

# Definir el layout (interfaz) de la aplicación
app.layout = html.Div([
    html.H1("Mapa Interactivo de Ciudades de España."),
    dcc.Graph(id='mapa-ciudades', figure=fig)
])

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)

Primero se procede a importar las librerías que vamos a utilizar. Además de Plotly Express que hemos utilizado antes, necesitamos:

  • dash: Es la biblioteca principal que utilizas para construir aplicaciones web interactivas.
  • dcc (Dash Core Components) y html (HTML Components): Se utilizan para crear la interfaz de usuario (UI) de la aplicación.
  • pandas: Se usa para manejar los datos en forma de DataFrame.

A continuación creamos un dataframe con los datos de cinco ciudades. Como se puede observar esos datos se componen del nombre de la ciudad y su latitud y longitud.

Ahora procedemos a crear el mapa interactivo mediante px.scatter_mapbox().
Se crea de esta forma, un mapa interactivo basado en Mapbox, con puntos en las ubicaciones geográficas definidas en el dataframe.

  • df: El DataFrame que contiene las coordenadas.
  • lat=»Latitud»: La columna Latitud del DataFrame define la latitud de las ciudades.
  • lon=»Longitud»: La columna Longitud define la longitud de las ciudades.
  • hover_name=»Ciudad»: Cuando el usuario pasa el cursor sobre los puntos del mapa, se mostrará el nombre de la ciudad.
  • zoom=3: Establece el nivel de zoom inicial en el mapa.
  • mapbox_style=»open-street-map»: Define el estilo del mapa de fondo, en este caso, el de OpenStreetMap.

app = dash.Dash(__name__) Se encarga de inicializar la aplicación Dash. La variable app contiene la aplicación y la instancia de la web.

html.Div([…]): Crea un contenedor HTML para albergar el mapa.

Por último se ejecuta la aplicación.

Esto nos crea un mapa con las ciudades y como podrás observar añade un menú con herramientas desde el que podremos hacer operaciones como zoom o encuadre.

gráficos interactivos con Plotly

El resultado lo puedes ver en el navegador en:  http://127.0.0.1:8050/

 

Deja un comentario