Python数据工程师实战：构建交互式数据仪表盘

数据仪表盘是一个重要的数据可视化工具，可以将数据可视化展示给用户，使其更容易理解数据的含义和趋势，更好地做出决策。在这篇文章里，我们将使用Python编写一个交互式数据仪表盘。

一、选择可视化工具

Python中有很多强大的可视化工具，例如matplotlib、seaborn和Bokeh等。在这里我们选择使用Bokeh来构建我们的数据仪表盘，因为它具有以下优点：

1. Bokeh支持交互式可视化展示，用户可以鼠标选取数据点、缩放、滚轮和移动等交互操作。

2. Bokeh的可视化呈现非常漂亮，而且可以在Web浏览器中呈现。

3. Bokeh的代码量非常少，易于上手和维护。

二、数据采集和处理

在Bokeh中，数据可以来自不同的源，例如 MySQL 数据库，CSV 文件和 Pandas 数据框架。在这篇文章中，我们将使用 Pandas 数据框架的数据集。数据集是一个 CSV 文件，其中包含有关三家公司的股票价格数据。在这里，我们将使用 Pandas 数据框架读取该数据集，并对其进行必要的处理。

import pandas as pd

df = pd.read_csv('stocks.csv')

# 添加收盘价与开盘价之间的差
df['Diff'] = df['Close'] - df['Open']

# 添加新的列，表示涨跌情况
df['Up_or_Down'] = ['Up' if diff>0 else 'Down' for diff in df['Diff']]

三、创建仪表盘

现在我们已经有了数据，并且对其进行了处理，下一步是创建交互式数据仪表盘。在本篇文章中，我们使用Bokeh创建一个网页，用于呈现数据仪表盘。

步骤如下：

1. 导入必要的包和函数。

from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource
from bokeh.layouts import gridplot

2. 创建数据源。数据源是一个包含在数据集中的数据子集，并用于在仪表盘中呈现数据。

df_source = ColumnDataSource(df)

3. 创建需要在仪表盘中显示的图表。在这里，我们创建一个图表来显示每家公司的开盘价和收盘价。

p1 = figure(title='Stock Prices', x_axis_label='Date', y_axis_label='Price')

p1.segment(x0='Date', y0='Low', x1='Date', y1='High', color='Black', source=df_source)

p1.vbar(x='Date', top='Open', bottom='Close', width=0.5, fill_color='green', line_color='black', source=df_source)

4. 创建一个用于交互式操作的 JavaScript 代码块。在这里，我们将使用 Bokeh 的 JavaScript 库创建一个 JavaScript 回调函数，以响应用户与图表的交互操作。

callback = CustomJS(args=dict(source=df_source), code="""
    var data = source.data;
    var diff = data['Diff'];
    var up_or_down = data['Up_or_Down'];

    for (var i=0; i < diff.length; i++) {
        if (diff[i] > 0) {
            up_or_down[i] = 'Up';
        } else {
            up_or_down[i] = 'Down';
        }
    }

    source.change.emit();
""")

5. 创建一个呈现仪表盘的网页，并将所有图表放入网页中。

output_file('stocks.html')

p = gridplot([[p1]], toolbar_location='left', plot_width=900)

show(p)

最终的代码示例如下：

# 导入必要的包和函数
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.layouts import gridplot

# 读取数据集，添加新列
df = pd.read_csv('stocks.csv')
df['Diff'] = df['Close'] - df['Open']
df['Up_or_Down'] = ['Up' if diff >0 else 'Down' for diff in df['Diff']]

# 创建数据源
df_source = ColumnDataSource(df)

# 创建图表
p1 = figure(title='Stock Prices', x_axis_label='Date', y_axis_label='Price')
p1.segment(x0='Date', y0='Low', x1='Date', y1='High', color='Black', source=df_source)
p1.vbar(x='Date', top='Open', bottom='Close', width=0.5, fill_color='green', line_color='black', source=df_source)

# 创建响应用户交互事件的 JavaScript 代码块
callback = CustomJS(args=dict(source=df_source), code="""
    var data = source.data;
    var diff = data['Diff'];
    var up_or_down = data['Up_or_Down'];

    for (var i=0; i < diff.length; i++) {
        if (diff[i] > 0) {
            up_or_down[i] = 'Up';
        } else {
            up_or_down[i] = 'Down';
        }
    }

    source.change.emit();
""")

# 创建网页
output_file('stocks.html')
p = gridplot([[p1]], toolbar_location='left', plot_width=900)

# 显示仪表盘
show(p)

这个仪表盘具有以下功能：

1. 显示每家公司的开盘价和收盘价。

2. 使用绿色表示上涨，使用红色表示下跌。

3. 当用户按下“上涨”或“下跌”按钮时，绘图颜色会从绿色或者红色改为蓝色。

我们使用简单的代码创建了一个功能强大且易于理解的交互式数据仪表盘。