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

Visualización de datos con la API de ArcGIS para JavaScript: Mostrar datos por color


Mostrar mapas que tengan variaciones de color en su información ha sido la manera más popular de representar datos geoespaciales, académicamente para los cartógrafos esto se denomina Coropletas. Si usted realiza una búsqueda internet sobre un “Mapa de población de Estados Unidos”, encontrara que el 90% de los resultados son mapas cloropléticos. En este post usted aprenderá a crear un mapa implementando esta técnica con la API de ArcGIS.

Empecemos (Ejemplo)

Asignación de datos por color (Cloropletas) nunca ha sido más fácil, con la API de ArcGIS para Javascript, esto se realiza a partir de unas pocas líneas de código; mas adelante usted vera opciones más avanzadas, por el momento iniciaremos con el ejemplo más sencillo.

Para empezar se necesita una aplicación de un mapa web, en donde se visualice una capa, si no sabe cómo hacer esto revise el primer post de esta serie.

Dentro del código puede utilizar el método .setColorInfo para establecer la propiedad de colorInfo. Simplemente deberá insertar un nombre de un campo, un valor mínimo y máximo, y los valores de los colores:

renderer.setColorInfo({
field: "Poblacion",
maxDataValue: 7000000,
minDataValue: 300,
colors: [
new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"), new Color("#7b3578"), new Color("#350242")
]
});

Una rampa de colores se creara con los cinco colores especificados anteriormente; esta rampa se extenderá desde el valor más bajo (300) hasta el valor más alto (7’000.000), diferenciándolos a partir de tonos claros (para valores bajos) hasta tonos oscuros (para valores altos). Esto se llama una rampa secuencial y es la mejor manera para crear mapas cloropléticos, aunque a continuación encontrara varias alternativas a este método.

Opción avanzada # 1: Enfocar la rampa de color (Ejemplo)

Para poder realizar esto, es necesario que usted conozca sus datos; para este caso conocemos que el promedio de personas por municipio es de aproximadamente 1’200.000 y la desviación estándar es de aproximadamente 1’600.000, entonces se propuso un valor mínimo de 0 y un valor máximo de 4’400.000, para enfocar la rampa a dos desviaciones estándar.


renderer.setColorInfo({
field: "Poblacion",
maxDataValue: 0,
minDataValue: 4400000,
colors: [
new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"), new Color("#7b3578"), new Color("#350242")
]
});

A diferencia con la visualización anterior se puede observar que se destacan más municipios, si la desviación de sus datos no es tan alta observara que existe más variación del purpura respecto al anterior ejercicio.

Opción avanzada # 2: Especificar cortes en rampa de colores (Ejemplo)

Como se mencionó anteriormente, la gama de colores se ingresa para crear una rampa; es posible que usted desee asignar a un valor específico un color, no es necesario utilizar los colores en colorInfo, usted puede agregar cortes; cada corte es un objeto que tiene un valor y un color.

renderer.setColorInfo({
field: "Poblacion",
stops: [
{ value: 300, color: new Color("#570959") },
{ value: 1200000, color: new Color("#ffffff") },
{ value: 7000000, color: new Color("#a53217") }
]
});

Esto es útil cuando hay valores específicos que usted desea ver en el mapa, en el código anterior se observó que se resaltaron los municipios cuya población está cerca del promedio nacional (1’200.000) y se asignaron valores divergentes con tonos oscuros para que estos resaltaran.

Alternativa: Clasificar los datos (Ejemplo)

Todavía existe una manera de crear mapas cloropléticos, por ejemplo si usted quiere contar una historia sencilla, como “lo que está por debajo de un valor”, “lo que está por encima de un valor”, es posible utilizar la clase ClassBreaksRenderer, para clasificar los datos en unas pocas clases, en el siguiente código vamos a dividir los datos en tres clases: por encima del promedio nacional, cerca de la media nacional y por debajo de la media nacional.

Usted puede crear una clase con el campo que desea asignar y luego añadir pausas; por cada pausa o corte se deberá establecer el valor mínimo, el valor máximo, la etiqueta y el símbolo.

var renderer = new ClassBreaksRenderer(null, "Percent_Uninsured");
var outline = new SimpleLineSymbol();
outline.setColor(new Color("#999999"));
outline.setWidth(0.5);
renderer.addBreak({
label: "Por debajo de la media",
minValue: 300,
maxValue: 900000,
symbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color("#eecec9"))
});
renderer.addBreak( ... );
...

Lo que vendrá después

Existen más métodos de visualización, siga siguiendo este post para aprender como usted puede mostrar los datos mediante la variación del tamaño, crear mapas de densidad y asignar categorías predominantes.


Fuentes

Blog ArcGIS - Visualización de datos con la API de ArcGIS para JavaScript: Mostrar datos por color

http://blogs.esri.com/esri/arcgis/2014/10/10/data-visualization-with-arcgis-api-for-javascript-show-data-by-color/

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

+57 (1) 650-1575