Mapas animados con WebGL. Como expliqué en mi entrada anterior, los viernes por la tarde en CARTO es “leapfrog-time” y podemos aprovechar el tiempo para explorar temas que nos parecen de interés, proyectos personales, etc.
Estas últimas semanas me he dedicado a crear mapas animados con WebGL, más concretamente con la librería de gráficos vectoriales que hemos desarrollado, CARTO VL.
Mapas animados con WebGL
Una de las principales características de CARTO VL, es que permite realizar mapas animados con WebGL como nunca antes se habían hecho, así que voy a poner por aquí algunos ejemplos y una mínima explicación:
El mapa de árboles de Valencia
Poco que decir, ya hice una mini-entrada.
Lo curioso es poder animar un dataset (en este caso puntos), aplicando una función de PostGIS (en este caso, la distancia al centro de Valencia) y además aplicar una vista isométrica, para salirse un poco de la proyección de Mercator “convencional“.
El teorema de los cuatro colores
Otro de los leapfrogs que he hecho últimamente es resolver el teorema de los cuatro colores con PostGIS, la continuación fue crear un mapa animado para ver cómo funcionan los algoritmos de Kempe y Welsh-Powell.
La gracia en este caso, fue animar líneas. Básicamente por el proceso seguido. Lo habitual cuando animas una línea, es que aparece y desaparece por completo, pero en este caso, para conseguir el efecto de animación desde el origen al destino hay que segmentar la línea en trozos.
Por otra parte, metí el truquillo de conseguir líneas punto a punto curvas. Por aquí está el script de PostGIS que permite hacer ambas cosas.
Mapa de predicción de lluvias en Estados Unidos en tiempo real
Una de las APIs de CARTO disponible para todos los usuarios, da la posibilidad de sincronizar cualquier dataset remoto periódicamente.
En este caso, utilizando los datos de predicción de lluvias a 24 horas del servicio nacional de meteorología de Estados Unidos, podemos tener en una tabla de PostGIS esos datos actualizados cada hora.
Si pintamos esos datos en un mapa tal cual nos quedaría algo así:
Si le damos algo de cariño, nos puede quedar algo así:
Y si además animamos la predicción cada 6 horas nos queda este mapa:
En este mapa animado hay unos cuantos hacks interesantes, desde utilizar una capa base custom, hecha de diferentes datasets de contornos de países y estados, hasta cambiar totalmente la proyección del mapa o utilizar una query de PostGIS que permite rellenar un polígono con líneas y conseguir ese efecto de “lluvia” que es el que interesa para un mapa de predicción de lluvia.
Todos los hacks se pueden ver en el código.
Ya os digo que tanta creatividad no es mía y se le ha tomado prestada a Mamata (AKA la puta ama)
Animando 40 años de crecimiento de Walmart
Esta semana me encontré por ahí este notebook de @mbostock (AKA el puto amo) en el que animaba la apertura de supermercados Walmart en Estados Unidos desde 1962 hasta 2006.
Así que intenté hacer una reproducción con CARTO VL y lo que me salió fue esto:
Mapa animado en el que he utilizado el hack de las líneas animadas, más el de cambiar la proyección al mapa, más un largo etcétera.
Más mapas animados con WebGL
Me gustaría tener tiempo (o querer dedicárselo) a explicar con detalle todo el proceso que he seguido en cada mapa para llegar de tener un dataset con unas cuantas filas con geometrías a una visualización “diferente” a las que se suelen encontrar por ahí.
De momento no lo voy a hacer y me voy a limitar a enlazar el repositorio dónde están todos los ejemplos, en algunos casos, están las SQL para generar los datos, así que de momento creo que es suficiente.
