Fügen Sie Ihrem Pop-up mit Arcade eine Zeitachsenleiste hinzu

Anonymous User

Über uns

Karten sind ein großartiges Werkzeug, um zu zeigen, wo etwas passiert ist, aber es ist oft eine Herausforderung für digitale Kartografen, hervorzuheben, wann etwas passiert ist und die zeitlichen Tendenzen darum herum. Während der Map Viewer in ArcGIS Online dynamische Diagramme unterstützt, suchte ich nach anderen Möglichkeiten, diese Informationen grafisch mit den neuen Arcade-Inhaltsblockoptionen darzustellen.

Idealerweise wollte ich einen Arcade-Ausdruck, der durch meine zeitlichen Daten iteriert und für jedes Jahr eine farbcodierte Tabelle generiert, wie oben zu sehen. Ich wollte auch, dass der Code für jeden Datensatz funktioniert, ohne wesentliche Änderungen vornehmen zu müssen.

Der vollständige resultierende Arcade-Ausdruck befindet sich am Ende des Artikels (zusammen mit einem Dank an den Product Engineer, der mich inspiriert hat), aber lassen Sie mich Ihnen erklären, was passiert und wie Sie dies in Ihrer eigenen Karte zum Laufen bringen.

Erste Schritte

Wir beginnen mit den Daten. In meinem Beispiel verwende ich einige zeitliche Daten von CDC zu Inzidenzraten der Lyme-Borreliose von 2010-2019. Das Schema ist einfach zu handhaben:

Name	Bevölkerung	F2010	F2011	F2012...
Maine	1328361	42.10	60.30	66.60

 

Sobald diese Ebene im Map Viewer hinzugefügt wurde, wählen wir die Ebene aus dem Inhaltsverzeichnis aus und wählen die Option + Inhalt hinzufügen. Hier sehen wir eine neue Option für Arcade. Jetzt beginnt der Spaß.

Die Eingaben

Das Skript ist so geschrieben, dass Benutzer vier Eingaben machen:

1. Die Bezeichnungen für die Tabelle als Array.
   Zum Beispiel: ["2010","2011","2012","2013"]
   
   
2. Die Felder des Datensatzes, die mit den Bezeichnungen übereinstimmen.
   Zum Beispiel: [$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
   
   
3. Die Farbskala und Datenklassifizierungsgrenzen, denen Ihre Daten folgen sollen. Obwohl dies zunächst komplex erscheint, fordert der Ausdruck nur einen Datenbereich und die entsprechende Hintergrundfarbe des Blocks an. Sie können Farbskalenwerte erhalten, die zu Ihrer Karte passen von dieser Webseite.
   Zum Beispiel bei der Zeile: yearinput<= 10 && yearinput> 5, wird Datenwerten zwischen 10 und 5 eine Hintergrundfarbe von #c8e7ff zugewiesen. Sie müssen nur den unterstrichenen Inhalt ändern.
   
   
4. Ähnlich ändert die nächste Funktion die Farbe des Textes selbst, mit weißem Text auf dunklen Farben und schwarzem Text auf hellen Farben. Die Abschnitte 3 und 4 sollten zueinander passen. 
   Zum Beispiel: yearinput<= 10 && yearinput> 5, "black"

Je nach Klassifizierung Ihrer Farben können Sie Zeilen in diesen Funktionen nach Bedarf hinzufügen oder entfernen. 

Aber das war's! Das Arcade-Skript erledigt den Rest. Es zählt die Anzahl der Kategorien und entwirft eine Tabelle, die in gleichmäßig verteilte Abschnitte unterteilt ist. Dann werden die Bezeichnungen unten in der Tabelle angewendet. 

Das Ergebnis ist eine datengetriebene Leiste, die von anderen Blöcken im Popup umgeben sein kann, wie Texten, Diagrammen und Tabellen.

Es kann sogar als Teil innerhalb anderer HTML-Inhalte hinzugefügt werden:

 

Der vollständige Ausdruck

 Hier ist der vollständige Ausdruck zum Modifizieren:
(Hinweis: Dieser Ausdruck wurde am 31. DEZ 2021 aktualisiert)

 

 

// Definieren Sie die Jahre der Zeitachse.
// Das Skript wird durch dieses Array iterieren
var yearsArray = ["2010", "2011", "2012", "2013"];

// Definieren Sie die passenden Felder mit den Werten
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];

// Geben Sie die Farben und entsprechenden Wertebereiche in der Farbskala an
// Für HEX-Werte passend zu ArcGIS-Farben besuchen Sie: 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;
}

// Definieren Sie die Farbe des Textes in jeder Zelle basierend auf der Hintergrundfarbe
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;
}

// KEINE BENUTZERÄNDERUNGEN UNTER DIESER ZEILE!

// Erstellen Sie den Stilstring für die obere Zelle
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;
}

// Zellbreite in Prozent basierend darauf, wie viele Zellen wir haben
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("Die Breite jeder Einheit wird sein " + cellWidth);

// Zusammensetzen der oberen und unteren Zellen durch Iteration durch die Jahre
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("Erstelle div für Jahr " + yearsArray[index]);
printf("Der Jahreswert ist " + valuesArray[index]);

// Zusammensetzen der oberen Zelle
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("Füge folgende Zelle zu den oberen Zellen hinzu" + topCell);

// Zusammensetzen der unteren Zelle
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("Füge folgende Zelle zu den unteren Zellen hinzu" + bottomCell);

// Zusammensetzen der oberen und unteren Zellen
 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
};

 

 

Und ein Dankeschön an @DaveNyenhuis für die Inspiration. Er hat ein Dashboard-Listenformat erstellt, das auf sehr ähnliche Weise funktioniert! Und ein Dank Dank an @FredericAubry für die Unterstützung bei der Formatierung und den Best Practices!<\/P>

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