在 plotly 子图中使用 Folium 地图创建仪表板

Question

我的规划区域涵盖了多栋建筑。我想使用创建 folium 地图对象的 gdf.explore() 方法在子图中绘制计划和建筑物，然后使用 plotly 绘制建筑年数直方图。然后将这两个图并排放置。

我找不到在 plotly 子图中添加 folium 地图对象的方法。

这是我需要的代码：

m = gdf.explore()
p = px.histogram()


# CODE THAT PUTS m AND p IN ONE GRAPH!

提前致谢！

Answer 1

您的问题不包含示例几何或数据框。合成了一些
根据评论 plotly 和 folium 是非常不同的库，没有集成
显然 HTML 您可以使用 IFrame 进行集成。已采取使用 data URI 将 plotly 和 folium 组件编码为单个 HTML 文档

import shapely.geometry
import numpy as np
import geopandas as gpd
import pandas as pd
import plotly.express as px
from IPython.display import IFrame
from datauri import DataURI
from pathlib import Path

# create a folium map
m = gpd.GeoDataFrame(
    geometry=[
        shapely.geometry.MultiPoint(
            np.random.uniform(b, b + 1, size=(5, 2))
        ).convex_hull
        for b in range(4)
    ],
    data={"building": [f"building {b}" for b in range(4)]},
).explore(column="building")

# create a histogram
fig = px.histogram(
    pd.DataFrame(
        np.random.randint(1980, 2022, size=(100, 4)),
        columns=[f"b {b}" for b in range(4)],
    )
    .stack()
    .reset_index()
    .rename(columns={0: "year", "level_1": "b"}),
    x="year",
    color="b",
).update_layout(margin={"l": 0, "r": 0, "t": 0, "b": 0})

html = f"""<html>
<body>
    <div style="display:inline-block;width:1200">
        <iframe src='{DataURI.make("text/html", charset="us-ascii", base64=True, data=m._parent.render())}' 
            width="49%", align="left"></iframe>
        <iframe src='{DataURI.make("text/html", charset="us-ascii", base64=True, data=fig.to_html(include_plotlyjs="cdn"))}'
            width="49%", align="right"></iframe>
    </div>
</body>
</html>"""

# as a HTML file
with open(Path.cwd().joinpath("sample.html"), "w") as f:
    f.write(html)

# as jupyter output
IFrame(
    DataURI.make("text/html", charset="utf-8", base64=True, data=html),
    height=900,
    width=1200,
)

在 plotly 子图中使用 Folium 地图创建仪表板

use Folium map in plotly subplots to create dashboard

python

plotly

geopandas

subplot

folium