好久没有写可视化方面的总结了，只因这半年在忙别的，顺便加固一下JS水平。
如题：可以使用Bokeh提供的bokeh.embed模块将Bokeh绘图嵌入到网页中，从而实现动态可视化。
具体步骤如下：
在Python中使用Bokeh绘制出需要展示的图形
from bokeh.plotting import figure
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource
# 定义数据
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]
# 创建一个绘图空间
p = figure(title="Bokeh Example")
# 添加一个散点图
source = ColumnDataSource(data=dict(x=x, y=y))
p.circle(x='x', y='y', source=source)
# 输出到静态HTML文件
output_file("example.html")
# 展示图形
show(p)将Bokeh绘图嵌入到网页中
from bokeh.embed import components
# 获取绘图的JavaScript代码和HTML标签
script, div = components(p)在HTML中插入标签和代码
html = """
<!DOCTYPE html>
<html>
<head>
<title>Bokeh Example</title>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js"></script>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.css" type="text/css" />
{{ script }}
</head>
<body>
{{ div }}
</body>
</html>
"""
# 将代码和标签插入到HTML中
html = html_template.render(script=script, div=div)之前，不能很好加载的原因，一是版本线上线下不对应，二是相应的JS和CSS么有预先加载。最佳的解决方案就是在Bokeh中直接保存为html，然后在线上加入相应的JS和CSS。
将HTML保存到文件中或者使用web框架返回给客户端
with open("example.html", "w") as f:
f.write(html)
这一步也可以通过Flask进行实时动态显示。
该代码将Bokeh绘图嵌入到了一个HTML文件中，可以通过浏览器打开该文件来查看动态可视化图形。同时，也可以将该HTML文件作为模板，在web框架中使用模板引擎动态生成HTML返回给客户端。
civilpy：Python数据分析及可视化实例目录