Esta guía te permitirá integrar y visualizar de manera efectiva varios gráficos interactivos de Plotly con OpenLayers . Aprenderás a configurar gráficos de diferentes tipos, como barras, líneas, dispersión y tartas, personalizando colores, títulos y otros parámetros.
Con este enfoque, podrás integrar visualizaciones dinámicas y atractivas directamente en tus mapas, haciendo que la interacción con los datos sea más intuitiva y visualmente impactante.
¿Qué es OpenLayers y Plotly?
Como ya sabemos, OpenLayers es una biblioteca de JavaScript que permite mostrar mapas interactivos en la web. Es altamente personalizable y soporta múltiples fuentes de datos geoespaciales.
Por otro lado, Plotly es una biblioteca para la creación de gráficos interactivos que se puede utilizar para representar datos de manera visual en aplicaciones web.
Creando el Mapa Interactivo
En el siguiente ejemplo, crearemos un mapa interactivo utilizando OpenLayers con puntos representando varias ciudades de España. Visualizaremos varios gráficos interactivos de Plotly donde se mostrarán datos de ventas, población y turismo. Además, incluiremos un selector para cambiar entre diferentes tipos de gráficos (barra, línea, dispersión y tarta).
A continuación, se desglosarán los aspectos clave del código y se explicará cómo personalizar tanto el mapa como los gráficos.
Incluir Librerías y Estilos de OpenLayers y Plotly
Para integrar OpenLayers y Plotly, necesitamos agregar sus archivos CSS y JavaScript en el <head> de nuestro documento HTML (incluimos directamente los archivos desde sus respectivas CDNs para integrarlos sin necesidad de instalar nada localmente)
<!-- Estilos de OpenLayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" />
<!-- Scripts de OpenLayers -->
<script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
<!-- Script de Plotly -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>Configuración del Mapa con OpenLayers
Seguidamente, configuraremos el mapa con OpenLayers utilizando una capa base como la de CartoDB Dark Matter.
const map = new ol.Map({
target: 'map', // Elemento HTML donde se renderiza el mapa
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png' // Mapa de fondo negro
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-3.7038, 40.4168]), // Coordenadas centradas en Madrid
zoom: 6 // Nivel de zoom inicial
})
});El mapa se centra inicialmente en Madrid, con coordenadas en el formato estándar EPSG:4326 (latitud/longitud) y luego transformado a EPSG:3857 para que OpenLayers pueda manejarlo.
Añadiendo Datos GeoJSON
El siguiente paso es cargar los datos geográficos usando el formato GeoJSON. En este caso, representamos varias ciudades de España con coordenadas y propiedades adicionales (ventas, población, turismo):
const geojsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Madrid",
"ventas": 600,
"poblacion": 3223334,
"turismo": 10000000
},
"geometry": {
"type": "Point",
"coordinates": [-3.7038, 40.4168]
}
},
// Otros datos de ciudades...
]
};
const geojsonFormat = new ol.format.GeoJSON();
const features = geojsonFormat.readFeatures(geojsonData, {
featureProjection: 'EPSG:3857' // Proyectar coordenadas para el mapa
});Para añadir estos puntos al mapa, utilizamos ol.source.Vector y ol.layer.Vector.
const vectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(geojsonData, {
featureProjection: 'EPSG:3857'
})
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer); // Añadir la capa vectorial al mapa
Implementación del Gráfico con Plotly
Usaremos Plotly para crear los gráficos basados en los datos del GeoJSON. Dependiendo del tipo de gráfico seleccionado, Plotly renderizará el gráfico adecuado (barra, línea, dispersión o tarta):
function showGraph() {
// Obtener datos de todas las ciudades
const cities = [];
const ventas = [];
const poblacion = [];
const turismo = [];
geojsonData.features.forEach((feature) => {
cities.push(feature.properties.name);
ventas.push(feature.properties.ventas);
poblacion.push(feature.properties.poblacion);
turismo.push(feature.properties.turismo);
});
// Determinar el tipo de gráfico
const chartType = document.getElementById("chart-type").value;
let data; // Se usa let ya que el valor se puede cambiar dependiendo del tipo de gráfico
if (chartType === "bar") {
data = [
{ x: cities, y: ventas, name: "Ventas", type: "bar", marker: { color: "blue" }},
{ x: cities, y: poblacion, name: "Población", type: "bar", marker: { color: "green" }},
{ x: cities, y: turismo, name: "Turismo", type: "bar", marker: { color: "orange" }}
];
} else if (chartType === "line") {
data = [
{ x: cities, y: ventas, name: "Ventas", type: "scatter", mode: "lines+markers", marker: { color: "blue" }},
{ x: cities, y: poblacion, name: "Población", type: "scatter", mode: "lines+markers", marker: { color: "green" }},
{ x: cities, y: turismo, name: "Turismo", type: "scatter", mode: "lines+markers", marker: { color: "orange" }}
];
} else if (chartType === "scatter") {
data = [
{ x: cities, y: ventas, name: "Ventas", type: "scatter", mode: "markers", marker: { color: "blue", size: 10 }},
{ x: cities, y: poblacion, name: "Población", type: "scatter", mode: "markers", marker: { color: "green", size: 10 }},
{ x: cities, y: turismo, name: "Turismo", type: "scatter", mode: "markers", marker: { color: "orange", size: 10 }}
];
} else if (chartType === "pie") {
data = [
{ labels: cities, values: ventas, type: "pie", textinfo: "label+percent", name: "Ventas" }
];
}
} Esta función extrae los datos de cada ciudad y se guardan en un array para crear el gráfico.
Para cada tipo de gráfico (bar, line, scatter, pie), se deben configurar los ejes, los valores y el tipo de gráfico, y opcionalmente, se pueden personalizar colores, marcadores y líneas.
Gráfico de Barras (bar)
Cuando chartType es "bar", se configura un gráfico de barras. Para este tipo de gráfico, se necesitan los siguientes parámetros:
- x: Define las etiquetas para el eje X, en este caso, el nombre de las ciudades (almacenado en
cities). - y: Define los valores para el eje Y, como las ventas, la población y el turismo de las ciudades.
- type: Se especifica como
"bar", lo que indica que será un gráfico de barras. - marker: Permite configurar el color de las barras. En este caso, las ventas son azules, la población es verde, y el turismo es naranja.
Gráfico de Líneas (scatter con lines+markers)
Cuando chartType es "line", se crea un gráfico de líneas con marcadores. Los parámetros necesarios son:
- x: Nombres de las ciudades, que aparecen en el eje X.
- y: Los valores (ventas, población o turismo) que se representan en el eje Y.
- type: Aunque es un gráfico de líneas, el tipo sigue siendo
"scatter", ya que Plotly usa esta configuración para gráficos de dispersión y líneas. - mode: Para este tipo de gráfico, se usa
"lines+markers", lo que significa que se dibujarán líneas conectando los puntos y se mostrarán marcadores en cada punto de datos. - marker: Se usa para definir el color de las líneas y los puntos en el gráfico.
Gráfico de Dispersión (scatter)
Cuando chartType es "scatter", se configura un gráfico de dispersión. Los parámetros necesarios son:
- x: Las etiquetas en el eje X (nombres de ciudades).
- y: Los valores en el eje Y (ventas, población o turismo).
- type: Sigue siendo
"scatter", ya que es un gráfico de dispersión. - mode: Aquí se usa
"markers", lo que significa que solo se mostrarán puntos en el gráfico sin conectar las líneas. - marker: Se define el color de los puntos y su tamaño. En este caso, los puntos son azules, verdes y naranjas, con un tamaño de 10.
Gráfico de Tarta (pie)
Cuando chartType es "pie", se crea un gráfico circular, que requiere una configuración diferente:
- labels: Las etiquetas, que son los nombres de las ciudades.
- values: Los valores para cada sector de la tarta, en este caso, las ventas.
- type: Se especifica
"pie", que indica que se generará un gráfico circular. - textinfo: Controla la información que se muestra en cada sector del gráfico. En este caso, se muestran tanto el nombre de la ciudad como el porcentaje correspondiente.
Personalizar la apariencia del gráfico
Este bloque de código se encarga de personalizar la apariencia del gráfico, como el título, la forma en que se agrupan las barras y los colores de fondo.
// Configurar layout
const layout = {
title: "Comparativa de Datos por Ciudad",
barmode: "group", // Agrupar las barras
plot_bgcolor: "rgba(0,0,0,0)", // Fondo transparente para el gráfico
paper_bgcolor: "rgba(255,255,255,1)", // Fondo blanco para el área del gráfico
};
Configura el diseño visual o el «layout» del gráfico que se va a generar. Aquí se definen aspectos estéticos y de presentación:
title: Define el título que aparecerá en la parte superior del gráfico, en este caso, «Comparativa de Datos por Ciudad».barmode: Específicamente para gráficos de barras, esta propiedad establece que las barras se agruparán (group), es decir, no se superponen y están alineadas una al lado de la otra.plot_bgcolor: Establece un fondo transparente (rgba(0,0,0,0)) para el área del gráfico donde se dibujan las barras, líneas, puntos, etc.paper_bgcolor: Define el color de fondo de todo el gráfico, incluyendo los márgenes, siendo blanco (rgba(255,255,255,1)).
Renderizado del gráfico
La línea Plotly.newPlot("graph", data, layout); genera y renderiza un gráfico en el elemento HTML con el ID «graph».
Plotly.newPlot("graph", data, layout);
document.getElementById("graph").style.display = "block"; // Mostrar el gráfico
}El parámetro data contiene los datos y configuraciones del gráfico (como tipo, colores, etc.).
Por último, la línea, document.getElementById("graph").style.display = "block";, se asegura de que el gráfico sea visible en la página, cambiando su estilo a «block» en caso de estar oculto.
Control de Visibilidad del Gráfico
El gráfico puede mostrarse u ocultarse mediante un botón. Aquí se controla su visibilidad.
document.getElementById('toggle-graph').addEventListener('click', function () {
const graphDiv = document.getElementById('graph');
if (graphDiv.style.display === 'none') {
showGraph(); // Mostrar gráfico
graphDiv.style.display = 'block';
this.innerText = 'Ocultar Gráfico'; // Cambiar el texto del botón
} else {
graphDiv.style.display = 'none'; // Ocultar gráfico
this.innerText = 'Mostrar Gráfico';
}
});Con estas simples configuraciones, hemos logrado crear gráficos interactivos y completamente personalizables. Puedes ajustar elementos como el título, el estilo de las barras o el fondo para adaptarlos a tus preferencias.
Consulta el código completo, experimenta con las opciones y personaliza los gráficos según tus necesidades. ¡Es hora de ponerse manos a la obra!
Un caso de éxito notable es nuestra implementación para el cliente Movactiva, donde desarrollamos gráficos de barras que mejoran la visualización y análisis de datos clave. Descubre más sobre este proyecto en el siguiente enlace: Movactiva Visor.
¿Te interesa saber más sobre este proyecto? Puedes asistir al webinar Atlas de Ciudades para la Movilidad Activa en España. Proyecto Movactiva que será el próximo 07 de noviembre de 2024, donde la investigadora Laia Mojica nos presentará los resultados de este proyecto.
¿Quieres comentarnos algo? Adelante!