Arcadeでポップアップにタイムラインバーを追加する

Anonymous User

概要

地図は何かがどこで発生したかを示す優れたツールですが、デジタル地図製作者にとっては、いつ何かが発生したのか、その周辺の時間的傾向を強調することはしばしば課題です。ArcGIS OnlineのMap Viewerは動的チャートをサポートしていますが、新しいArcadeコンテンツブロックオプションを使ってこの情報をグラフィカルに提示する別の方法を探していました。

理想的には、私の時間的データを反復処理し、上記のように各年ごとに色分けされた表を生成するArcade式が欲しかったです。また、大幅な修正なしで任意のデータセットに対応できるコードも望んでいました。

記事の最後に完全なArcade式（これにインスピレーションを与えたProduct Engineerへの感謝も含む）がありますが、ここでは何が起きているのか、そして自分の地図でこれを機能させる方法について説明します。

始めに

まずデータから始めます。私の例では、CDCからの< A href="https://arcgis.com/home/item.html?id=47b9e38583f14589a966a8ff889a8e8a" target="_self" rel="nofollow noopener noreferrer">2010年から2019年までのLyme Disease発生率という時間的データを使用しています。スキーマは扱いやすいです：

名前	人口	F2010	F2011	F2012...
Maine	1328361	42.10	60.30	66.60

 

このレイヤーをMap Viewerに追加したら、目次からレイヤーを選択し、「+ コンテンツ追加」オプションを選びます。ここでArcadeの新しいオプションが表示されます。ここからが楽しいところです。

入力内容

スクリプトはユーザーに4つの入力を求めます：

1. 表のラベルとして配列で指定します。
   例：["2010","2011","2012","2013"]
   
   
2. ラベルに対応するデータセットのフィールド。
   例：[$feature.F2010,$feature.F2011,$feature.F2012,$feature.F2013]
   
   
3. 色ランプとデータ分類の区切り。最初は複雑に見えますが、この式はデータ範囲と対応する背景色のみを求めています。マップに合う色ランプ値はこちらのウェブページから取得できます。
   例えば、行：yearinput<= 10 && yearinput> 5, "#c8e7ff", は10と5の間のデータ値に背景色#c8e7ffを割り当てます。下線部分だけ変更すればよいです。
   
   
4. 同様に次の関数はテキスト自体の色を変えます。暗い色には白文字、明るい色には黒文字です。3番目と4番目のセクションは対応しています。
   例：yearinput<= 10 && yearinput> 5, "black"

色分類によっては必要に応じてこれら関数から行を追加・削除できます。

以上です！Arcadeスクリプトが残りを処理します。カテゴリ数をカウントし、均等に分割された表を設計し、表の下部にラベルを適用します。

結果はデータ駆動型バーとなり、テキストやチャート、表など他のブロックとポップアップ内で囲むことができます。

他のHTMLコンテンツ内にもパーツとして追加可能です：

 

完全な式

 以下は修正用の完全な式です：
(注：この式は2021年12月31日に更新されました)

 

 

// タイムラインの年を定義します。
// スクリプトはこの配列を反復処理します
var yearsArray = ["2010", "2011", "2012", "2013"];

// 値を含む対応するフィールドを定義します
var valuesArray = [$feature.F2010, $feature.F2011, $feature.F2012, $feature.F2013];

// 色ランプと対応する値範囲を指定します
// ArcGISカラーに合うHEX値はこちら：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;
}

// 背景色に基づいて各セル内テキスト色を定義します
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;
}

// 以下以降ユーザーによる変更禁止！

// 上部セル用スタイル文字列作成関数
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;
}

// セル幅（％）はセル数による
var cellWidth = `${floor(100 / Count(yearsArray))}%`;
printf("各ユニット幅は " + cellWidth);

// 年ごとに上部・下部セル組み立て
var topCells = "";
var bottomCells = "";
for (var index in yearsArray) {
printf("年「" + yearsArray[index] + "」用div作成中");
printf("年値は「" + valuesArray[index] + "」");

// 上部セル組み立て
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("上部セルへ以下追加：" + topCell);

// 下部セル組み立て
var bottomCell = `<td style=\"text-align:center;\">${yearsArray[index]}</td>`;
printf("下部セルへ以下追加：" + bottomCell);

// 上下セル連結
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",
test: table
};

 

 

@DaveNyenhuis に感謝します。彼は非常によく似た方法で動作するDashboardリスト形式を作成しました！そして感謝 @FredericAubry にフォーマットとベストプラクティスの支援をしていただき感謝します！