强推这个绝美的交互式图表 Python 库 -- D3Blocks

用 Python 创建交互式、独立、可共享且视觉美观的图表确实是一项挑战。解决方案是 D3blocks！它基于 D3 JavaScript 的图形处理引擎构建，但可使用 Python 进行配置，并且只需一行代码即可完成！

Python 是用于分析和可视化数据的最流行的编程语言之一。可视化是项目成功的关键，因为它可以揭示隐藏的见解并加深你的理解。快速理解和解释数据的最佳方法是使其具有交互性。然而，这同时也是一个真正的挑战，因为尽管 Python 中有许多可视化包，但创建美观、独立、可交互、可共享且可在外部运行的图表仍然很困难。一种解决方案是使用 JavaScript 创建 D3 图表，但这种方法也带来了一系列挑战。D3Blocks库应运而生。

有了 D3Blocks，Python 终于与 D3.js 实现了融合，从而轻松构建令人惊叹的可视化效果。D3Blocks是一个轻量级的开源框架，包含 15 个精美的图表，你只需要 Python 即可。最终输出是一个可在任何浏览器中运行的 HTML 文件，使共享和发布变得轻而易举。在这文中，云朵君将介绍 D3Blocks，并通过实际示例向你讲解其核心模块。

为什么要使用 D3.js

近年来，Python 社区开发了一系列精美可视化库，例如Matplotlib^[1]、Seaborn^[2]、Bokeh^[3]、Plotly^[4]、Folium^[5] 等等。一些库还允许图形具有交互性，但在这种情况下，它们仍然需要 Python 或其他 Web 服务才能保持运行。d3 的优势在于其高性能、可深度定制的图表，并且符合 Web 标准。名称“D3”是 Data-D rivenDocuments的缩写，它是一个用于生成动态交互式数据可视化的 JavaScript 库。它速度快、交互性强、外观精美，并且你可以完全根据自己的意愿进行自定义。

最后，最重要的是，除了浏览器之外，你不需要任何其他技术来绘制图形。这使得它易于在网站上共享，而且可共享。D3也称为D3.js或d3js。我将交替使用这些名称。

D3 采用 Web 标准，让你能够充分利用现代浏览器的功能，而无需依赖专有框架。它允许你将强大的可视化组件与数据驱动的方法相结合，并且只需使用 HTML、SVG 和 CSS 即可实现。—— d3js.org^[6]

使用 D3Blocks 可以非常轻松地创建 D3.js 图表。

我刚才提到了 D3 的优点，但它也存在一些缺点。首先，要将你的创意转化为 D3.js 图表，你需要熟悉 SVG、HTML、CSS 和 JavaScript。但即使你熟悉这些，D3.js 图表也可能无法轻松地跨不同数据集进行推广。换句话说，D3.js 脚本通常是静态脚本，经过优化以显示特定数据集的结果。更改数据集通常需要更改各种参数，例如轴的最小/最大值、列名，以及很可能还需要更改图表的方向和位置。

所有图表都通过 D3Blocks 完整封装到单个 HTML 文件中。你只需一个网页浏览器即可轻松共享、发布和嵌入图表。

借助 D3Blocks，我们通过将数据处理成适合下游 D3.js 脚本的格式来克服这些挑战。此外，所有必需的参数（列）命名、格式、定位、方向等也都已传递。通过这种方式，我们可以充分利用两者的优势：Python 用于数据处理、预处理、分析和建模，D3.js 用于可视化。D3Blocks 中提供了多种图表供你使用。让我们跳到下一节，看看有哪些图表！

D3Blocks 的图表！

D3Blocks 中的每个图表都包含两个主要部分：Python 部分和 D3.js 部分。Python 部分用于开发人员加载数据集、设置配置以及指定图表参数。而 D3.js 部分则以自动处理不同数据集以及用户定义属性的方式开发。最终输出是由D3Blocks生成的 HTML 文件，其中自动封装了图表所需的D3库。D3Blocks图表涵盖以下类别，安装 pip 后即可使用，无需安装任何其他程序！

要创建交互式 d3.js 图表，只需 pip install D3Blocks 即可。无需安装任何其他程序！

# 从 Pypi 安装库
pip install d3blocks

