今回は、foliumで作成した地図のマーカーpopupにグラフを載せる方法メモ。
前回【folium】マーカーのPopupにWebページのリンクの貼り付け、TwitterやYouTubeなどを埋め込む - よちよちpythonの続きです。
グラフ描画にaltair（アルタイル）というライブラリを使います。
【実行環境】
- Android
- Termux
- Python3.9
- Jupyter Notebook
- Pandas
- altair-4.1.0（このあとインストールします）
- 目次
Altair、Vega、VegaLite について
foliumのpopupにグラフを載せる方法はサンプルがgithubなどに公開されていますが、そこではvincentとVegaという聞きなれないライブラリが使ってあります。vincentの公式ドキュメントは2016年で最終更新が止まっており「換わりにaltair（アルタイル）を使ってくれ。」と。
altairもVegaも日本語での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の高級言語と。使い易くした感じか。
この二つはJupyterNotebookやJupyterLab（の最近のヴァージョンで）は最初から使えるようになっているようで、特にインストールしなくても動く（動いた。）
Altair について
公式 Altair: Declarative Visualization in Python — Altair 4.1.0 documentation
python用ライブラリ。VegaやVega-LiteをPythonで動かせるようにしたもの。
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
マーカーをクリックするとグラフが表示されます。
層を分けてやれば何種類ものグラフが表示出来そうです。
地図のhtmlを見たり、DjangoやflaskなどWebフレームワークで使うときは
m._repr_html_() #（地図オブジェクト._repr_html_()）で。<div style="width:100%;"><div style (中略 長い) </iframe></div></div>'みたいなhtmlコードが表示される。
参考リンク
Altair公式 Altair: Declarative Visualization in Python — Altair 4.1.0 documentation
こちらにはfoliumとaltair(とPlotly、GeoPandas等)を利用した地図サンプルが載っています
Altair、Plotly、およびFoliumを使用したPythonのインタラクティブコロプレスマップ
以前の投稿ですが、popupに画像やWebページのリンク、TwitterのツイートやYouTubeの埋め込みなど、htmlコードを貼り付ける方法。
おわりに
グラフをあえて地図のpopupに載せる需要が果たしてあるかは・・・
以上です。