著：Armand Emamdjomeh、ワシントンポストのインタラクティブグラフィックレポーター

Armand Emamdjomehは、ワシントンポストのグラフィックレポーターで、インタラクティブな地図とグラフィックを専門としています。地図を作成することの他に、彼はランニング、サイクリング、そしてD.C.でおいしいタコスを作ることを楽しんでいます。ポストに来る前は、ロサンゼルスタイムズのグラフィックおよびデータデスクで働いていました。

選挙がワシントンD.C.で大きな話題であると言うのは、控えめな表現でしょう。選挙は最大の話題です。政府と政治を中心に構築された町にとって、それはスーパーボウル、オスカー、ケンタッキーダービーがすべて1つになったようなものです。

古典的なデザインの選挙マップを作成する方法はたくさんあります。皆さんも見たことがあるでしょう。選挙の夜にはどこにでも表示されています。通常、アラスカとハワイが下に配置された米国本土を示す空白の背景に表示されます。結果が発表されるにつれて、何が起こっているのかをすばやく把握できるように設計されています。

ワシントン・ポストでは、誰もが見慣れた選挙マップを表示したいと考えましたが、同時に高速でインタラクティブな体験も提供したいと考えていました。そこで、Mapboxで選挙マップを構築することにしました。ベクターマッピングサービスを利用することで、地図のディテールをズームに合わせて調整し、カスタムデータレイヤーを組み合わせてさまざまな形式の選挙結果を表示できます。また、新しいFeature State APIを使用することで、フィーチャへのデータ更新をより迅速にプッシュでき、マップ自体の操作も高速化されました。

もともと2016年に選挙マップアプリを構築しました。オンラインメディアの世界では2年は永遠であるため、Mapbox 自体の統合方法など、再構築またはリファクタリングする必要があるものがたくさんありました。この新しいアップデートは、デスクトップでパフォーマンスの高いインタラクティブマップを公開するのに役立っただけでなく、それらのインタラクティブマップをモバイルでも利用できるようにしました。これは、2016年の選挙リグからの大きな改善です。2018年の中間選挙マップをアップグレードおよび構築した方法を見てみましょう。

フィーチャーステートと式を使用したライブデータ更新

フィーチャーステート

選挙マップは、高速、判読性、理解しやすさが重要です。ここで、feature-stateとデータ駆動型スタイリングの式が役立ちます。

最初に対処しなければならなかったのは、マップが選挙データをどのように管理および更新するかでした。以前は、マップフィーチャのプロパティを変更するカスタムビルドのデータ型を使用してこれを行っていましたが、フォークされた大幅に変更されたバージョンのライブラリを使用する必要があり、Mapbox GL JSライブラリの最新のアップデートに対応できませんでした。

幸いなことに、新しいFeature State APIがベータ版としてリリースされたばかりで、v0.46以降、ライブラリの一部となっています。

フィーチャーステートを使用すると、ソース内のフィーチャーのプロパティを動的に設定および更新できます。投票総数がリアルタイムで更新され、選挙結果がある候補者に有利になった場合、視覚化を迅速に更新して最新の結果を表示できます。

選挙結果を取り込む際、私たちのアプリは各報告単位（郡、下院議員選挙区など）のデータを取得し、対応する機能がアプリで更新されていることを確認します。もし d こちらが報告単位のデータです。

feature-stateを使用する利点は、特定のレイヤーではなくレイヤーソースのフィーチャで更新しているため、同じソースを使用するすべてのマップレイヤーに更新が自動的に反映され、追加のオーバーヘッドなしですべてのマップを同期できることです。

feature-stateを使用してデータを更新する際の重要な注意点がいくつかあります。

• お客様のデータは、プロパティではなく、フィーチャ自体にGeoJSON IDが必要です。
• このIDは整数でなければなりません。
• 現在のところ、feature-state を使用して更新できるのは、フィーチャのペイントプロパティのみで、レイアウトプロパティやフィルタリングは更新できません。そのため、feature-state に基づいてレイヤーを非表示にするような操作が困難になる場合があります。この問題を回避するために、非表示にしたいフィーチャの不透明度を 0 に下げました。
• このため、また、feature-stateは動的データを更新するために構築されているため、州や郡の名前、FIPSコードなど、変更されないデータはGeoJSONプロパティに保持するのが最も有用であることがわかりました。これにより、レイアウトやその他のオプションを更新するためにも使用できます。

フィーチャーステートとその使用方法の詳細については、こちらのガイドをご覧ください。

式

データの取り込みは一つの側面です。次に、スタイルを設定する必要があります。Mapbox expressionは、データプロパティやズームレベルなどの変数に応じて動的なスタイルルールを設定するための非常に強力な方法です。強力である一方、式をゼロから構築する場合、構文は複雑になる可能性があり、インデントに細心の注意を払うことが役立ちます。

例えば、レースの3つの考えられる結果を対応する色にマッピングするcase式を作成するには:

実際には、レイヤーの考えられるすべてのレースステータスとカラーマッピングからこの式を作成する関数がありましたが、これで概要はご理解いただけたかと思います。