1. 关系可视化：五种图表可用于探索实体之间的连接、流程和关联。
2. 层次关系：可视化层次关系。
3. 基于时间的可视化：可视化随时间变化的趋势、变化和运动。
4. 成像和比较：以交互方式比较或探索图像数据。
5. 统计和分布可视化：了解数据中的模式、变化和分布。

五张图表呈现关系

关系定义为一个项目与一个或多个其他项目相连接。这使我们能够探索实体之间的连接、流动和关联。关系包含源值和目标值，并且在可用的情况下，可以赋予边强度的权重。请参阅下方代码块，了解带有权重的源-目标数据框的示例。

# 加载库
from d3blocks import D3Blocks 

# 导入示例
df = d3.import_example( 'energy' ) 

"""
+---------------------------+---------------------+--------+
|         Source            |        Target       | Weight |
+---------------------------+---------------------+--------+
| Agricultural 'waste'      | Bio-conversion      | 124.73 |
| Bio-conversion            | Liquid              |  0.597 |
| Bio-conversion            | Losses              | 26.862 |
| Bio-conversion            | Solid               | 280.32 |
| Bio-conversion            | Gas                 | 81.144 |
| ...                       | ...                 |  ...   |
| Thermal generation        | District heating    | 79.329 |
| Tidal                     | Electricity grid    |  9.452 |
| UK land based bioenergy   | Bio-conversion      | 182.01 |
| Wave                      | Electricity grid    | 19.013 |
| Wind                      | Electricity grid    | 289.37 |
+---------------------------+---------------------+--------+
"""

有很多方法可以在数据集中存储关系，例如邻接矩阵（一种对称的方阵）或关联矩阵^[7]（用于编码顶点对的关系）。无论矩阵的形式如何，绘制关系图都有助于更好地理解数据。例如，它可以揭示进化模式，其中节点在代表不同阶段的两个或多个组中重复出现。在这种情况下，弦图或桑基图是理想的关系表示方法。或者，也可以存在源到端的模式，即从某个点开始，以可能的中间步骤结束。在这种情况下，网络图会很有用。另一方面，当交互数量很大并且诸如网络之类的图变得像巨大的毛球一样时，热图就变得非常有用。对于所有这四种图表，输入数据保持一致，并且需要一个包含源、目标和权重列的数据框。D3Blocks 库可以创建以下关系图表：

• 网络图（d3graph）→实体网络
• 弹性图 →带集群的实体网络
• 桑基图→流程图
• 和弦→循环关系图
• 热图→相关矩阵

在接下来的部分中，我将使用包含 68 个列关系（参见上面的代码块）的能源数据集^[8]来创建图表。

1.网络图

借助D3Graph模块，我们可以使用 D3 力导向图绘制网络交互。在代码段 1中，我们加载能量数据集，然后使用 d3graph 模块分析数据。节点根据 Louvain 聚类启发式算法着色，边宽基于权重。现在可以以交互方式探索网络（图 1），其中可以根据边强度（使用位于顶部的滑块）断开边。这样可以保持最强的连接节点完好无损。

#加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 
# 导入示例
df = d3.import_example('energy') 
# 使用默认
d3.d3graph(df, filepath='d3graph.html', color='cluster', showfig=True)

能源数据集的交互式网络图。节点采用 Louvain 算法聚类方法着色，边大小基于输入权重。可以使用顶部的滑块根据边权重拆分网络。

# 自定义图表

# 节点属性存储在此处：
d3.D3graph.node_properties 
# 节点属性存储在此处：
d3.D3graph.edge_properties 

# 像这样更改节点属性：
d3.D3graph.set_node_properties(color=None)
d3.D3graph.node_properties['Solar']['size']=30
d3.D3graph.node_properties['Solar']['color']='#FF0000'
d3.D3graph.node_properties['Solar']['edge_color']='#000000'
d3.D3graph.node_properties['Solar']['edge_size']=5

# 进行更改后，使用 show() 再次显示图表
d3.D3graph.show() 

# 像这样更改边属性：
d3.D3graph.set_edge_properties(directed= True , marker_end= 'arrow' ) 

# 进行更改后，使用 show() 再次显示图表
d3.D3graph.show()

