Buscador

Buscador

Trabaje con nosotros

Visualización de datos con la API de ArcGIS para JavaScript: Mostrar los datos por tamaño.


Cuando usted desea representar un grupo de números dentro del mapa y además requiere que su información se muestre por colores, entonces podrá utilizar la técnica de mostrar sus datos por tamaño. Esta técnica también se denomina Símbolo proporcional en el contexto geográfico. En este post usted aprenderá como crear una aplicación de visualización basada en tamaños con la API de ArcGIS para Javascript y algunos consejos que le permitirán optimizar la presentación de la información en la aplicación.

Primera aplicación (Ejemplo)


Crear un mapa con símbolos proporcionales es muy fácil y sencillo con la API, esto se realiza a través de la aplicación de visualización simple, en donde se configura la propiedad de proportionalSymbolInfo; todo lo que necesita es un campo, el valor mínimo y el valor máximo que desea mostrar, y los tamaños de los símbolos para los valores mínimos y máximos:

            renderer.setProportionalSymbolInfo({
                  field: "PERCENT_FR",
                  minDataValue: 200, 
                  maxDataValue: 8000,
                  minSize: 5, 
                  maxSize: 120,
            });
          

Similar a ColorInfo el minDataValue y el maxDataValue no necesariamente corresponden al valor mínimo y máximo real de sus datos; entonces ¿Qué pasara con los valores que se encuentren por debajo de minDataValue o por encima de maxDataValue?, estos obtendrán el mismo tamaño de minSize (para los que sean inferiores de minDataValue) o el tamaño del maxSize (para aquellos valores superiores a maxDataValue).

Proporción ajustada Vs proporción verdadera:

Usted puede observar que la relación entre los valores y el tamaño no es una proporción verdadera (la diferencia entre los valores 1 y 100 no es proporcional con la diferencia del tamaño 5 pixeles y 25 pixeles); a este enfoque ajustado lo llamamos símbolos proporcionales, en donde saltamos de un tamaño mínimo a un máximo sin que se creen círculos inapropiados (para el caso en donde el campo tome valores muy altos).

Para que pueda usar la proporción verdadera, usted deberá solo especificar el minDataValue y el minSize:

            layer.renderer.setProportionalSymbolInfo({
                  field: "value",
                  minDataValue: 1,
                  minSize: 1
            });
          

Lea sobre Mejor Cartografía Vectorial para más detalles técnicos sobre símbolos proporcionales ajustados o verdaderos.

¿Cómo hacer una buena visualización basada en tamaños?

Estos son algunos consejos que pueden ser útiles al crear la visualización basada en tamaños.

  • Proporcionar suficiente diferencia entre los valores mínimos y máximos:



    Izquierda: minSize=5 and maxSize=100, se observa la diferencia entre valores claramente.

    Derecha: minSize=30 and maxSize=50, en este mapa no se puede observar bien la diferencia de valores.

  • Mantener los valores críticos grandes por encima del maxDataValue:



    Izquierda: Se establece 600 visitantes por día, se observa como si la diferencia entre los centros comerciales no fuera tan significativa.

    Derecha: Cuando se definen 10000 personas por día se observa la gran diferencia que existe entre los centros comerciales.

  • Tener superposiciones es normal, pero el hacinamiento se puede evitar a partir de la transparencia de la capa:



    Izquierda: Se observa la información superpoblada y poco clara.

    Medio: Al definir un poco de transferencia la información es más entendible.

    Derecha: La información es muy clara cuando se define una transparencia del 50%.

La leyenda también se encuentra para símbolos proporcionales:

La API es compatible con la leyenda de símbolo proporcional en la mayoría de los casos, para habilitar la leyenda debe incluir valueUnit: “unknown” al establecer proportionalSymbolInfo:

            renderer.setProportionalSymbolInfo({
                  field: "PERCENT_FR",
                  minDataValue: 10,
                  maxDataValue: 10000,
                  minSize: 5,
                  maxSize: 80,
                  valueUnit: "unknown",
            });
          

Esto creara una leyenda que muestra una serie de números [ ... , 1, 2.5, 5, 10, 25, 50, ... ]. Para habilitar valores personalizados utilice legendOptions.customValues:

renderer.setProportionalSymbolInfo({
              field: "PERCENT_FR",
              minDataValue: 10,
              maxDataValue: 10000,
              minSize: 5,
              maxSize: 80,
              valueUnit: "unknown",
              legendOptions: {
                customValues: [10, 2500,5000,7500, 10000]
              }
});

Casos avanzados:

  1. Mapear datos con unidades del mundo real (Ejemplo)

    Si usted está mapeando datos que se miden en una unidad del mundo real, como el área de la copa de los árboles en pies o el ancho de una calle en metros; el código puede ser aún más simple, solo especifique las unidades que está trabajando:



                  renderer.setProportionalSymbolInfo({
                      field: "GroundArea",
                      valueUnit: "feet",
                      valueRepresentation: "area"
                  });
                  
  2. Mapear datos lineales (Ejemplo):

    Si el tipo de geometría de sus datos es lineal, usted todavía puede producir una buena visualización con la API. En lugar de aplicar el tamaño que usted proporciona para el diámetro de un símbolo, la API usa ese valor para representar el tamaño del ancho de la línea.



  3. Mezclar otras visualizaciones (Ejemplo)

    Usted puede mezclar proportionalSymbolInfo con un visualizador que no sea SimpleRenderer. Por ejemplo, con UniqueValueRenderer, puede mostrar una variable categórica y una variable cuantitativa en el mapa al mismo tiempo:



Lo que vendrá después

¡Todavía no hemos llegado al final de esta serie. Espere encontrar más información acerca de densidad de puntos, el predominio del mapeo y la preparación de datos en las próximas semanas!


Fuentes

Blog ArcGIS - Visualización de datos con la API de ArcGIS para JavaScript: Mostrar los datos por tamaño.

http://blogs.esri.com/esri/arcgis/2014/12/01/data-visualization-with-arcgis-api-for-javascript-show-data-by-size/

© Esri Colombia 2017 - Calle 90 # 13 - 40 Piso 5

+57 (1) 650-1575