Acerca de
Los mapas son una gran herramienta para mostrar dónde ocurrió algo, pero a menudo es un desafío para los cartógrafos digitales resaltar cuándo ocurrió algo y los eventos temporales que lo rodean. Aunque el Map Viewer en ArcGIS Online soporta gráficos dinámicos, estaba buscando diferentes formas de presentar gráficamente esta información usando las nuevas opciones de bloque de contenido Arcade.
Idealmente, quería una expresión Arcade que iterara a través de mis datos temporales y generara una tabla codificada por colores para cada año, como se ve arriba. También quería que el código funcionara para cualquier conjunto de datos, sin tener que hacer modificaciones significativas.
La expresión completa resultante de Arcade está al final del artículo (junto con un reconocimiento para el Product Engineer que inspiró esto), pero permítanme guiarles a través de lo que está sucediendo y cómo hacer que esto funcione en su propio mapa.
Comenzando
Comenzamos con los datos. En mi ejemplo, estoy usando algunos datos temporales del CDC sobre tasas de incidencia de la enfermedad de Lyme de 2010-2019. El esquema es simple de trabajar:
| Nombre | Población | F2010 | F2011 | F2012... |
| Maine | 1328361 | 42.10 | 60.30 | 66.60 |
Una vez que esta capa se agrega al Map Viewer, seleccionamos la capa desde la tabla de contenidos y seleccionamos la opción + Añadir contenido. Aquí vemos una nueva opción para Arcade. Ahora es cuando comienza la diversión.
Las entradas
El script está escrito para que los usuarios proporcionen cuatro entradas:
- Las etiquetas para la tabla como un arreglo.
Por ejemplo: ["2010","2011","2012","2013"]
- Los campos del conjunto de datos que se alinean con las etiquetas.
Por ejemplo: [$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
- La rampa de color y los cortes de clasificación de datos que desea que sus datos sigan. Aunque esto parece complejo al principio, la expresión solo pide un rango de datos y el color de fondo correspondiente del bloque. Puede obtener valores de rampa de color que coincidan con su mapa desde esta página web.
Por ejemplo con la línea: yearinput<= 10 && yearinput> 5, "#c8e7ff", los valores de datos entre 10 y 5 se asignarán un color de fondo #c8e7ff. Solo necesita cambiar el contenido subrayado.
- De manera similar, la siguiente función cambia el color del texto en sí, con texto blanco sobre colores oscuros y texto negro sobre colores claros. Las secciones 3 y 4 deben corresponder entre sí.
Por ejemplo: yearinput<= 10 && yearinput> 5, "black"
Dependiendo de la clasificación de sus colores, puede agregar y eliminar líneas de estas funciones, según sea necesario.
¡Pero eso es todo! El script Arcade maneja el resto. Contará el número de categorías y diseñará una tabla dividida en secciones igualmente espaciadas. Luego aplica las etiquetas en la parte inferior de la tabla.
El resultado es una barra impulsada por datos que puede estar rodeada por otros bloques en el popup, como texto, gráficos y tablas.
Incluso puede agregarse como una pieza dentro de otro contenido HTML:
La expresión completa
Aquí está la expresión completa para que modifique:
(Nota: Esta expresión fue actualizada el 31 DIC 2021)
// Definir los años del cronograma.
// El script iterará a través de este arreglo
var yearsArray = ["2010", "2011", "2012", "2013"];
// Definir los campos correspondientes que contienen los valores
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];
// Especificar los colores y rangos de valores correspondientes en la rampa de color
// Para valores HEX que coincidan con colores ArcGIS, visite: https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/esri-color-ramps/
function computeCellBackgroundColor(yearValue) {
var color = When(
yearValue < 5,
"#f5ffff",
yearValue <= 10 && yearValue > 5,
"#c8e7ff",
yearValue <= 15 && yearValue > 10,
"#9bd0ff",
yearValue <= 20 && yearValue > 15,
"#6db8ff",
yearValue <= 25 && yearValue > 20,
"#40a0ff",
yearValue <= 30 && yearValue > 25,
"#3b94eb",
yearValue <= 35 && yearValue > 30,
"#3687d7",
yearValue <= 40 && yearValue > 35,
"#307bc3",
yearValue <= 45 && yearValue > 40,
"#2b6eaf",
yearValue <= 50 && yearValue > 45,
"#2968a5",
yearValue <= 55 && yearValue > 50,
"#26629b",
yearValue <= 60 && yearValue > 55,
"#245b91",
yearValue > 60,
"#215587",
"grey"
);
return color;
}
// Definir el color del texto en cada celda, basado en el color de fondo
function computeCellTextcolor(yearValue) {
var color = When(
yearValue < 5,
"black",
yearValue <= 10 && yearValue > 5,
"black",
yearValue <= 15 && yearValue > 10,
"black",
yearValue <= 20 && yearValue > 15,
"black",
yearValue <= 25 && yearValue > 20,
"white",
yearValue <= 30 && yearValue > 25,
"white",
yearValue <= 35 && yearValue > 30,
"white",
yearValue <= 40 && yearValue > 35,
"white",
yearValue <= 45 && yearValue > 40,
"white",
yearValue <= 50 && yearValue > 45,
"white",
yearValue <= 55 && yearValue > 50,
"white",
yearValue <= 60 && yearValue > 55,
"white",
yearValue > 60,
"white",
"grey"
);
return color;
}
// ¡NO MODIFICAR POR EL USUARIO DEBAJO DE ESTA LÍNEA!
// Construir la cadena de estilo para la celda superior
function buildTopCellStyle(width, textColor, backgroundColor) {
var cellStyle = 'style="';
cellStyle += "text-align:center;";
cellStyle += "font-size:24px;";
cellStyle += `width:${width};`;
cellStyle += `background:${backgroundColor};`;
cellStyle += `color:${textColor};`;
cellStyle += '"';
return cellStyle;
}
// Ancho de celda en porcentaje basado en cuántas celdas tenemos
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("El ancho de cada unidad será " + cellWidth);
// Armar las celdas superior e inferior iterando a través de los años
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("Construyendo div para el año " + yearsArray[index]);
printf("El valor del año es " + valuesArray[index]);
// Armar la celda superior
var value = valuesArray[index];
var topCellTextColor = computeCellTextcolor(value);
var topCellBackgroundColor = computeCellBackgroundColor(value);
var topCellStyle = buildTopCellStyle(cellWidth, topCellTextColor, topCellBackgroundColor);
var topCell = `<td ${topCellStyle}><b>${value}</b></td>`;
printf("Agregando la siguiente celda a las celdas superiores" + topCell);
// Armar la celda inferior
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("Agregando la siguiente celda a las celdas inferiores" + bottomCell);
// Armar las celdas superior e inferior
topCells = topCells + topCell;
bottomCells = bottomCells + bottomCell;
}
var table = '<table style=\"width:100%;\">';
table += `<tr>${topCells}</tr>`;
table += `<tr>${bottomCells}</tr>`;
table += "</table>";
return {
type: "text",
text: table
};
Y un reconocimiento a @DaveNyenhuis por la inspiración. Él creó un formato de lista para Dashboard que funciona de manera muy similar! Y un saludo agradecimiento a @FredericAubry por la asistencia con el formato y las mejores prácticas!<\/P>
<\/span><\/P> <\/P> <\/P> <\/P>