网络图可以通过各种输入参数进行自定义。更多详情请参阅3graph文档页面^[9]。

2.弹性图表

弹性图表与网络图表类似，但更高级。它允许你使用 D3 力导向图和交互式聚类来绘制网络交互。当节点下有一个或多个子节点按层级结构排列时，每个节点都可以展开或折叠。

它分为两个步骤：第一次单击节点显示节点上的边数，第二次单击展开所有与其相连的子节点。这允许你快速放大特定区域并分解信息。请参阅下面的代码块来创建图表。同样，所有信息都封装在一个 HTML 文件中，你可以根据需要共享或嵌入。

# 加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 
# 导入示例
df = d3.import_example( 'energy' ) 
# 创建图表
d3.elasticgraph( df , filepath= 'elastic.html' )

使用弹性图表绘制的能源数据集交互式网络图。节点自动着色。网络可根据用户点击进行扩展和分组。

图表可以通过各种输入参数进行自定义。更多详情请参阅elasticgraph文档页面^[10]。

3.桑基图

桑基图是一种可视化图表，用于显示从一组值到另一组值的流动。矩形框表示节点，箭头的宽度与流速成正比。桑基图最适合用于显示多对多关系或发现贯穿一组阶段的多条路径。例如，流量如何从网站的起始页面流向其他页面。为了演示，我将使用能源数据集作为桑基图块的输入。

#加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 
# 导入示例
df = d3.import_example( 'energy' ) 
# 创建图表
d3.sankey(df, filepath= 'sankey.html' )

桑基图可以通过各种输入参数进行自定义。更多详情请参阅Sankey.文档页面^[11]。

4. 和弦图

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

# 加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 
# 导入示例
df = d3.import_example('energy') 
# 创建图表
d3.chord(df, filepath='chord.html')

和弦图可以通过各种输入参数进行自定义。更多详情请参阅Chord文档页面^[12]。

5.热图

热图能够更直观地呈现矩阵。要创建此图表，我们首先需要安装 clusteval 库，它可以自动处理聚类技术。我将使用stormofswords 数据集，因为它包含更复杂的连接。运行代码块后，我们可以交互式地查看热图。

# 需要安装 clusteval 来处理聚类方法。
!pip install clusteval
# 加载库
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 导入示例
df = d3.import_example('stormofswords') 

# 创建图表
d3.heatmap(df, filepath='heatmap.html')

图表可以通过各种输入参数进行自定义。更多详情请参阅Heatmap文档页面^[13]。

三个图表可视化嵌套关系

层级可视化用于表示具有嵌套关系的数据。在这种情况下，每个项目都连接到一个父级，形成树状结构。与基本关系图（上一节）中简单的一对一或多对一连接不同，层级图表注重深度，使用户能够探索类别或实体如何细分为子类别。

层次结构通常由父子关系定义，其中每个子节点只有一个父节点（根节点除外）。你可以选择为每个节点附加权重或大小，以指示重要性、频率或量级。换句话说，其输入与网络图相同。这类图表在可视化复杂系统、组织结构或部分与整体关系方面特别有效。D3Blocks 中提供以下层次结构图表：

• 树状图→层次结构图
• 树形图→分层嵌套矩形图
• 圆形填充→分层嵌套圆形图

这些可视化有助于揭示数据中的模式，例如优势、不平衡或隐藏的子结构。当你的目标不仅仅是探索关系，而是了解数据如何在多个层级上组织、分组和分布时，它们尤其有用。

6.树形图

树形图以经典的分支布局呈现层级结构。它非常适合表示分类法、家谱和组织结构。

#加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 

# 导入示例
df = d3.import_example( 'energy' ) 

# 创建图表
d3.tree(df, filepath= 'tree.html' )

图表可以通过各种输入参数进行自定义。更多详情请参阅Tree文档页面^[14]。

树形图将分层数据可视化为一组嵌套的矩形，其中每个矩形的面积对应一个定量值。这种布局在比较部分与整体时尤其有用。

# 加载库
from d3blocks import D3Blocks
# 初始化
d3 = D3Blocks() 

# 导入示例
df = d3.import_example('energy' ) 

