サンフランシスコの象徴的な建築、歴史的なトロッコ列車、賑やかな通りは、ロマンス映画にとって最高の場所です。1時間半の間に、恋に落ち、喧嘩をし、そして仲直りする舞台として、これ以上の場所はないでしょう。

そこで、dataSFとFilmSFのデータを使って、古典的なロマンス映画からミステリー映画まで、サンフランシスコがロマンス映画の舞台となる頻度を調べてみました。
もしあなたが今年のバレンタインデーに観ようと思っているロマンス映画があるのなら、おそらく少なくとも1シーンはサンフランシスコで撮影されていることがわかるはずです。

マップをスタイリングする

このリストには、ほのぼのとしたロマンス映画が多いので、まずはモノクロ調のマップスタイルで、やわらかなピンクを使い、雰囲気を出すようにしました。そして、カラーパレットで緑と青を加え、シンプルな地図にしました。
一方で、この地図スタイルでは情報が多すぎて、アイコンの意味が薄れてしまいます。
そこで、映画のロケ地のアイコンを中心に、観光スポットのアイコンや高速道路、出口の標識などを削除しました。
データを可視化するマップでは、ユーザーがデータの意味を簡単に理解できるように、表示する情報のバランスを取ることが重要です。

アイコンの作成

データを表現する方法には、目盛り付きの円、画像、クラスターなど、さまざまなものがあります。このデータセットは比較的小さく、テーマ性があるため、映画やジャンル自体にマッチした画像を使ってデータを表現することにしました。

• ロマンティック・コメディ：真実の愛が何事にも打ち勝つことを教えてくれます。目を丸くするシーンもありますが、バレンタインデーにはロマコメは欠かせません。このアイコンは、劇場のマスクとハートを組み合わせたものです。

• プリンセス・ダイアリー：ミアとクラリス女王がサットロ・バスをめぐって心から語り合うシーンや、クラリス女王がケーブルカーに突っ込むシーンなど、『プリンセス・ダイアリー』はサンフランシスコの青春ロマンス映画の代表作です。これを象徴するために、王冠の中にハートを入れたアイコンを作りました。これは、ミアが男の子に恋をしているのではなく、自分という存在に自信を持つようになった自分自身への愛を象徴しています。

• ハネムーンは命がけ：リッチモンドにある肉屋から、SOMAのMissionと5thの交差点まで、詩人のヘンリーと肉屋のハリエットの間に愛の道が開かれるのです。このアイコンは、ハリエットが斧で夫を惨殺する連続殺人犯「ミセスX」であることを恐れるヘンリーが、彼女と交際を続け、ついには結婚してしまうことを表しています。

• その他のバレンタイン映画：カチンコは映画のシーンを表す世界共通のアイコンです。サンフランシスコ周辺で映画のシーンが撮影された場所を地図上で表します。

アイコンが完成した後、これらのアイコンをMapboxにアップロードして、Studioで地図に追加しました。シンボルレイヤーを1つ作成し、『プリンセス・ダイアリー』と『ハネムーンは命がけ』の映画名、ロマコメのジャンル、そして残りの映画のフォールバック値に基づいて、アイコン値を一致させるように設定しました。

[
  "case",
  [
    "match",
    ["get", "film_title"],
    [
      "So I Married an Axe Murderer"
    ],
    true,
    false
  ],
  "axe",
  [
    "match",
    ["get", "film_title"],
    ["The Princess Diaries"],
    true,
    false
  ],
  "princess",
  [
    "match",
    ["get", "genre"],
    [
      "Comedy, Drama, Romance",
      "Comedy, Romance",
      "Comedy, Fantasy, Romance",
      "Comedy, Family, Romance",
      "Comedy, Romance, Sci-Fi"
    ],
    true,
    false
  ],
  "comedy",
  "heartmovie"
]

このスタイルをアカウントに追加して高解像度でプリントしたり、データセットを検索してマップをインタラクティブに作成したりできます。
このマップに、あなたのお気に入りのデートスポットや、恋人と出会った場所を追加することもできます。
データのアップロード方法、カスタムアイコンのチュートリアルシリーズ、Studioでのマップデザイン、Mapbox GL JSでのインタラクティブ機能の追加はこちらのチュートリアルをご覧ください。
＊本記事は、Mapbox Inc. Blogの翻訳記事です。

【関連記事】