Colores clave

El Atlas COVID del Instituto de Salud Carlos III permite al usuario analizar la información tanto espacial como temporalmente. La dimensión espacial puede explorarse a través de mapas coropléticos donde el color de relleno de cada municipio o código postal corresponde a un valor de la magnitud representada. Por otra parte, es posible analizar la evolución de dichas magnitudes a lo largo de los diferentes periodos a través de gráficos temporales.

El usuario puede seleccionar el esquema de color utilizada en los mapas coropléticos entre aquellos propuestos por Cynthia Brewer. Esta cartógrafa que propuso una colección de combinaciones de colores diseñadas para la visualización de datos con el objetivo principal de ser perceptualmente efectivos y accesibles, lo que significa que son fáciles de distinguir y no presentan problemas para personas con diferentes tipos de daltonismo. Estas paletas se utilizan ampliamente en la cartografía, el análisis de datos y cualquier disciplina que requiera representar información de forma visual, ya que facilitan la comprensión de patrones y tendencias en los datos.

En función de la magnitud seleccionada, se ofrecen paletas de color secuenciales o divergentes. Las paletas secuenciales se utilizan para magnitudes que van de valores bajos a altos (por ejemplo, tasa de mortalidad) y los colores varían en luminosidad, a menudo de claro a oscuro de un solo tono, o de claro a oscuro con un ligero cambio de tono. Por otro lado, se ofrecen paletas divergentes para datos que tienen un punto medio significativo y se extienden en dos direcciones (por ejemplo, razones de incidencia estandarizadas). En este caso, se utilizan dos tonos de color que divergen de un color neutro central, típicamente el blanco.

Usabilidad mejorada con un mosaico vectorial

Uno de los objetivos en el diseño de la interfaz de usuario del Atlas fue ofrecer una experiencia de usuario óptima. La experiencia de usuario se refiere a la percepción que tiene un usuario al interactuar con un producto o servicio, incluyendo su usabilidad, diseño visual y rendimiento técnico. Es fundamental para el éxito de cualquier producto digital, ya que influye en la satisfacción del usuario y en su disposición a continuar utilizando el producto o servicio.

Para mejorar la usabilidad se optó por desarrollar mapas y gráficos interactivos de manera que el usuario pueda consultar los valores visualizados simplemente situando el cursor encima de ellos. Por este motivo, se decidió utilizar una tecnología que permitiese dibujar los mapas directamente en el navegador. De esta manera, el servidor transfiere al navegador datos en vez de imágenes, como es habitual en Sistemas de Información Geográfica (SIG) utilizando estándares como el Web Map Service (WMS) de la Open Geospatial Consortium (OGC).

En el caso del Atlas COVID, los datos están compuestos por la definición de los polígonos (por ejemplo, municipios o códigos postales) y las magnitudes asociadas. Sin embargo, el detalle geográfico de los códigos postales obliga a simplificar su representación al visualizar grandes territorios geográficos. En caso contrario, el volumen de información transferida del servidor al cliente afectaría negativamente al rendimiento y, por tanto, a la usabilidad de la aplicación.

Para abordar esta simplificación se optó por utilizar teselas vectoriales. Las teselas vectoriales son una forma eficiente de manejar datos geoespaciales en aplicaciones web al contener la información en formato vectorial en lugar de imágenes estáticas. Esto significa que la aplicación solo necesita descargar los datos geométricos y sus atributos, lo que reduce mucho la cantidad de información que se transfiere, acelerando la carga del mapa y mejorando la experiencia del usuario.
Además, como los datos son vectores, el mapa puede escalar y adaptarse a cualquier nivel de zoom sin perder calidad ni volverse borroso, algo que suele pasar con las imágenes ráster. Esto es especialmente útil para dispositivos con pantallas de alta resolución o cuando se amplía mucho el detalle del mapa.

Otra ventaja es que las teselas vectoriales permiten personalizar el estilo del mapa directamente desde el navegador, sin necesidad de generar nuevas imágenes para cada cambio. Esto facilita la creación de mapas más dinámicos y adaptados a distintas necesidades o contextos, como cambiar colores o resaltar elementos específicos según la interacción del usuario.
Por último, al estar basadas en datos vectoriales, estas teselas permiten interactividad avanzada, como seleccionar, filtrar o animar elementos del mapa con más precisión y flexibilidad que las imágenes tradicionales.

Documentación

Desde el punto de vista técnico, se muestra a continuación las librerías utilizadas para el desarrollo del Atlas COVID:

• React ha sido utilizado como librería base para el desarrollo de la interfaz
• MapLibre ha sido utilizado para visualizar mapas y procesar la información geoespacial
• Google Protobufs (PBF) ha sido el formato de datos empleado para generar las teselas vectoriales
• La librería VisX se emplea para generar gráficas de series temporales.
• Para desarrollar el diseño, que responsivo a diferentes tamaños de pantalla, se usa la librería Tailwind CSS.