在网站中嵌入简单的交互式数据可视化（Bokeh？其他平台？）

Question

我以前使用Python构建了很多数据可视化工具，依赖于基于桌面的GUI工具进行用户交互（例如Qt），但我现在正试图以网站的形式更广泛地访问。

我担心我的网络开发经验有限，并且想知道是否有人可以为这个项目推荐平台/技术？

我的目标是一个带有下拉菜单的简单网站。当用户从下拉列表中进行选择时，相关数据将从Web服务器上的.txt文件加载并绘制在网站中。有权访问缩放工具和光标以指示鼠标位置的数据是有价值的。

在将来，我想扩展它以添加更复杂的功能（例如用户输入框，根据输入执行绘图代码），但是现在，实现上述简单的情况会很棒。

我发现有关Bokeh在线的积极评论，看起来不错，似乎支持Python代码。然而，虽然这些示例告诉我如何绘制单个案例，但我无法弄清楚如何在动态更新绘制数据的网站中创建下拉菜单。

我的目标是使代码快速，并且可能会被众多Web用户访问。如果有其他比Bokeh更好的选择，我对任何建议或想法都很开放。

非常感谢

Answer 1

有很多工具可供选择。您可以考虑以下内容：

---

需要零编码：

• Tableau
• Infogram
• ChartBlocks
• Datawrapper
• Plotly
• Raw
• Visual.ly

---

对于开发人员：JavaScript库

• D3.js
• Ember Charts
• NVD3
• Google Charts

---

如果您更喜欢Python，请考虑：

• Bokeh
• Seaborn

---

对于R：

• Shiny App

Answer 2

据我所知，这正是散景的用途：在Web浏览器中可视化数据并具有简单的用户交互性。

这是一个小例子，向您展示如何使用bokeh完成此操作：

假设您有两个带有数据的csv文件：

# a.csv :
Time;myData
1;-2,926
2;-2,892
3;-2,89
...

#b.csv : 
Datation;myData
0,000000;18,432;
10,000000;17,785;
20,000000;17,242;
...

并使用一个名为'my_script'的python脚本：

from bokeh.layouts import row
from bokeh.plotting import figure
from bokeh.models.widgets import Dropdown
from bokeh.models import ColumnDataSource
from bokeh.io import curdoc
import pandas as pd

# callback to load file
def load_file(attr, old, new):
    file = dropdown.value
    print(file)
    df = pd.read_csv(file, sep = ';', header = 0, index_col = 0, decimal = ",")
    print(df)
    source.data = dict(x=df.index.values, y=df['myData'].values)


# configuring dropdow widget
choices = [ ("a.csv", "C:/Test/a.csv"), ("b.csv", "C:/Test/b.csv")]
dropdown = Dropdown(label="Add condition", menu=choices)
dropdown.on_change('value', load_file)

# configuring plot
plot = figure(tools="box_zoom, hover, reset")
source = ColumnDataSource(dict(x = [], y=[]))
plot.scatter(x="x", y="y", source=source)

# add widget to bokeh root document
curdoc().add_root(row(dropdown, plot))

现在你必须启动散景服务器，例如使用命令

bokeh server --show my_script.py

- 直接启动网络浏览器到网址http://localhost:5006/stackoverflow

您还可以将其他可能性嵌入到html代码中。但是，要使文件加载使用此方法，您仍需要运行散景服务器。有一些例子可以直接从网络浏览器上传数据，但这是另一个故事

请注意，我选择使用pandas加载数据，但还有其他方法。您还需要调整代码以使用pd.read_csv（）中的参数加载数据