分享一个构建交互式D3js可视化的Python库

Python 已成为分析和可视化数据的最流行编程语言之一。理解和解释数据的最佳方式是将数据可视化展示出来，并具有交互性。可视化是一个项目成功的关键，因为它可以揭示数据中隐藏的规律，提高理解能力。尽管 Python 中提供了许多可视化软件包，但要创建漂亮、可独立运行、交互式的图表，仍然具有挑战性。

本文介绍一个开源可视化python软件包D3Blocks，无需安装任何其他软件即可创建交互式可视化D3图表。它的共享和发布非常简单，用户只需要一个Web浏览器即可访问图表。本文通过11个实际操作示例简要介绍D3Blocks。

D3Blocks的优势

近年来，Python 社区开发了一系列令人印象深刻的可视化库，如 Matplotlib、Seaborn、Bokeh、Plotly、Folium 等，侧重于数据处理和分析可视化。D3 “是Data-Driven Documents的缩写，是一个用于制作动态、交互式数据可视化的Javascript库，它速度快、美观。D3JS 的优势在于它的高性能、可深度自定义定制，并且符合网络标准。此外，除了浏览器，用户不需要任何其他技术即可轻松绘制可视化图表。

然而，D3js也有缺点。首先，要可视化数据图表，用户需要熟悉 SVG、HTML、CSS 和 Javascript。但即便如此，D3js可视化图表也不容易在不同数据集之间通用。或者换句话说，D3js 脚本通常是一个静态脚本，经过优化后可以显示一个特定数据集的结果。但是，更改数据集需要更改各种参数，如坐标轴的最小值/最大值、列名，很可能还包括图表的方向和定位。

因此，使用D3Blocks，用户可以将数据转换成下游D3js脚本可读取的格式，从而克服这些难题。此外，所有需要的参数、（列）命名、格式化、定位、方向等也都会被传递。通过这种方式，我们可以综合利用python和D3js的优势：Python用于数据挖掘、预处理、分析和建模，D3js用于可视化。

D3Blocks可视化示例

由 D3Blocks 创建的每个可视化图表都完全封装在一个 HTML 文件中，这样就可以在任一个安装Web浏览器的设备上运行，不需要任何其他技术，方便共享和发布。

本文要介绍的11个可视化示例主要分为以下4个类别：

关系可视化：网络图（Network）、桑基图（Sankey）、和弦图（Chord）、热力图（Heatmap）
时间要素：时间序列图（Time Series）、移动气泡图（Moving Bubbles）
图片相关：图像滑块（Image Slider）
其它可视化：散点图（Scatter）、小提琴图（ Violin）、粒子图（Particles）、树形图（Treemap）

使用一条pip命令安装D3Blocks库：

1
pip install d3blocks

关系可视化（Relationships）

当一条记录与另一条或多条记录相关联时，关系就被描述出来了。图论中描述了多种存储此类关系的形式，例如，邻接矩阵（一种对称的正方形矩阵）或入射矩阵（一种顶点-顶点对关系的编码矩阵）。无论矩阵的形式如何，绘制关系图都有助于更好地理解数据。例如，它可以揭示节点在代表阶段的两个或多个组中重复出现的演变模式。在这种情况下，和弦图（Chord）或桑基图（Chord）是表示关系的理想选择。另外，也可能存在从源头到终端的模式，即从某一点开始，以可能的中间步骤结束。在这种情况下，网络图（Network graph）很有用。另一方面，当交互的数量很大，网络等图表变成巨大的毛球时，热力图（heatmap）就会派上用场。在以下四个示例中，我将使用公开的能源数据集，链接是https://observablehq.com/@d3/sankey-component，该数据集包含 68 个关系列：源、目标和权重。

网络图（Network graph）

这一部分我们使用 D3 力导向图绘制网络交互图，然后使用 d3graph 块对数据进行分析。节点根据卢万聚类启发法（Louvain clustering heuristics）着色，边宽根据权重确定。下图即是由代码生成的交互方式探索网络，根据边缘强度（使用顶部的滑块）断开边缘。这样可以保持连接最强的节点完好无损。PS.推荐阅读本公众号关于网络可视化的两篇文章：推荐15个图网络可视化python软件包；分享17个网络（Network）数据可视化工具

1
from d3blocks import D3Blocks# Initialized3 = D3Blocks()# Import exampledf = d3.import_example('energy')# Show the input dataprint(df)#                      source            target   weight# 0      Agricultural 'waste'    Bio-conversion  124.729# 1            Bio-conversion            Liquid    0.597# 2            Bio-conversion            Losses   26.862# 3            Bio-conversion             Solid  280.322# 4            Bio-conversion               Gas   81.144# ..                      ...               ...      ...# 63       Thermal generation  District heating   79.329# 64                    Tidal  Electricity grid    9.452# 65  UK land based bioenergy    Bio-conversion  182.010# 66                     Wave  Electricity grid   19.013# 67                     Wind  Electricity grid  289.366
2
# [68 rows x 3 columns]
3
# Initialize Network chart but do not yet show the chart.d3.d3graph(df, showfig=False)# Color node on clusteringd3.D3graph.set_node_properties(color='cluster')# Make adjustments to the node: Thermal_generationd3.D3graph.node_properties['Thermal_generation']['size']=20d3.D3graph.node_properties['Thermal_generation']['edge_color']='#000fff' # Blue node edged3.D3graph.node_properties['Thermal_generation']['edge_size']=3 # Node-edge Size
4
# Make adjustments to the edge: 'Solar', 'Solar_Thermal'd3.D3graph.edge_properties['Solar', 'Solar_Thermal']['color']='#000fff'd3.D3graph.edge_properties['Solar', 'Solar_Thermal']['weight_scaled']=10
5
# Show the network graphd3.D3graph.show()

