よちよちpython

独習 python/Qpython/Pydroid3/termux/Linux

【folium】地図のマーカーpopupにAltairで作成したグラフを載せる

今回は、foliumで作成した地図のマーカーpopupグラフを載せる方法メモ。
前回【folium】マーカーのPopupにWebページのリンクの貼り付け、TwitterやYouTubeなどを埋め込む - よちよちpythonの続きです。

グラフ描画にaltair(アルタイル)というライブラリを使います。

【実行環境】

  • Windows10 WSL:Ubuntu
  • Anaconda
  • Python 3.8
  • Jupyter Notebook 6.4.0
  • Pandas
  • altair-4.1.0 (このあとインストールします)


  • Android
  • Termux
  • Python3.9
  • Jupyter Notebook
  • Pandas
  • altair-4.1.0(このあとインストールします)



  • 目次



Altair、Vega、VegaLite について

foliumpopupにグラフを載せる方法はサンプルがgithubなどに公開されていますが、そこではvincentVega という聞きなれないライブラリが使ってあります。vincentの公式ドキュメントは2016年で最終更新が止まっており「換わりにaltair(アルタイル)を使ってくれ。」と。

altairVegaも日本語でのWebページはあまり見つかりません。
こちらのサイトを参考。



Vega、VegaLite について

公式 A Visualization Grammar | Vega

自動翻訳を貼り付ける

Vegaは視覚化文法であり、インタラクティブな視覚化デザインを作成、保存、共有するための宣言型言語です。Vegaを使用すると、ビジュアライゼーションの視覚的な外観とインタラクティブな動作をJSON形式で記述し、CanvasまたはSVGを使用してWebベースのビューを生成できます。

ベガは、視覚デザインの多種多様な基本的なビルディングブロックを提供する:データのロードおよび変換スケール地図投影凡例、およびグラフィックマークような矩形、線、プロット記号としてなど。インタラクション手法は、入力イベントストリームに応答して視覚化を動的に変更するリアクティブ信号を使用して指定できます。

Vega仕様は、JSON形式インタラクティブな視覚化を定義します。仕様はVegaのJavaScriptランタイムによって解析され、静止画像またはインタラクティブなWebベースのビューの両方が生成されます。Vegaは、視覚化の計算生成に便利な表現を提供し、新しいAPIと視覚分析ツールの基盤として機能します。

Vegaの使用を開始するには、チュートリアルサンプルギャラリー、および使用ガイドを参照するか、プロジェクトの目標についてお読みください。

一般的な統計グラフィックスをすばやく作成するには、Vegaの上に構築された高級言語であるVega-Liteをチェックしてください。それはJavaScriptではありませんか?見てみましょうアルタイルのPython APIベガ-Liteのを。

ヘルプが必要ですか、または例を共有したいですか?VegaディスカッションフォーラムまたはVegaSlack組織参加してください!



読んでもよくわかりませんけど、Vegaは「インタラクティブな視覚化デザインを作成、保存、共有するための宣言型言語」だと。「JavaScriptランタイムによって高速に動く」らしい。
で、Vega-LiteっていうのがVega高級言語と。使い易くした感じか。

この二つはJupyterNotebookJupyterLab(の最近のヴァージョンで)は最初から使えるようになっているようで、特にインストールしなくても動く(動いた。)


Altair について

公式 Altair: Declarative Visualization in Python — Altair 4.1.0 documentation

python用ライブラリ。VegaVega-LitePythonで動かせるようにしたもの。
Pandasとセットで使うようです。


自動翻訳を貼り付ける

Altairは、VegaとVega-Liteに基づくPythonの宣言型統計視覚化ライブラリであり、ソースはGitHubで入手できます。

Altairを使用すると、データとその意味を理解するためにより多くの時間を費やすことができます。AltairのAPIはシンプルで使いやすく、一貫性があり、強力なVega-Lite視覚化文法の上に構築されています。このエレガントなシンプルさは、最小限のコードで美しく効果的な視覚化を生み出します。



とりあえず、今回はaltairを使うのでpip install altairなどでインストールします。


の2パターンでJupyter Notebookからインストールした結果が↓。

AndroidのTermuxでAltairをインストール

# Androidのtermuxでインストール実行
%pip install altair
Collecting altair
  Using cached altair-4.1.0-py3-none-any.whl (727 kB)
Requirement already satisfied: entrypoints in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from altair) (0.3)
Requirement already satisfied: jinja2 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from altair) (3.0.1)
Requirement already satisfied: numpy in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from altair) (1.21.1)
Requirement already satisfied: jsonschema in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from altair) (3.2.0)
Collecting toolz
  Using cached toolz-0.11.1-py3-none-any.whl (55 kB)
