Animado por las posibilidades de la visualización de datos, he estado siguiendo los cursos impartidos por Mª Luz Congosto y organizados por Camon.
Como la mejor manera de mejorar es practicando, he cogido las herramientas y conceptos que me ha descubierto @congosto y los he aplicado al ejemplo que a continuación os presento.
En realidad el proyecto es un modelo en VRML (si, si, aún existe este protocolo), pero dado que es un formato en desuso, primero os ofrezco un vídeo por si no queréis instalar el plugin con el que ejecutarlo.
Visualización del modelo
El lenguaje VRML (Virtual Reality Modeling Language) permite ver e interactuar com modelos 3D desde nuestro navegador web. O debería. La realidad es que es un lenguaje en desuso que no se actualiza desde 1997.
Aún así, es posible seguir trabajando con este formato; aquí van las instrucciones para que podáis jugar con la visualización completa.
- Descarga el reproductor Cosmo Player
- Ejecuta el instalador incluido en el archivo comprimido
- Instala el plugin para Internet Explorer (aunque asegura que funciona en Mozilla, yo no lo he logrado)
- Abre Internet Explorer y accede a la visualización en VRML
- Dependiendo de tu perfil de seguridad, te puede avisar que se intenta ejecutar un control ActiveX, haz clic en el aviso y permite el contenido bloqueado
- Disfruta de la visualización
Cómo se ha elaborado la visualización
Se han utilizado varias herramientas para cada paso del proceso, aquí veremos paso a paso desde la recogida de datos hasta el modelo final.
Elaboración del archivo de datos
El primer paso es obtener el archivo de datos con el que vamos a trabajar, en nuestro caso los datos que representan las relaciones entre estaciones de la red de Metro
- En la web del Metro de Madrid buscamos el listado de estaciones por línea
- Ordenamos las estaciones en una hoja de cálculo según la relación entre las estaciones (como si recorriéramos estación a estación todas las paradas de todas las líneas)
- Cuando tengamos la tabla completa la guardamos con formato Excel o CSV
- Descargamos e instalamos CreatePajek
- Ejecutamos CreatePajek
- Seleccionamos el archivo con la hoja de cálculo, le decimos el archivo de entrada, el de salida (que es un formato nativo de Pajek con extensión.net, pero no confundir con .NET de Microsoft), la hoja de la que queremos extraer los datos y que columnas usar, así como el tipo de relaciones.
- Creamos el archivo y ya tenemos preparados los datos para empezar la visualización
Elaboración de la visualización con Pajek
Pajek es una herramienta de análisis de redes (pajek significa araña en esloveno) utilizada para estadística que nos permite trabajar con bases de datos de relaciones entre objetos. En nuestro caso los objetos (o nodos) son las estaciones, y las relaciones (o arcos) son las vías que conectan unas estaciones con otras.
- Si no tenemos Pajek, lo descargamos e instalamos
- Ejecutamos el programa y seleccionamos File -> Network -> Read
- Buscamos el archivo .net que hemos creado y lo abrimos
- Nos abrirá un popup avisandonos que ha leido 590 líneas
Pajek tienen muchas posibilidades y herramientas, aquí vamos a pasar de puntillas por este programa y su capacidad para trabajar con bases de datos y vamos a ir directamente a la visualización de nuestros datos.
- Seleccionamos Draw -> Draw (o Ctrl+G), obtendremos una visualización simple
- Para cambiar el tipo de grafo pinchamos en Layout -> Energy -> Fruchterman Reingold -> 3D (hay otros tipos de grafos y algunos dan resultados muy interesantes, en nuestro caso queremos un grafo que no sea plano)
- Pajek nos ofrece la posibilidad de cambiar un poco más el layout; podemos redibujar el grafo (pinchando de nuevo en Layout -> Energy -> Fruchterman Reingold -> 3D), podemos modificar los colores y mover los nodos para cambiarlos de posición, aunque nosotros vamos directamente a exportar el modelo VRML
- Pinchamos en Export -> 3D -> VRML y damos nombre al archivo, guardamos y ya tenemos nuestro modelo
Trabajando con el modelo
Una vez hemos generado el archivo VRML podemos ya visualizar la red en nuestro navegador (hace falta tener instalado Cosmo Player y acceder al archivo con Internet Explorer)
El modelo ya tiene algo de interactividad, y si pasamos el ratón por las estaciones se nos muestra el nombre de la misma en la barra de estado (aunque no reconoce acentos, eñes y demás), además si hacemos clic nos lleva a la página de Pajek. Vamos a modificar el archivo para que aparezcan los nombres correctamente y los enlaces nos lleven a la web de cada estación dentro de la página de Metro de Madrid.
Abrimos el archivo .vrml con el Bloc de Notas u otro editor de texto y buscamos los nodos de la red, que tienen este formato
}
WWWAnchor{name "http://vlado.fmf.uni-lj.si/pub/networks/pajek/" description Banco_de_España
Separator { # Vertex 40
Translation { translation 2.61090 -0.68864 -0.76024 }
Sphere { radius 0.0600}
}
y los transformamos uno a uno para que cada nodo tenga sus datos individuales, quedando así
}
WWWAnchor{name "http://www.metromadrid.es/es/viaja_en_metro/red_de_metro/estaciones/BancoEspana.html" description Banco_de_Espana"
Separator { # Vertex 40
Translation { translation 2.61090 -0.68864 -0.76024 }
Sphere { radius 0.0600}
}
Una vez hayamos introducido las URL individuales y hayamos corregido los nombres, vamos a darle color a la visualización.
Con un editor 3D abrimos el modelo VRML (Cinema4D lo abre, 3DMax lo importa, cada programa trata este formato de manera distinta, pero todos lo reconocen).
Una vez abierto preparamos una textura por cada línea de Metro y asignamos las estaciones y sus enlaces según estas texturas (recuerda que vamos a exportar a VRML, las texturas complejas puede que no te funcionen en el modelo exportado, así que elige texturas planas). También podemos aplicar cámaras e iluminación a nuestro modelo, pero recuerda que al transformarlo en codigo puede que pese un poco.
Cuando esté pintado nos quedará exportarlo o guardarlo en formato VRML (según el programa con el que estes trabajando), y ya puedes abrir el modelo o colgarlo en tu web. Disfruta.