桑基图（Sankey）

桑基图是一种用于显示从一组数值到另一组数值的流程的可视化图表。它的矩形框代表节点，箭头的宽度与流速成正比。桑基图最适合用于显示多对多关系，或发现通过一组阶段的多条路径。例如，流量如何从（开始）页面流向网站上的其他页面。

1
from d3blocks import D3Blocks# Initialized3 = D3Blocks()# Import exampledf = d3.import_example('energy')# Link settingsd3.sankey(df, link={"color": "source-target"})

和弦图（Chord）

和弦图表示多个实体或节点之间的流动或连接。每个实体由圆形布局外部的一个片段表示。然后，在每个实体之间画弧。弧的大小与流的重要性成正比。

1
from d3blocks import D3Blocks
2
# Initialized3 = D3Blocks()
3
# Import exampledf = d3.import_example('energy')
4
# Link settingsd3.chord(df, filepath='chord_demo.html')

热力图（Heatmap）

热力图可视化采用d3heatmap库（https://github.com/erdogant/d3heatmap），该库可通过（邻接）矩阵创建热力图。这部分代码中，我们将能源数据集重新格式化为邻接矩阵，然后创建热图。并对热力图进行交互式聚类和分析。

1
from d3blocks import D3Blocks
2
# Initialized3 = D3Blocks()
3
# Import exampledf = d3.import_example('energy')
4
# Create the heatmapd3.heatmap(df, showfig=True, stroke='red', vmax=10, figsize=(700,700))

2. 时间要素可视化

在时间序列数据中，必须有一个 DateTime 元素以及该时间点的状态。时间序列最直接的例子就是股票数据，可以使用时间序列块将其可视化。另外，也可能存在时间上的依赖关系，即一个操作紧随另一个操作（例如，像一个流程）。在这种情况下，Moving Bubbles图形可以帮助我们深入了解运动情况，以及在特定时间点是否会出现集群。

时间序列图

时间序列图可用于有日期时间元素的情况。通过时间序列块，您可以启用/禁用感兴趣的列，并执行刷新和缩放操作，以快速关注感兴趣的区域。这部分代码中的一个示例显示了各种气候变量随时间变化的可视化情况。

1
from d3blocks import D3Blocks
2
# Initialize and set the datetime formatd3 = D3Blocks()
3
# Import climate datasetdf = d3.import_example('climate')
4
# Printdf.head()
5
#            date   meantemp   humidity  wind_speed  meanpressure#     2017-01-01  15.913043  85.869565    2.743478     59.000000#     2017-01-02  18.500000  77.222222    2.894444   1018.277778#     2017-01-03  17.111111  81.888889    4.016667   1018.333333#     2017-01-04  18.700000  70.050000    4.545000   1015.700000#     2017-01-05  18.388889  74.944444    3.300000   1014.333333#           ...        ...        ...         ...           ...#     2017-04-20  34.500000  27.500000    5.562500    998.625000#     2017-04-21  34.250000  39.375000    6.962500    999.875000#     2017-04-22  32.900000  40.900000    8.890000   1001.600000#     2017-04-23  32.875000  27.500000    9.962500   1002.125000#     2017-04-24  32.000000  27.142857   12.157143   1004.142857
6
# [114 rows x 5 columns]
7
# Create the timeseries chart.d3.timeseries(df, datetime='date', dt_format='%Y-%m-%d %H:%M:%S', fontsize=10)

移动气泡图

移动气泡图（Moving Bubbles）可以让我们深入了解实体在时间上是如何相互跟进的。它有助于了解实体的运动情况，以及是否在特定时间点和状态下出现集群。虽然这种可视化方法并不是最有效的，但在处理力导向节点和碰撞节点时却非常出色。静态图表是从一篇名为 “美国人生活中的一天 “的文章中分叉出来的，然后进行了大量修改，以确保图表能在不同类型的数据集、状态数量、方向、格式、着色等情况下通用。我们创建了一个函数来生成一个随机数据集，其中包含各种状态和随机时间点。可视化结果如下图所示。

