米国選挙のマッピング：州を紹介する2020年版ガイド

これは、米国選挙マップとデータ視覚化に関するガイドシリーズのパート2です。マップデータをAlbers USAに再投影する方法については、必ずパート1を確認してください。

以前に、Albers USAマップを追加または構築してMapboxにアップロードする方法を共有しました。選挙シーズンなので、さらに一歩進んで、この投影をライブで使用し、データの更新に合わせてリアルタイムでスタイルを更新する方法を学びましょう。

これを行う1つの方法は、Feature State APIとpromote-idメソッドを使用することです。これらはMapbox GL JS v1.7.0でリリースされました。feature-stateの使用に関する以前の投稿で、feature-stateが機能するために一意である必要があるトップレベルのfeature id属性に依存していることを説明しました。さらに、IDは整数または整数としてキャストされた文字列（例：“03989”または3989）である必要もありました。これにより、データの準備が非常に困難になりました。

promote-idを使用すると、一意であれば、フィーチャから任意のプロパティ（例：“カリフォルニア”、“03989”、“US06”）をトップレベルのフィーチャIDとして昇格させることができます。Mapbox GL JSは、ルックアップテーブルを作成し、プロパティを整数に一致させることで、ユーザーの負担を軽減します。

この変更により、FIPSコードやGEOIDのような0で始まる文字列も受け入れるようになったため、ライブ選挙結果のマッピングが大幅に容易になります。feature-stateをより深く理解するには、以前の投稿を読んで、技術仕様と基本的な使用法を理解することを強くお勧めします。投稿全体を読むのが面倒な場合は、ここに要約があります。

• Feature State APIを使用すると、ランタイム時にフィーチャの「状態」を更新できるため、マップレンダリングエンジンが基になるジオメトリとデータを再解析する必要なく、単一のフィーチャを制御できるため、パフォーマンスが向上します。
• フィーチャーステートとは、マップ上のフィーチャーに動的に割り当てることができるユーザー定義の属性のセットです。これらの属性は、実行時に外部データからロードできます
• フィーチャーステートは、一意である必要のある上位レベルのIDに依存します
• このAPIを使用すると、インタラクティビティを処理し、よりパフォーマンスの高い方法でデータを結合できます。
• フィーチャーステートは、ペイントプロパティでのみ機能します
• IDが一意でない場合、変更は複数のフィーチャに影響します
• フィーチャーステートは、promote-idメソッドを使用して、文字列をIDとして使用できるようになりました

promote-idを使用

以下の例では、2012年の選挙資金データを使用し、郡ごとの一人当たりの寄付額を金額で地図上に表示します。データは厳密にはリアルタイムで更新されていませんが、ここで紹介する手法は変わりません。

データはこちらからダウンロードできますが、データは古く、レポートには適さないことに注意してください。

以下に示すように、FIPSコードは文字列であり、一部は0で始まります。以前は、feature-stateは、これらを整数に変換する追加の手順なしに、この形式のデータを処理できませんでした。

まず、ランタイム時にデータをロードします。この例では、d3-dsvライブラリを使用して、次のようにcsvをロードしました。

joinを機能させるには、initFeatureState()関数内で3つの重要なステップを実行する必要があります。

• Albers USA投影のベクターソースを追加し、`promoteId`パラメーターを、データを結合するジオメトリの一意の識別子（この場合は郡）に設定する必要があります。
• フィーチャーステートは、setFeatureState()を使用して設定する必要があります。csvファイルからの一意の識別子は、ジオメトリ内の識別子と一致し、塗りつぶしレイヤーのデータドリブンスタイルを強化するために使用される値と一致する必要があります
• 塗りつぶしレイヤーは、フィーチャの状態を使用してフィーチャの色を決定する式を使用する必要があります。

ベクターソースの追加

addSource()関数を使用して、Albers USAタイルセットを追加し、ジオメトリを識別するための一意のプロパティを指定します。

‍

この場合、特定の郡のFIPSコードを含むcounty_fipsプロパティは、同等の列であるstate_county_codeを使用して2012年のキャンペーンデータをジオメトリに結合するために指定されています。county_fipsはstate_county_codeと同等であることを覚えておいてください。列/プロパティの名前が異なるだけです。

feature-stateの設定

このステップでは、次のようにフィーチャーの状態を設定および構成します。

‍

ここでは、主に3つのタスクを実行しています。

• ソース: ‘albersusa’: フィーチャーステートを設定するジオメトリ（albersusa）のソース（およびソースレイヤー）を指定しています
• id: csvファイル（state_county_code）の列に基づいて各フィーチャを識別するための`id`を設定しています。
• per_capita_contributions: これは実際のフィーチャの状態（per_capita_contributions）を定義しています。状態の名前は、何にも依存しないことに注意してください。「contributions」または「color_fill」と呼ぶこともできます。レイヤーを開始するときに同じ変数名を使用する限り。
• per_capita_contributions: row.per_capita_contributions: csvファイルのper_capita_contributions列のドル金額である`per_capita_contributions`状態に値を割り当てています。

コンソールでフィーチャをログに記録すると、次のようになります。

ご覧のとおり、フィーチャーIDは郡のFIPSと同じであり、per_capita_contributionsの状態には値が適切に割り当てられています。

次に、マップの塗りつぶしの色をスタイル設定するための式を設定する必要があります。

データドリブンなスタイリング

マップをスタイル設定するために、case式を使用しています。平易な英語で言うと、これは私たちが達成したいことです。

「特定の郡において、'per_capita_contributions'というフィーチャーの状態に値がない場合は、グレーを使用し、それ以外の場合は、貢献の値に基づいて定義されたカラーランプを使用します。」

コードは以下の通りです。

‍

さらに、‘filter’：[‘==’、[‘get’、‘type’]、‘county’]を設定して、州を除外し、郡のみを表示します。完全なコードとライブデモはこちら。

このガイドに従って、再投影されたAlbers USAマップスタイルに独自のデータを追加するか、ライブレポートに使用してください。#builtwithmapboxを使用して、当社で構築しているものをTwitterで共有してください。ご質問がある場合は、lo@mapbox.comまたはTwitter（Lo Bénichou）までご連絡ください。