# 创建图表
d3.treemap(df, filepath='treemap.html')

图表可以通过各种输入参数进行自定义。更多详情请参阅Treemap文档页面^[15]。

8. 圆环填充图

圆环填充图将层级数据显示为嵌套的圆圈，高效利用空间，同时在视觉上保留层级结构。它是一种视觉上引人入胜的树状图替代方案，通常用于需要更宽松结构的情况。

# 加载库
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 导入示例
df = d3.import_example('energy') 

# 创建图表
d3.circlepacking(df, filepath='circlepacking.html')

图表可以通过各种输入参数进行自定义。更多详情请参阅Circlepacking文档页面^[16]。

基于时间的可视化图

基于时间的可视化使我们能够探索值或状态如何随时间演变。这些图表有助于揭示在静态数据集中难以解读的趋势、模式或序列。D3Blocks 提供了两种专门的可视化功能来捕捉时间数据的不同方面：TimeSeries和MovingBubbles。

每个数据集都datetime需要一个包含值的列。分析连续趋势时，请选择“TimeSeries”；可视化顺序状态或事件流时，请选择“MovingBubbles”。两者都能提供对时间相关数据的独特洞察，具体取决于你想要追踪值的变化还是动态变动。我们将在以下部分中了解它们的工作原理。

9.时间序列图

当你拥有连续的日期时间索引及其随时间变化的相应值时，TimeSeries图表是理想之选。股票市场价格就是一个典型的用例。这种图表非常出色，因为它能够轻松展现趋势、季节性模式或异常情况。例如，它可以用于可视化温度趋势、传感器输出或财务数据。

主要功能包括：1. 通过刷选和缩放功能聚焦特定时间范围；2. 切换感兴趣的列进行比较（例如，绘制多只股票的价格）；3. 以交互和直观的方式探索大规模时间序列数据。数据要求：一列包含datetime数值，以及一列或多列包含连续数值的列，以便绘制时间序列图。

# 导入库
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 导入示例
df = d3.import_example( 'climate' ) 

"""
+------------+------------+-----------+-------------+---------------+
|    Date    | Mean Temp  | Humidity  | Wind Speed  | Mean Pressure |
+------------+------------+-----------+-------------+---------------+
| 2017-01-01 |   15.913   |   85.870  |     2.743   |      59.000   |
| 2017-01-02 |   18.500   |   77.222  |     2.894   |    1018.278   |
| 2017-01-03 |   17.111   |   81.889  |     4.017   |    1018.333   |
| 2017-01-04 |   18.700   |   70.050  |     4.545   |    1015.700   |
| 2017-01-05 |   18.389   |   74.944  |     3.300   |    1014.333   |
|    ...     |    ...     |    ...    |     ...     |      ...      |
| 2017-04-20 |   34.500   |   27.500  |     5.563   |     998.625   |
| 2017-04-21 |   34.250   |   39.375  |     6.963   |     999.875   |
| 2017-04-22 |   32.900   |   40.900  |     8.890   |    1001.600   |
| 2017-04-23 |   32.875   |   27.500  |     9.963   |    1002.125   |
| 2017-04-24 |   32.000   |   27.143  |    12.157   |    1004.143   |
+------------+------------+-----------+-------------+---------------+
"""

# 创建图表
d3.timeseries(df, datetime='date', dt_format='%Y-%m-%d', fontsize=10, figsize=[850, 500])

图表可以通过各种输入参数进行自定义。更多详情请参阅Timeseries文档页面^[17]。

10. MovingBubbles 图

MovingBubbles图提供了一种动态方式，可以可视化实体如何随时间推移在不同状态之间转换。它不绘制连续值，而是关注离散事件。思考状态更新、流程步骤或行为变化，然后突出显示这些变化在特定时间点对不同实体（样本）的演变情况。

此图表对于揭示时间聚类（例如，许多实体在大约同一时间进入相似状态）和状态之间的运动模式特别有用。它当然不是最节省空间的可视化，但其视觉效果非常出色，由力导向物理和碰撞节点驱动，以保持气泡之间的清晰度和分离度。

此图表的主要特点是：