1
from d3blocks import D3Blocks
2
# Set color schemed3 = D3Blocks()
3
# Generate random data with various statesdf = d3.import_example('random_time', n=10000, c=500, date_start="1-1-2000 00:10:05", date_stop="1-1-2001 23:59:59")
4
#                 datetime sample_id     state# 0    2000-01-01 00:10:10        54  Hospital# 1    2000-01-01 00:10:19        28      Home# 2    2000-01-01 00:10:21        98  Hospital# 3    2000-01-01 00:10:30        12  Hospital# 4    2000-01-01 00:10:32        71    Travel#                  ...       ...       ...# 9995 2000-01-01 23:59:20         2  Hospital# 9996 2000-01-01 23:59:24        17      Home# 9997 2000-01-01 23:59:31        37     Bored# 9998 2000-01-01 23:59:47        48     Sport# 9999 2000-01-01 23:59:47        70    Travel
5
# [10000 rows x 3 columns]
6
# Make the moving bubbles chart.d3.movingbubbles(df,                 datetime='datetime',                 state='state',                 sample_id='sample_id',                 standardize=None,                 speed={"slow": 1000, "medium": 200, "fast": 10},                 cmap='Set1',                 filepath='movingbubbles.html')

3. 图像可视化

当您想比较两张图片时，ImageSlider是个不错的选择，这在表达图像前后状态的情况下最有用。

4. 其它图表可视化

散点图

散点图可能是最著名的绘制（x，y）坐标的图表。这类基本图表非常有用，尤其是具有刷新和缩放功能。散点图可以按样本进行着色，用于检测（组）样本之间的关系。输入是x和y坐标，但还可以设置其他各种参数，如类标签、大小、（边缘）颜色、工具提示信息等。散点图还可以在两组或三组坐标之间进行转换。为了演示，我将使用癌症基因组图谱项目（TCGA）的癌症数据集，该数据集提供了34种不同癌症组织的多种类型的分子数据。对分子数据进行处理后，t-SNE 坐标和主成分就会得出，它们代表了患者与患者之间的相似性。通过散点图，我们可以直观地看到两组坐标（t-SNE 和 PC），并对结果进行深入分析。

1
from d3blocks import D3Blocks
2
# Initialized3 = D3Blocks()
3
# import exampledf = d3.import_example('cancer')
4
#          x          y   age  ... labels #                              ...        #  37.204296  24.162813  58.0  ...    acc #  37.093090  23.423557  44.0  ...    acc #  36.806297  23.444910  23.0  ...    acc #  38.067886  24.411770  30.0  ...    acc #  36.791195  21.715324  29.0  ...    acc #    ...        ...   ...  ...    ...     #   0.839383  -8.870781   NaN  ...   brca #  -5.842904   2.877595   NaN  ...   brca #  -9.392038   1.663352  71.0  ...   brca #  -4.016389   6.260741   NaN  ...   brca #   0.229801  -8.227086   NaN  ...   brca
5
# [4674 rows x 9 columns]
6
# Setup the tooltiptooltip=df['labels'].values + ' <br /> Survival: ' + df['survival_months'].astype(str).str[0:4].values# Set the sizesize = df['survival_months'].fillna(1).values / 10
7
# Scatterd3.scatter(df['x'].values,              # tSNE x-coordinates           df['y'].values,              # tSNE y-coordinates           x1=df['PC1'].values,         # PC1 x-coordinates           y1=df['PC2'].values,         # PC2 y-coordinates           scale=True,                  # Scale           label_radio=['tSNE', 'PCA'], # Label radio button           size=size,                   # Size           color=df['labels'].values,   # Hex-colors or classlabels           stroke='#000000',            # Edge color           opacity=0.4,                 # Opacity           tooltip=tooltip,             # Tooltip           cmap='tab20',                # Colormap           filepath='c://temp//scatter_demo.html')

提琴图

Violin plot（小提琴图）可视化一个或多个组的数值变量分布。在方框图可能隐藏部分信息的情况下，它是方框图的替代品，可帮助我们深入了解大型数据集。通过该块，我们可以为一个或多个组配置图表，并更改图表中的各种元素，如颜色、工具提示和分区大小。为了演示，我们使用癌症数据集作为Violin代码块的输入。

1
from d3blocks import D3Blocks
2
# Initialized3 = D3Blocks()
3
# import exampledf = d3.import_example('cancer')
4
# Tooltiptooltip=df['labels'].values + ' <br /> Survival: ' + df['survival_months'].astype(str).values
5
# Make the plotd3.violin(x=df['labels'].values, # class labels on the x axis          y=df['age'].values,    # Age          tooltip=tooltip,       # Tooltip for hovering          bins=50,               # Bins used for the histogram          size=df['survival_months'].values/10, # Dotsize          x_order=['acc','kich', 'brca','lgg','blca','coad','ov'], # Keep only these classes and plot in this order.          figsize=[None, None],                                    # Figure size is automatically determined.          filepath='violine_demo.html')

粒子图

有了粒子块，我们就可以把任何单词变成一个交互式粒子图。在单词上移动鼠标或轻触一下，粒子就会弹跳，然后返回原处。可以改变图表的各种属性，如弹跳、粒子大小和颜色。创建粒子图的示例见代码，结果如下图所示。

1
from d3blocks import D3Blocks# Initialized3 = D3Blocks()# Make particlesd3.particles('EchoXiangzhou', collision=0.05, spacing=10, figsize=[1500, 200],save_button=True)

树形图

树形图是一种分层显示数据的可视化方法。

本公众号相关内容推荐：