Leafletで折れ線グラフ

Home » Articles » Leafletで折れ線グラフ, published: 2019-12-30 (updated: 2019-12-30)

Data Visualization の試み「地図ふうグラフ」の続き。Leafletjs で折れ線グラフを描いてみる。
例として総務省統計局による日本の人口増減率。各ポリラインやマーカーをクリックすれば済むので凡例は用意しない。

form から input してインタラクティブに描画するということも、もちろん可能。

Static なグラフや印刷用途などであれば Adobe Illustrator を用いるのが最もキレイで正確なものを作ることができると思う。
WEB の場合は Event が発火しないと面白みがない。ただし Leaflet の場合、X軸は-180~180、Y軸は-90~90という値の限界があるうえ、高緯度ほど大きく歪むという Mercator Projection の問題があるが、このスケール設定しだいで使途はあると思う。
なお上のグラフの基点は、緯度経度ともゼロとしている(もし地図タイルを表示すればアフリカのギニア湾)。
かつてプレゼンふうの使い方もやった。