D3.js で国の本当の大きさを比較する地図（メルカトル図法の歪みを可視化）

はじめに

学校の世界地図はたいていメルカトル図法です。メルカトル図法は角度を正しく保つ
（航路の計算に便利）一方で、高緯度の地域を実際より大きく表示します。
グリーンランドがアフリカと同じくらいに見えるのはこの歪みによるものです。

本記事では D3.js で国の大きさを正しく比較できる地図を実装し、
メルカトル図法の歪みを視覚的に確認する方法を紹介します。

地図データの取得

国境の GeoJSON データは world-atlas などから取得できます。
TopoJSON のまま読み込み、D3 で GeoJSON に変換するのが一般的です。

import * as d3 from "d3";
import { feature } from "topojson-client";

const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json");
const countries = feature(world, world.objects.countries).features;

正積図法（等積図法）で描画する

「大きさを正しく比較する」には、面積を保つ正積図法を使います。
D3 には geoEqualEarth（等積）と geoMercator（メルカトル）が標準で用意されています。

const projection = d3.geoEqualEarth()
  .scale(160)
  .translate([width / 2, height / 2]);

const path = d3.geoPath(projection);

svg.selectAll("path")
  .data(countries)
  .join("path")
  .attr("d", path)
  .attr("fill", "#dfe6ee")
  .attr("stroke", "#fff");

国を選択して比較する

選択した国を同じ縮尺で並べて表示すれば、大きさの違いが一目で分かります。

function compare(country) {
  const bounds = path.bounds(country);       // 国のバウンディングボックス
  const size = bounds[1][0] - bounds[0][0];
  return size;                                // 投影後の幅
}

メルカトル図法と等積図法を切り替えて同じ国を表示すると、
「北の国ほど実際より大きく見える」メルカトルの特性を実感できます。

おわりに

D3.js の投影法 API を使えば、地図の歪みを数行で切り替えられます。
実際に国をドラッグして大きさを比較できるインタラクティブな地図は、以下のサイトで体験できます。

True Size of Countries