Requirement already satisfied: pandas>=0.18 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from altair) (1.2.5)
Requirement already satisfied: python-dateutil>=2.7.3 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from pandas>=0.18->altair) (2.8.2)
Requirement already satisfied: pytz>=2017.3 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from pandas>=0.18->altair) (2021.1)
Requirement already satisfied: six>=1.5 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from python-dateutil>=2.7.3->pandas>=0.18->altair) (1.16.0)
Requirement already satisfied: MarkupSafe>=2.0 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from jinja2->altair) (2.0.1)
Requirement already satisfied: pyrsistent>=0.14.0 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from jsonschema->altair) (0.18.0)
Requirement already satisfied: attrs>=17.4.0 in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from jsonschema->altair) (21.2.0)
Requirement already satisfied: setuptools in /data/data/com.termux/files/usr/lib/python3.9/site-packages (from jsonschema->altair) (57.4.0)
Installing collected packages: toolz, altair
Successfully installed altair-4.1.0 toolz-0.11.1
Note: you may need to restart the kernel to use updated packages.



Windows10 WSL Ubuntu Anaconda でAltairをインストール

# windows10 WSL Ubuntu Anaconda からインストール実行
%conda install -c conda-forge altair
Collecting package metadata (current_repodata.json): done
Solving environment: done

## Package Plan ##

  environment location: /home/user/anaconda3

  added / updated specs:
    - altair


The following packages will be downloaded:

    package                    |            build
    ---------------------------|-----------------
    altair-4.1.0               |             py_1         614 KB  conda-forge
    ------------------------------------------------------------
                                           Total:         614 KB

The following NEW packages will be INSTALLED:

  altair             conda-forge/noarch::altair-4.1.0-py_1



Downloading and Extracting Packages
altair-4.1.0         | 614 KB    | ##################################### | 100% 
Preparing transaction: done
Verifying transaction: done
Executing transaction: done

Note: you may need to restart the kernel to use updated packages.



altairで折れ線グラフを描く

適当に時系列データをつくり、折れ線グラフを描いてみます。

import altair as alt
import numpy as np
import pandas as pd

# 100行の適当なデータ
df = pd.DataFrame({
  '日付': pd.date_range(start="2021/1/1",freq="d", periods=100),
  '値': np.random.randint(1,101,100)
})

# 折れ線グラフをaltairで作成
chart = alt.Chart(df).mark_line().encode(
    x='日付',
    y='値'
)

# 表示
print('タイプ:', type(chart))

chart
タイプ: <class 'altair.vegalite.v4.api.Chart'>

グラフの型はaltair.vegalite.v4.api.Chartとなっています。vegalite

グラフの右上に「・・・」のボタンがありますね。グラフ画像を保存したりできる。

altairのグラフの種類はかなり豊富なようですが、ここでは触れません。

popupにグラフを載せる

今しがた作成したグラフを、folium地図のマーカーpopupに貼り付けます。

import json
import folium
from folium import plugins

# ベースの地図を作成
center = [33,133] # 中心座標
m = folium.Map(center, zoom_start=8)

# ポップアップを生成
popup = folium.Popup(max_width="100%")

# グラフのデータをjsonに加工
data = json.loads(chart.to_json())
# グラフをポップアップに追加
folium.features.VegaLite(data, width=300, height=250).add_to(popup)


# 地図をフルスクリーンにするボタンを地図に追加
plugins.Fullscreen(
    position="topright",
    title="拡大する",      
    title_cancel="元に戻す",
    force_separate_button=True,
).add_to(m)

# 地図にマーカー(とポップアップ)を追加
folium.Marker(center, popup=popup).add_to(m)

# 地図を表示
m
Make this Notebook Trusted to load map: File -> Trust Notebook

マーカーをクリックするとグラフが表示されます。
層を分けてやれば何種類ものグラフが表示出来そうです。



地図のhtmlを見たり、DjangoやflaskなどWebフレームワークで使うときは

m._repr_html_()  #(地図オブジェクト._repr_html_())

で。
<div style="width:100%;"><div style (中略 長い) </iframe></div></div>'みたいなhtmlコードが表示される。



参考リンク



以前の投稿ですが、popupに画像やWebページのリンク、TwitterのツイートやYouTubeの埋め込みなど、htmlコードを貼り付ける方法。



おわりに

グラフをあえて地図のpopupに載せる需要が果たしてあるかは・・・

以上です。