式は時に奇妙になることがあります。たとえば、投票差を表す円は、一連のレースにおける勝利の差の範囲に対応するプロパティとドメインを取ります。円の半径は、現在のフィーチャ状態の値の面積を最大値で割った円に基づいており、これにより0から1の間の値が得られ、最小半径と最大半径の間の半径が出力されます。

平たく言うと、投票差が大きいほど円が大きくなります。

また、地図のズームに基づいて円のサイズを補間したいと考えました。ズームレベルが低いほど、円の間隔が狭くなり、重なり合う可能性が高くなるため、円を小さくする必要があります。ズームインすると、地図のフィーチャは自然に離れていくため、円を大きくすることができます。

地図投影

地図を作成する際に考慮すべきもう一つの点は、どの投影法を使用するかということです。ワシントン・ポストでは、米国本土をAlbers USA投影法で表示することを標準としています。これは、歪みを最小限に抑える円錐正積投影法で、アラスカとハワイを南西部の州の下に配置しています。

ちょっと待ってください。Mapboxのような地図サービスはメルカトル図法でしか動作しないのではないですか？そうでなければ、どのタイルを表示すればよいかわからないはずです。

さて、「滑る」地図（パンとズームができる地図）の秘密の部分は、表示しようとしているデータが何であるかは関係なく、データに一貫した座標があることだけです。そのため、「ダーティリプロジェクション」と呼ばれる手法を使用して、当社の地図は、アルベルスに投影され、メルカトル投影内に収まるように縮尺された地理データから始まります。

これは奇妙な影響をもたらします。標準的なベースタイルレイヤーと比較すると、米国がヌル島を中心に配置され、大西洋、西アフリカ、中央アフリカに広がっています。

Mapboxは、一連のMakefileを使用して地図データを生成しました。これにより、コマンドラインからデータをダウンロード、変換、処理、およびアップロードできます。これを行うには、次の必要がありました。

• シェープファイルをダウンロードします。このプロセスでは、これは単純なMakeコマンドであり、以下を使用します。 cURL 米国勢調査局からzipファイルをダウンロードするには。
• シェープファイルを抽出し、必要なフィルタリング（例えば、米国の州の抽出）を実行します。
• シェープファイルをGeoJSONに変換し、州名、FIPSコードなどを含むデータと結合します。
• Mapshaperを使用して、州、郡、下院選挙区の3つの主要な形状を1つのTopoJSONファイルに結合します。TopoJSONに変換することで、特に異なるズームレベルで使用するためにレイヤーを簡略化する際に、レイヤー間で一貫したトポロジーを維持することができました。
• データを疑似Albers図法に再投影します。これには、Development Seedのdirty-reprojectors nodeパッケージを使用できます。
• 形状を、高、中、低ディテールの3つの主要な簡略化に分類します。これにより、単一の州にズームインしたときには詳細が表示され、国全体のビューを見ているときには、低ディテール（で軽量な）レイヤーが表示されます。これらはすべて1つのマージされた TopoJSON ファイルにあるため、形状と境界は一貫性を保ちます。レイヤーを個別の GeoJSON ファイルに出力します。
• Tippecanoeを使用して、GeoJSONをMBTilesに変換します。ジオメトリの種類ごとに3つの異なるズームがあるので、それぞれを独自のレイヤーに変換し、どのズームレベルで使用するかを指定します。また、投影座標を使用しているので、コマンドラインで「— projection EPSG:3857」を使用して、Tippecanoeにそれを伝える必要があります。tile-joinを使用して、これらの出力レイヤーをすぐに結合します。

tiles/%-z4-6.mbtiles: geojson/albers/us-lowzoom/%.json
 mkdir -p $(dir $@)
 tippecanoe --projection EPSG:3857 \
  -f \
  --named-layer=$* \
  --read-parallel \
  --no-polygon-splitting \
  --detect-shared-borders \
  --minimum-zoom=4 \
  --maximum-zoom=6 \
  --drop-rate=0 \
  --name=2016-us-election-$* \
  --output $@

このような“Make”ルールは単なる中間ステップであり、実際にそのコマンドを直接呼び出すことはありません。代わりに、次のようなものを呼び出します。 make tiles/election/states.mbtilesこれにより、必要な場合はシェープファイルのダウンロードと処理を行い、最終的なタイルレイヤーを作成するプロセス全体がトリガーされます。

• タイルセットを作成したら、作成したものを確認することが重要です。mbviewを使用して、作成したMBTilesをプレビューできます。これにより、Mapboxにアップロードする前に、ジオメトリとプロパティが期待どおりであることを確認できます。
• これでアップロードする準備ができました！Mapboxインターフェースから直接アップロードする代わりに、Mapboxコマンドラインインターフェースを使用してタイルセットをアップロードしました。これにより、すべてをコマンドラインに保持できますが、さらに重要なことに、Mapbox Studioインターフェースでは許可されていないタイルセットIDを指定できます。タイルセットIDを指定することは、多数のタイルレイヤーを追跡する場合に非常に役立ちます。

