À propos
Les cartes sont un excellent outil pour montrer où quelque chose s'est produit, mais il est souvent difficile pour les cartographes numériques de mettre en évidence quand quelque chose s'est produit et les tendances temporelles qui l'entourent. Bien que le Map Viewer dans ArcGIS Online prenne en charge les graphiques dynamiques, je cherchais différentes façons de présenter graphiquement cette information en utilisant les nouvelles options de bloc de contenu Arcade.
Idéalement, je voulais une expression Arcade qui itérerait à travers mes données temporelles, et générerait un tableau codé par couleur pour chaque année, comme vu ci-dessus. Je voulais aussi que le code fonctionne pour n'importe quel jeu de données, sans avoir à faire de modifications importantes.
L'expression Arcade complète résultante se trouve en bas de l'article (avec un clin d'œil à l'ingénieur produit qui m'a inspiré), mais laissez-moi vous expliquer ce qui se passe et comment faire fonctionner cela dans votre propre carte.
Commencer
Nous commençons avec les données. Dans mon exemple, j'utilise des données temporelles du CDC sur les taux d'incidence de la maladie de Lyme de 2010 à 2019. Le schéma est simple à utiliser :
| Nom | Population | F2010 | F2011 | F2012... |
| Maine | 1328361 | 42.10 | 60.30 | 66.60 |
Une fois cette couche ajoutée au Map Viewer, nous sélectionnons la couche dans la table des matières et choisissons l'option + Ajouter du contenu. Ici, nous voyons une nouvelle option pour Arcade. C'est là que le plaisir commence.
Les entrées
Le script est écrit pour que les utilisateurs fournissent quatre entrées :
- Les étiquettes pour le tableau sous forme de tableau.
Par exemple : ["2010","2011","2012","2013"]
- Les champs du jeu de données qui correspondent aux étiquettes.
Par exemple : [$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
- La rampe de couleurs et les seuils de classification des données que vous souhaitez que vos données suivent. Bien que cela semble complexe au début, l'expression ne demande qu'une plage de données et la couleur d'arrière-plan correspondante du bloc. Vous pouvez obtenir des valeurs de rampe de couleurs qui correspondent à votre carte sur cette page web.
Par exemple avec la ligne : yearinput<= 10 && yearinput> 5, "#c8e7ff", les valeurs de données entre 10 et 5 se verront attribuer une couleur d'arrière-plan #c8e7ff. Vous n'avez besoin que de changer le contenu souligné.
- De même, la fonction suivante change la couleur du texte lui-même, avec du texte blanc sur des couleurs foncées, et du texte noir sur des couleurs claires. Les sections 3 et 4 doivent correspondre entre elles.
Par exemple : yearinput<= 10 && yearinput> 5, "black"
Selon la classification de vos couleurs, vous pouvez ajouter ou supprimer des lignes dans ces fonctions, selon les besoins.
C'est tout ! Le script Arcade gère le reste. Il comptera le nombre de catégories et concevra un tableau divisé en sections également espacées. Ensuite, il applique les étiquettes en bas du tableau.
Le résultat est une barre pilotée par les données et pouvant être entourée par d'autres blocs dans la popup, comme du texte, des graphiques et des tableaux.
Il peut même être ajouté comme un élément au sein d'autres contenus HTML :
L'expression complète
Voici l'expression complète à modifier :
(Note : Cette expression a été mise à jour le 31 DÉC 2021)
// Définir les années de la chronologie.
// Le script va itérer à travers ce tableau
var yearsArray = ["2010", "2011", "2012", "2013"];
// Définir les champs correspondants contenant les valeurs
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];
// Spécifier les couleurs et plages de valeurs correspondantes dans la rampe de couleurs
// Pour des valeurs HEX correspondant aux couleurs ArcGIS, visitez : 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;
}
// Définir la couleur du texte dans chaque cellule, basée sur la couleur d'arrière-plan
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;
}
// NE PAS MODIFIER EN DESSOUS DE CETTE LIGNE !
// Construire la chaîne de style pour la cellule supérieure
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;
}
// Largeur des cellules en pourcentage selon le nombre de cellules
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("La largeur de chaque unité sera " + cellWidth);
// Assembler les cellules du haut et du bas en itérant sur les années
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("Construction du div pour l'année " + yearsArray[index]);
printf("La valeur de l'année est " + valuesArray[index]);
// Assembler la cellule supérieure
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("Ajout de la cellule suivante aux cellules supérieures" + topCell);
// Assembler la cellule inférieure
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("Ajout de la cellule suivante aux cellules inférieures" + bottomCell);
// Assembler aux cellules supérieures et inférieures
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
};
Et un clin d'œil à @DaveNyenhuis pour l'inspiration. Il a créé un format liste Dashboard qui fonctionne d'une manière très similaire ! Et un clin un grand merci à @FredericAubry pour l'aide avec la mise en forme et les meilleures pratiques !