1. 捕捉动作或状态随时间变化的时间和方式。
2. 显示共享状态下的实体聚类。
3. 使用力导向布局进行引人入胜的探索。
4. 在状态数量、格式、颜色和方向方面灵活。

D3Blocks版本经过了大量定制和通用化，使其能够支持具有可自定义参数和时间分辨率的各种数据集。数据集要求如下：

• datetime：指示特定状态发生时间的时间戳。
• sample_id：每个被跟踪实体的唯一标识符。
• state：分类标签代表条件或阶段。

每个状态sample_id可以出现多次（在不同的时间戳），但不能在同一时间点具有多个状态。为了帮助用户入门，D3Blocks 内置了一个随机示例数据集的生成器：

# 导入
from d3blocks import D3Blocks 
import random 

# 初始化
d3 = D3Blocks(chart= 'movingbubbles' ) 

# 导入示例
df = d3.import_example('random_time', n=10000 , c=300 , date_start="1-1-2000 00:10:05", date_stop="1-1-2000 23:59:59" ) 

"""
+---------------------+-----------+-----------+
|      Datetime       | Sample ID |   State   |
+---------------------+-----------+-----------+
| 2000-01-01 00:10:07 |     187   |   Sick    |
| 2000-01-01 00:10:14 |      59   |   Sick    |
| 2000-01-01 00:10:46 |     122   |   Sick    |
| 2000-01-01 00:10:57 |     112   |   Sick    |
| 2000-01-01 00:11:12 |     174   |   Work    |
|         ...         |    ...    |   ...     |
| 2000-01-01 23:59:56 |     183   |  Sport    |
| 2000-01-01 23:59:57 |       9   | Sleeping  |
| 2000-01-01 23:59:58 |     297   |  Travel   |
| 2000-01-01 23:59:58 |     297   | Sleeping  |
| 2000-01-01 23:59:58 |     261   | Sleeping  |
+---------------------+-----------+-----------+
"""

# 使用颜色和大小自定义状态：
color = { 1 : '#FF0000' , 3 : '#000FFF' } 
size = {i: random.randint( 5 , 20 ) for i in  range ( 1 , 50 )}

使用以下代码行创建移动气泡图：

# 创建图表
d3.movingbubbles( df , color=color, size=size, figsize=[775, 800])

图表可以通过各种输入参数进行自定义。更多详情请参阅MovingBubbles文档页面^[18]。

三个用于统计和分布可视化图

统计图表是理解数据模式、变化和分布的重要工具。这些图表通过 D3Blocks 展现超越原始数字的洞见。以下三个区块将为你的数据提供独特的视角，涵盖从分布模式到地理趋势的各个方面。

• 散点图→散点图。
• 小提琴→分布小提琴图。
• 地图→用色彩创造世界。

11.散点图

散点图可能是绘制 (x, y) 坐标最著名的图表。这种基本图表很有用，尤其是具有刷涂和缩放功能。散点图可以按样本着色，并用于检测样本（组）之间的关系。输入是 x 和 y 坐标，但可以设置各种其他参数，例如类标签、大小、（边缘）颜色、工具提示信息等。散点图还可以在两组或三组坐标之间转换。这在比较不同的映射集时很有用。

为了演示，我将使用来自癌症基因组图谱项目 (TCGA) 的癌症数据集，该数据集为 34 种不同的癌组织提供了多种类型的分子数据。对分子数据进行处理，并导出表示患者间相似性的 t-SNE 坐标和主成分。通过散点图，我们可以可视化两组坐标（t-SNE 和 PC ）并更深入地分析结果。

# 加载 d3blocks 
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 加载示例数据
df = d3.import_example( 'cancer' ) 