以下は、ハウス地区ファイルをタイルセットIDでアップロードするためのアップロードコマンドの例です。 washingtonpost.2018-election-districts-v1:

mapbox upload washingtonpost.2018-election-districts-v1 tiles/election/districts_2018.mbtiles

出力しようとしたデータに応じて、プロセスにはいくつかの追加ステップがありました。たとえば、米国下院選挙区には、区割り変更されたペンシルベニア州を含める必要があったため、古いペンシルベニア州の選挙区を削除し、別のソースから取得した区割り変更された形状に置き換える必要がありました。さらに、下院選挙区のシェイプファイルは米国の海岸線でクリップされていないため、別のステップでそれらをクリップしました。

地図フィーチャの外観と相対的な縮尺の一貫性を保つには、簡略化する前に再投影する必要があります。そうしないと、アラスカとハワイの縮尺がアルバースUSA投影で変化するため、簡略化が不均一に見えます。

このアプローチの注意点の1つは、単一の州を表示する場合、Albers USA投影法では非常に奇妙に見える可能性があることです。下の図のバージニア州のマップのように斜めに見えます。

たとえば、海岸に近い州は不必要に回転して表示されます。そのため、個々の州を標準のWebメルカトル図法で表示したかったため、各レイヤーにAlbersとメルカトルの2つのバージョンを用意し、必要に応じてソースを変更しました。

これらの投影のトリックを使用している場合、何もかもが想定した場所にはないことに注意してください。つまり、たとえば、特定の州や地区にズームする場合は、投影された形状の範囲を把握する必要があります。

選挙カルogram

従来の選挙の視覚化に浸透しつつある地図の別のスタイルがあります。カートグラムは、地理よりも情報を優先するために、人口やGDPなどの変数によって歪められた地図です。

本題に入る前に、なぜカルトグラムが選挙報道で頻繁に使用されるのか疑問に思うかもしれません。見た目は奇妙で、地理的に正確ではなく、人々は混乱します。しかし、地理的な正確さの欠如こそが、そもそも非常に役立つ理由です。人口密度が全国で同じではないという事実に対応できる唯一の方法の1つです。人口密度により、都市部は地理的な地図では大幅に過小評価される可能性があります。

例えば、ニュージャージー州の人口は、アイダホ州、ワイオミング州、ユタ州、両ダコタ州、ネブラスカ州の合計とほぼ同じです。

したがって、米国下院の結果の地理的な地図は、民主党の代表者が非常に少ないように見えますが、実際には現在、彼らが議席の過半数を占めています。ほとんどの地区が全国レベルで見るには小さすぎるだけです。各議席に同じサイズのユニットを持つカルトグラムを使用することで、比例結果のより正確なビューを提供することができます。

一見すると、カルトグラムの作成は非常に厄介な問題のように思えました。Adobe Illustratorでデザインされた地図をMapboxのslippy mapにどのように取り込むのでしょうか？

これは実際には見た目よりも簡単です。地図は、どの座標を使用するかを気にしません。地図が気にするのは、これらの座標が互いに関係して一貫性があることです。SVGパスは本質的に座標の配列であるため、SVGパスはGeoJSONフィーチャに簡単に変換できます。

SVGをGeoJSONに変換する際に注意すべき重要な要素の1つは、各フィーチャを識別する方法があることです。カートグラム内のすべての地区を大まかに特定して、各州の政治的構成をより適切に表現できるようにするために、各パスにIDがあることを確認しました。そのため、Illustratorファイルでは、各パスにレイヤーID（例：CA-28）を追加し、それをGeoJSONフィーチャプロパティに保持しました。画像では、CA-28は南カリフォルニアの地理的な位置の近くにはありません。地区が非常に多いだけです！

当社では、カートグラムSVGをアプリ専用に使用するために変換するカスタムnode.jsスクリプトを作成しましたが、Mapboxには独自のsvg-to-geojsonスクリプトもあります。

カスタムラベルと再投影

州と都市のラベル付けもまた、特にAlbers正積円錐図法を使用していたため、トリッキーな作業でした。全国レベルでは、小さな州の州ラベルは衝突するか、まったく表示されません。

どのようにして実現しましたか？独自のカスタムポインタを描きました。

通常の状態ラベル（吹き出しのないもの）は、各状態の重心を取得して作成されました。これらをポイントレイヤーに集約し、各ポイントを州のFIPSコードとAP略語、およびズームレベルを下げるために使用した郵便番号に関連付けました。次に、これらをMapboxでシンボルレイヤーとして表示しました。

吹き出しはもう少し複雑でした。これらは、QGISで独自のカスタムシェイプを描画することで作成できます。これらの線は独自のジオメトリを持っているため、GeoJSONに変換することもでき、他の地図フィーチャと同じように表示されます。Albers図法で投影されたジオメトリ上に吹き出しを描画するようにしてください。そうしないと、間違った座標を指してしまうことになります。

選挙マップの詳細については、feature-state、expressions、マップデザインを探求する3部構成のシリーズをご覧ください。ご質問がある場合は、Lo（lo@mapbox.com）にメールするか、Twitter（Lo Bénichou）で探してください。