Voeg een tijdlijnbalk toe aan je pop-up met Arcade

Anonymous User

Overzicht

Kaarten zijn een geweldig hulpmiddel om te laten zien waar iets heeft plaatsgevonden, maar het is vaak een uitdaging voor digitale cartografen om te benadrukken wanneer iets heeft plaatsgevonden en de temporele tendensen die ermee samenhangen. Hoewel de Map Viewer in ArcGIS Online dynamische grafieken ondersteunt, was ik op zoek naar verschillende manieren om deze informatie grafisch te presenteren met behulp van de nieuwe Arcade contentblokopties.

Idealiter wilde ik een Arcade-expressie die door mijn temporele data zou itereren en een kleurgecodeerde tabel voor elk jaar zou genereren, zoals hierboven te zien is. Ik wilde ook dat de code zou werken voor elke dataset, zonder dat er significante aanpassingen nodig waren.

De volledige resulterende Arcade-expressie staat onderaan het artikel (samen met een shout-out voor de Product Engineer die me inspireerde), maar laat me je meenemen door wat er gebeurt en hoe je dit kunt laten werken in je eigen kaart.

Aan de slag

We beginnen met de data. In mijn voorbeeld gebruik ik wat temporele data van CDC over Lymeziekte incidentiecijfers van 2010-2019. Het schema is eenvoudig om mee te werken:

Naam	Bevolking	F2010	F2011	F2012...
Maine	1328361	42.10	60.30	66.60

 

Zodra deze laag is toegevoegd aan Map Viewer, selecteren we de laag vanuit de inhoudstabel en kiezen we de optie + Inhoud toevoegen. Hier zien we een nieuwe optie voor Arcade. Nu begint het leuke.

De invoerwaarden

Het script is geschreven zodat gebruikers vier invoerwaarden kunnen geven:

1. De labels voor de tabel als een array.
   Bijvoorbeeld: ["2010","2011","2012","2013"]
   
   
2. De velden van de dataset die overeenkomen met de labels.
   Bijvoorbeeld: [$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
   
   
3. De kleurverloop en dataklassificatiegrenzen die je wilt dat je data volgt. Hoewel dit in eerste instantie complex lijkt, vraagt de expressie alleen om een datumbereik en de bijbehorende achtergrondkleur van het blok. Je kunt kleurverloopwaarden krijgen die bij je kaart passen van deze webpagina.
   Bijvoorbeeld met de regel: yearinput<= 10 && yearinput> 5, "#c8e7ff", worden datawaarden tussen 10 en 5 toegewezen aan een achtergrondkleur van #c8e7ff. Je hoeft alleen de onderstreepte inhoud te wijzigen.
   
   
4. Op dezelfde manier verandert de volgende functie de kleur van de tekst zelf, met witte tekst op donkere kleuren en zwarte tekst op lichte kleuren. Secties 3 en 4 moeten overeenkomen.
   Bijvoorbeeld: yearinput<= 10 && yearinput> 5, "black"

Maar dat is het! Het Arcade-script regelt de rest. Het telt het aantal categorieën en ontwerpt een tabel verdeeld in gelijkmatig verdeelde secties. Daarna past het de labels toe onderaan de tabel. 

Het resultaat is een balk die datagedreven is en omringd kan worden door andere blokken in de popup, zoals tekst, grafieken en tabellen.

Het kan zelfs worden toegevoegd als onderdeel binnen andere HTML-inhoud:

 

De volledige expressie

 Hier is de volledige expressie die je kunt aanpassen:
(Opmerking: Deze expressie is bijgewerkt op 31 DEC 2021)

 

 

// Definieer de jaren van de tijdlijn.
// Het script zal door deze array itereren
var yearsArray = ["2010", "2011", "2012", "2013"];

// Definieer de bijbehorende velden met waarden
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];

// Specificeer de kleuren en bijbehorende waardebereiken in het kleurverloop
// Voor HEX waarden die overeenkomen met ArcGIS kleuren, bezoek: 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;
}

// Definieer de kleur van de tekst in elke cel, gebaseerd op de achtergrondkleur
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;
}

// GEEN GEBRUIKERSWIJZIGINGEN ONDER DEZE REGEL!

// Bouw de stijlstring voor de bovenste cel
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;
}

// Celbreedte in procenten gebaseerd op hoeveel cellen we hebben
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("De breedte van elke eenheid zal zijn " + cellWidth);

// Stel de bovenste en onderste cellen samen door door de jaren te itereren
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("Div bouwen voor jaar " + yearsArray[index]);
printf("De jaarwaarde is " + valuesArray[index]);

// Stel de bovenste cel samen
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("De volgende cel toevoegen aan bovenste cellen" + topCell);

// Stel de onderste cel samen
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("De volgende cel toevoegen aan onderste cellen" + bottomCell);

// Voeg toe aan bovenste en onderste cellen
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
};

 

 

En een shout-out naar @DaveNyenhuis voor inspiratie. Hij maakte een Dashboard-lijstformaat dat op een zeer vergelijkbare manier werkt! En een shout dank aan @FredericAubry voor de hulp bij het formatteren en de beste praktijken!<\/P>

<\/span><\/P> <\/P> <\/P> <\/P>