"""
+-----------+-----------+------+--------+------------+------------+
|  tsneX    |  tsneY    | Age  | Labx   |    PC1     |    PC2     |
+-----------+-----------+------+--------+------------+------------+
|  37.20430 |  24.16281 | 58.0 |  acc   |  49.23346  |  14.49651  |
|  37.09309 |  23.42356 | 44.0 |  acc   |  46.32799  |  14.46447  |
|  36.80630 |  23.44491 | 23.0 |  acc   |  46.56793  |  13.48013  |
|  38.06789 |  24.41177 | 30.0 |  acc   |  63.62468  |   1.87406  |
|  36.79120 |  21.71532 | 29.0 |  acc   |  41.74671  |  37.53362  |
|   ...     |    ...    | ...  |  ...   |    ...     |    ...     |
|   0.83938 |  -8.87078 | NaN  |  brca  | -15.38129  |  -8.25454  |
|  -5.84290 |   2.87760 | NaN  |  brca  | -19.16332  |  -6.42407  |
|  -9.39204 |   1.66335 | 71.0 |  brca  | -21.79413  |  -6.19291  |
|  -4.01639 |   6.26074 | NaN  |  brca  | -24.53614  |  -1.17167  |
|   0.22980 |  -8.22709 | NaN  |  brca  | -28.16274  |  -5.29207  |
+-----------+-----------+------+--------+------------+------------+
"""

# 设置大小和工具提示
size = df['survival_months'].fillna(1).values / 20
tooltip = df['labx'].values + ' <br /> Survival: ' + df['survival_months'].astype(str).str[0:4].values
# 散点图
d3.scatter(df['tsneX'].values,
                       df['tsneY'].values,
                       size=size,
                       color=df['labx'].values,
                       stroke='#000000',
                       opacity=0.4,
                       tooltip=tooltip,
                       filepath='scatter_demo.html',
                       cmap='tab20')

该图表可以通过各种输入参数进行自定义。更多详情请参阅catter文档页面^[19]。如果你需要以定量的方式比较图表，我建议使用 K 最近邻排序得分。

小提琴图可以可视化一个或多个组数值变量的分布。它是箱线图的替代方案，能够洞察大型数据集中某些信息，因为箱线图可能会隐藏部分信息。使用此模块，我们可以为一个或多个组配置图表，并更改图表中的各种元素，例如颜色、工具提示和箱体大小。为了演示，我们将癌症数据集用作小提琴模块的输入，结果如图 9 所示。原始代码是从D3.js 图库分叉^[20]而来的，并进行了大量扩展，添加了新功能。

# 加载 d3blocks 
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 导入示例数据集
df = d3.import_example( 'cancer' ) 

"""
+-----------+-----------+------+--------+------------+------------+
|  tsneX    |  tsneY    | Age  | Labx   |    PC1     |    PC2     |
+-----------+-----------+------+--------+------------+------------+
|  37.20430 |  24.16281 | 58.0 |  acc   |  49.23346  |  14.49651  |
|  37.09309 |  23.42356 | 44.0 |  acc   |  46.32799  |  14.46447  |
|  36.80630 |  23.44491 | 23.0 |  acc   |  46.56793  |  13.48013  |
|  38.06789 |  24.41177 | 30.0 |  acc   |  63.62468  |   1.87406  |
|  36.79120 |  21.71532 | 29.0 |  acc   |  41.74671  |  37.53362  |
|   ...     |    ...    | ...  |  ...   |    ...     |    ...     |
|   0.83938 |  -8.87078 | NaN  |  brca  | -15.38129  |  -8.25454  |
|  -5.84290 |   2.87760 | NaN  |  brca  | -19.16332  |  -6.42407  |
|  -9.39204 |   1.66335 | 71.0 |  brca  | -21.79413  |  -6.19291  |
|  -4.01639 |   6.26074 | NaN  |  brca  | -24.53614  |  -1.17167  |
|   0.22980 |  -8.22709 | NaN  |  brca  | -28.16274  |  -5.29207  |
+-----------+-----------+------+--------+------------+------------+
"""

# 设置一些输入变量。
 tooltip = df[ 'labx' ].values + ' <br /> Survival: ' + df[ 'survival_months' ].astype( str ).values 

# 创建图表
d3.violin(x=df['labx'].values, y=df['age'].values, tooltip=tooltip, bins=50, size=df['survival_months'].values/10, x_order=['acc','kich', 'brca','lgg','blca','coad','ov'], filepath='violine.html', figsize=[900, None])

图表可以通过各种输入参数进行自定义。更多详情请参阅Violin文档页面^[21]。

13. 地图

