Přidejte do svého vyskakovacího okna časovou osu s Arcade

Anonymous User

O aplikaci

Mapy jsou skvělým nástrojem pro zobrazení kde se něco stalo, ale často je pro digitální kartografy výzvou zdůraznit kdy se něco stalo a časové tendence kolem toho. Zatímco Map Viewer v ArcGIS Online podporuje dynamické grafy, hledal jsem jiné způsoby, jak graficky prezentovat tyto informace pomocí nových možností obsahového bloku Arcade.

Ideálně jsem chtěl Arcade výraz, který by procházel mé časové údaje a generoval barevně kódovanou tabulku pro každý rok, jak je vidět výše. Také jsem chtěl, aby kód fungoval pro jakoukoli datovou sadu, aniž by bylo nutné provádět významné úpravy.

Celý výsledný Arcade výraz je na konci článku (spolu s poděkováním Produktovému inženýrovi, který mě inspiroval), ale dovolte mi vás provést tím, co se děje a jak to funguje ve vaší vlastní mapě.

Začínáme

Začínáme s daty. V mém příkladu používám některá časová data od CDC o výskytu Lyme nemoci v letech 2010-2019. Schéma je jednoduché na práci:

Název	Populace	F2010	F2011	F2012...
Maine	1328361	42.10	60.30	66.60

 

Jakmile je tato vrstva přidána do Map Vieweru, vybereme vrstvu z obsahu a zvolíme možnost + Přidat obsah. Zde vidíme novou možnost pro Arcade. Teď začíná zábava.

Vstupy

Script je napsán tak, aby uživatelé zadali čtyři vstupy:

1. Popisky pro tabulku jako pole.
   Například: ["2010","2011","2012","2013"]
   
   
2. Pole datové sady odpovídající popiskům.
   Například: [$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
   
   
3. Barevná škála a přerušení klasifikace dat, podle kterých chcete, aby vaše data byla zobrazena. I když se to na první pohled zdá složité, výraz požaduje pouze rozsah dat a odpovídající pozadí bloku. Hodnoty barevné škály odpovídající vaší mapě můžete získat z této webové stránky.
   Například u řádku: yearinput<= 10 && yearinput> 5, "#c8e7ff", hodnoty mezi 10 a 5 budou přiřazeny barvě pozadí #c8e7ff. Stačí změnit podtržený obsah.
   
   
4. Podobně další funkce mění barvu textu samotného, s bílým textem na tmavých barvách a černým textem na světlých barvách. Sekce 3 a 4 by měly spolu souviset.
   Například: yearinput<= 10 && yearinput> 5, "black"

Dle klasifikace vašich barev můžete podle potřeby přidávat nebo odebírat řádky z těchto funkcí.

A to je vše! Arcade skript se postará o zbytek. Spočítá počet kategorií a navrhne tabulku rozdělenou do stejně širokých sekcí. Poté aplikuje popisky ve spodní části tabulky.

Výsledkem je pruh řízený daty, který může být obklopen dalšími bloky v popup okně, jako jsou texty, grafy a tabulky.

Může být dokonce přidán jako součást jiného HTML obsahu:

 

Celý výraz

 Zde je celý výraz k úpravě:
(Poznámka: Tento výraz byl aktualizován 31. PROSINCE 2021)

 

 

// Definujte roky časové osy.
// Skript bude iterovat přes toto pole
var yearsArray = ["2010", "2011", "2012", "2013"];

// Definujte odpovídající pole obsahující hodnoty
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];

// Určete barvy a odpovídající rozsahy hodnot v barevné škále
// Pro HEX hodnoty odpovídající barvám ArcGIS navštivte: 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;
}

// Definujte barvu textu v každé buňce na základě barvy pozadí
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;
}

// NÁSLEDUJÍCÍ ČÁST NEUPRAVUJTE!

// Vytvořte stylový řetězec pro horní buňku
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;
}

// Šířka buňky v procentech podle počtu buněk
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("Šířka každé jednotky bude " + cellWidth);

// Sestavte horní a dolní buňky iterací přes roky
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("Vytvářím div pro rok " + yearsArray[index]);
printf("Hodnota roku je " + valuesArray[index]);

// Sestavte horní buňku
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("Přidávám následující buňku do horních buněk" + topCell);

// Sestavte dolní buňku
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("Přidávám následující buňku do dolních buněk" + bottomCell);

// Přidejte k horním a dolním buňkám
 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",
stext: table
};

 

 

A poděkování @DaveNyenhuis za inspiraci. Vytvořil formát seznamu Dashboardu, který funguje velmi podobným způsobem! A poděkování poděkování @FredericAubry za pomoc s formátováním a nejlepšími postupy!<\/P>

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