Esta página web no está soportada en este navegador. Intente Microsoft Edge, Google Chrome, Safari o Firefox.

x

Buscador

Buscador

Todo el soporte de Esri en español

Representación multivariada - Técnicas de visualización 2D en JavaScript

Kristian Ekenes, Enero 11 de 2016


Smart Mapping fue adicionado a la API de ArcGIS para JavaScript en la versión 3.13 para proveer a los desarrolladores web una manera sencilla de crear representaciones inteligentes y visualmente agradables con base en la distribución de los datos y el mapa base.

Este nuevo módulo ayuda a eliminar algunas suposiciones sobre lo complicado que puede ser definir el color y el tamaño adecuado para visualizar los atributos. Además de los generadores de representaciones, Smart Mapping introdujo variables visuales como una manera sencilla para definir color, tamaño y rampas para la visualización de datos numéricos. Estas rampas pueden ser continuas a partir de la determinación de los valores mínimos y máximos, o a partir de la definición de clases y cortes.

Lo que hace a las variables visuales particularmente poderosas, es la capacidad de crear mapas temáticos multivariados visualmente atractivos con sólo unas pocas líneas de código. Los siguientes ejemplos muestran cómo las variables visuales pueden realzar la historia de su mapa, descubriendo el poder de múltiples variables en una sola visualización.

Visualizar una variable con color

El siguiente ejemplo usa UniqueValueRenderer para sombrear cada condado de los Estados Unidos, con uno de dos colores: Verde o Púrpura. Los condados de color verde son aquellos en donde la mayoría de la población adulta (25 años o más) ha asistido por lo menos una vez a educación superior. Los condados de color púrpura es en donde el número de adultos que nunca asistieron a la universidad supera a aquellos que asistieron a un programa universitario.

Clic en la imagen para ver el ejemplo

Si bien las tendencias espaciales son evidentes de inmediato, esta visualización sólo cuenta una parte de la historia de la geografía de los adultos que asisten a alguna universidad en los Estados Unidos. La única variable considerada aquí es un grupo que supera al otro en cada condado. Consideraciones tales como la población y la diferencia entre grupos en cada condado son ignoradas, dejando al usuario hacer clic en los condados individuales para encontrar esas estadísticas por sí mismo.

Por ejemplo, realice un acercamiento a la zona de Cincinnati, Ohio. Haga clic en varios condados de la zona y observe el gráfico circular y las cifras globales. Algunos condados tienen un porcentaje mucho mayor de los adultos que asistieron a la universidad y otros tienen un porcentaje mucho más bajo. Algunos tienen una mezcla casi igual de los dos. Las diferencias entre estas características no son inmediatamente evidentes para el usuario con el color como variable única

Visualizar dos variables con color y opacidad

Para mejorar este mapa, vamos a añadir una variable visual para la representación. Todo lo que se requiere es el tipo de visualización, el campo, y un conjunto de valores entre los que se desplegara el color, la opacidad o el tamaño. Si una entidad contiene un valor mayor que el valor máximo de los datos, se le asigna el valor más alto de color, tamaño, o de opacidad según se defina en la variable visual. Entidades con valores menores al mínimo se les asignara los valores más bajos de visualización.

En el ejemplo anterior, se hizo uso del color, así que vamos a incluir una variable visual llamada opacityInfo para agregar una segunda dimensión a esta visualización. Debido a que la opacidad es bueno para representar Influencia, lo usaremos para mostrar la influencia de la mayoría de la población en cada condado. Tendremos entidades sombreadas con total opacidad si el grupo mayoritario (ya sea si ha asistido a la universidad o no ha asistido a la universidad) supera la minoría 3:1 o constituye al menos el 75% de la población adulta total.

Si la mayoría difícilmente supera la minoría, vamos a hacer a la entidad muy transparente. En este caso, si la mayoría es el 51% de la población adulta total, le daremos 10% de opacidad por lo que todavía se puede observar el color de la entidad.

renderer.setVisualVariables([{
type: "opacityInfo",
field: "ATE_COL_DOM_PER",
stops: [{ value: 50, opacity: 0.1}, { value: 75, opacity: 1}]
}]);

Clic en la imagen para ver el ejemplo


Esta visualización es mucho mejor. Podemos apreciar de inmediato un patrón espacial: En la frontera Texas - México y en los condados de la región de los Apalaches del sur y el este de los Estados Unidos, son áreas en las que los adultos que no asisten a la universidad no solo supera a los que asistieron, sino que lo hacen con un gran margen.

Por otra parte, no es inmediatamente evidente si existe una tendencia espacial similar en los condados donde los adultos que asistieron a la universidad superan significativamente a aquellos que no asistieron.

Visualizar una tercera variable con el tamaño

La adición de opacidad permite al usuario obtener una mejor comprensión de cuan dominante es un valor atributivo respecto a otro. Pero seguimos sin tener una idea en general de cómo se encuentran los números de un condado en comparación con otros de la zona o en otras partes del país.

Para obtener información adicional sobre nuestros datos, vamos a añadir un sizeInfo en la variable visual para apreciar la población adulta en cada condado.


Clic en la imagen para ver el ejemplo


Esto nos permite obtener una mejor comprensión de cómo los datos de cada entidad se compara con otras entidades. Los círculos más grandes indican los condados con más de un millón de adultos. Con unas pocas excepciones, como el Bronx - Nueva York y Filadelfia – Pennsylvania, existe una clara tendencia que muestra que los condados urbanos en su mayoría están poblados por adultos que han asistido al menos a un programa universitario. Los condados dominados por adultos que no han frecuentado una universidad suelen ser geográficamente rurales y poco poblados.

Como se evidencia en las aplicaciones de los ejemplos anteriores, las variables visuales ofrecen la posibilidad de crear fácilmente mapas multivariantes que pueden representar dos o tres atributos numéricos utilizando el color, la opacidad y el tamaño.

En las próximas semanas se publicara una serie de tres noticias en donde se exploraran las técnicas de visualización 3D usando las variables visuales en una escena con la API 4.0 beta versión 3.