地图可让你可视化世界地理并突出显示特定的国家/地区或区域。你可以根据数据值对国家/地区进行颜色编码，并可选地叠加气泡以标记兴趣点。其主要功能包括：突出显示区域：根据自定义数据为整个国家/地区着色；标记点：使用圆圈强调特定位置（例如，首都、热点）。D3blocks内置了"surfspots"用于演示的数据集。用例包括：显示全球指标、可视化地理空间分布或绘制特定地点的数据。

# 加载 d3blocks 
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 加载示例数据
df = d3.import_example( 'surfspots' ) 

"""
+--------+--------+----------------+------+
|  Lat   |  Lon   |     Label      | Size |
+--------+--------+----------------+------+
| -82.9  | 135.0  |  Antarctica    |   4  |
| -54.8  | -68.3  | South America  |   4  |
| -53.8  | -67.7  | South America  |   1  |
| -53.2  | -70.9  |      NaN       |   2  |
| -52.4  | -71.0  | South America  |   2  |
|  ...   |  ...   |      ...       |  ... |
|  69.6  |  19.0  |      NaN       |   1  |
|  70.0  |  23.3  |    Europe      |   1  |
|  70.4  |  29.5  |    Europe      |  13  |
|  76.3  | -100.1 | North America  |   1  |
|  78.2  |  15.6  |    Europe      |   3  |
+--------+--------+----------------+------+
"""

# 绘制
d3.maps(df)

图表可以通过各种输入参数进行自定义。更多详情请参阅Maps文档页面^[22]。

14. 图像滑块

当你想要比较两张图片时，ImageSlider 非常有用。尤其是在存在前后状态的情况下，它非常有用。JavaScript 代码是从JohnEdChristensen^[23]分支出来的，然后经过 Python 化并嵌入到D3Blocks中。

# 安装 opencv 来读取图像。pip
 install opencv-python
# 加载 d3blocks 
from d3blocks import D3Blocks 
import cv2 
import requests 
import numpy as np 

# 初始化
d3 = D3Blocks() 
# 加载本地图片
img_before, img_after = d3.import_example( 'southern_nebula' ) 
# 读取数组中的图片
img_before = cv2.imread(img_before, - 1 ) 
img_after = cv2.imread(img_after, - 1 ) 
# 创建滑块
d3.imageslider(img_before, img_after) 

# 网络图片
url_before, url_after = d3.import_example( 'southern_nebula_internet' ) 
# 从网络导入图片
resp = request.get(url_before) 
image_data = np.asarray( bytearray (resp.content), dtype=np.uint8) 
img_before = cv2.imdecode(image_data, cv2.IMREAD_UNCHANGED) 
# 从互联网导入图像
resp = request.get(url_after) 
image_data = np.asarray( bytearray (resp.content), dtype=np.uint8) 
img_after = cv2.imdecode(image_data, cv2.IMREAD_UNCHANGED) 

# 创建滑块
d3.imageslider(img_before, img_after)

图表可以通过各种输入参数进行自定义。更多详情请参阅Imageslider文档页面^[24]。

15. 粒子块

使用粒子块，我们可以将任何单词转换为交互式粒子图表。鼠标移动或触摸文本会导致粒子弹跳，然后返回其原始位置。图表的行为可以更改各种属性，例如弹跳、粒子大小和颜色。代码部分展示了一个创建粒子图表的示例。原始 JavaScript 代码来自Ian Johnson^[25]，然后进行了 Python 化。

# 加载 d3blocks 
from d3blocks import D3Blocks 

# 初始化
d3 = D3Blocks() 

# 使用默认值创建图表
d3.particles( 'D3blocks' ) 

# 创建自定义图表
d3.particles( 'D3Blocks' , 
             filepath= 'D3Blocks.html' , 
             Collision= 0.05 , 
             Spacing= 7 , 
             figsize=[ 750 , 150 ], 
             Fontsize= 130 , 
             cmap= 'Turbo' , 
             color_background= '#ffffff' )

图表可以通过各种输入参数进行自定义。更多详情请参阅Particles文档页面^[26]。

D3Blocks库包含 15 个交互式、独立且外观精美的图表，可使用 Python 进行配置，后端则使用 d3.js。D3Blocks 的输出是将每个图表完全封装在一个 HTML 文件中，这样你就可以在网站上共享或发布图表，只需使用浏览器即可。