摘要：用 Python 创建交互式、独立、可共享且视觉美观的图表确实是一项挑战。解决方案是 D3blocks！它基于 D3 JavaScript 的图形处理引擎构建，但可使用 Python 进行配置，并且只需一行代码即可完成！
用 Python 创建交互式、独立、可共享且视觉美观的图表确实是一项挑战。解决方案是 D3blocks！它基于 D3 JavaScript 的图形处理引擎构建，但可使用 Python 进行配置，并且只需一行代码即可完成！
D3Blocks 中的交互式图表
Python 是用于分析和可视化数据的最流行的编程语言之一。可视化是项目成功的关键，因为它可以揭示隐藏的见解并加深你的理解。快速理解和解释数据的最佳方法是使其具有交互性。然而，这同时也是一个真正的挑战，因为尽管 Python 中有许多可视化包，但创建美观、独立、可交互、可共享且可在外部运行的图表仍然很困难。一种解决方案是使用 JavaScript 创建 D3 图表，但这种方法也带来了一系列挑战。D3Blocks库应运而生。
有了 D3Blocks，Python 终于与 D3.js 实现了融合，从而轻松构建令人惊叹的可视化效果。D3Blocks是一个轻量级的开源框架，包含 15 个精美的图表，你只需要 Python 即可。最终输出是一个可在任何浏览器中运行的 HTML 文件，使共享和发布变得轻而易举。在这文中，云朵君将介绍 D3Blocks，并通过实际示例向你讲解其核心模块。
近年来，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]
我刚才提到了 D3 的优点，但它也存在一些缺点。首先，要将你的创意转化为 D3.js 图表，你需要熟悉 SVG、HTML、CSS 和 JavaScript。但即使你熟悉这些，D3.js 图表也可能无法轻松地跨不同数据集进行推广。换句话说，D3.js 脚本通常是静态脚本，经过优化以显示特定数据集的结果。更改数据集通常需要更改各种参数，例如轴的最小/最大值、列名，以及很可能还需要更改图表的方向和位置。
所有图表都通过 D3Blocks 完整封装到单个 HTML 文件中。你只需一个网页浏览器即可轻松共享、发布和嵌入图表。
借助 D3Blocks，我们通过将数据处理成适合下游 D3.js 脚本的格式来克服这些挑战。此外，所有必需的参数（列）命名、格式、定位、方向等也都已传递。通过这种方式，我们可以充分利用两者的优势：Python 用于数据处理、预处理、分析和建模，D3.js 用于可视化。D3Blocks 中提供了多种图表供你使用。让我们跳到下一节，看看有哪些图表！
D3Blocks 中的每个图表都包含两个主要部分：Python 部分和 D3.js 部分。Python 部分用于开发人员加载数据集、设置配置以及指定图表参数。而 D3.js 部分则以自动处理不同数据集以及用户定义属性的方式开发。最终输出是由D3Blocks生成的 HTML 文件，其中自动封装了图表所需的D3库。D3Blocks图表涵盖以下类别，安装 pip 后即可使用，无需安装任何其他程序！
要创建交互式 d3.js 图表，只需 pip install D3Blocks 即可。无需安装任何其他程序！
# 从 Pypi 安装库pip install d3blocks关系可视化：五种图表可用于探索实体之间的连接、流程和关联。层次关系：可视化层次关系。基于时间的可视化：可视化随时间变化的趋势、变化和运动。成像和比较：以交互方式比较或探索图像数据。统计和分布可视化：了解数据中的模式、变化和分布。五张图表呈现关系关系定义为一个项目与一个或多个其他项目相连接。这使我们能够探索实体之间的连接、流动和关联。关系包含源值和目标值，并且在可用的情况下，可以赋予边强度的权重。请参阅下方代码块，了解带有权重的源-目标数据框的示例。
# 加载库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]来创建图表。
借助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)图 1. D3graph 图
能源数据集的交互式网络图。节点采用 Louvain 算法聚类方法着色，边大小基于输入权重。可以使用顶部的滑块根据边权重拆分网络。
# 自定义图表# 节点属性存储在此处：d3.D3graph.node_properties # 节点属性存储在此处：d3.D3graph.edge_properties # 像这样更改节点属性：d3.D3graph.set_node_properties(color=None)d3.D3graph.node_properties['Solar']['size']=30d3.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]。
弹性图表与网络图表类似，但更高级。它允许你使用 D3 力导向图和交互式聚类来绘制网络交互。当节点下有一个或多个子节点按层级结构排列时，每个节点都可以展开或折叠。
它分为两个步骤：第一次单击节点显示节点上的边数，第二次单击展开所有与其相连的子节点。这允许你快速放大特定区域并分解信息。请参阅下面的代码块来创建图表。同样，所有信息都封装在一个 HTML 文件中，你可以根据需要共享或嵌入。
# 加载库from d3blocks import D3Blocks# 初始化d3 = D3Blocks # 导入示例df = d3.import_example( 'energy' ) # 创建图表d3.elasticgraph( df , filepath= 'elastic.html' )图 2. 弹性图表
使用弹性图表绘制的能源数据集交互式网络图。节点自动着色。网络可根据用户点击进行扩展和分组。
图表可以通过各种输入参数进行自定义。更多详情请参阅elasticgraph文档页面[10]。
桑基图是一种可视化图表，用于显示从一组值到另一组值的流动。矩形框表示节点，箭头的宽度与流速成正比。桑基图最适合用于显示多对多关系或发现贯穿一组阶段的多条路径。例如，流量如何从网站的起始页面流向其他页面。为了演示，我将使用能源数据集作为桑基图块的输入。
#加载库from d3blocks import D3Blocks# 初始化d3 = D3Blocks # 导入示例df = d3.import_example( 'energy' ) # 创建图表d3.sankey(df, filepath= 'sankey.html' )图 3. 使用默认参数的能源数据集桑基图
桑基图可以通过各种输入参数进行自定义。更多详情请参阅Sankey.文档页面[11]。
弦图可以可视化多个实体或节点之间的流动或连接。每个实体由圆形布局外部的一个片段表示。然后，在每个实体之间绘制弧线。弧线的大小与流动的重要性成正比。
# 加载库from d3blocks import D3Blocks# 初始化d3 = D3Blocks # 导入示例df = d3.import_example('energy') # 创建图表d3.chord(df, filepath='chord.html')图 4. 使用默认参数的能量数据集的弦图
和弦图可以通过各种输入参数进行自定义。更多详情请参阅Chord文档页面[12]。
热图能够更直观地呈现矩阵。要创建此图表，我们首先需要安装 clusteval 库，它可以自动处理聚类技术。我将使用stormofswords 数据集，因为它包含更复杂的连接。运行代码块后，我们可以交互式地查看热图。
# 需要安装 clusteval 来处理聚类方法。!pip install clusteval# 加载库from d3blocks import D3Blocks # 初始化d3 = D3Blocks # 导入示例df = d3.import_example('stormofswords') # 创建图表d3.heatmap(df, filepath='heatmap.html')图 5. 使用默认参数的 Stormfords 数据集热图
图表可以通过各种输入参数进行自定义。更多详情请参阅Heatmap文档页面[13]。
层级可视化用于表示具有嵌套关系的数据。在这种情况下，每个项目都连接到一个父级，形成树状结构。与基本关系图（上一节）中简单的一对一或多对一连接不同，层级图表注重深度，使用户能够探索类别或实体如何细分为子类别。
层次结构通常由父子关系定义，其中每个子节点只有一个父节点（根节点除外）。你可以选择为每个节点附加权重或大小，以指示重要性、频率或量级。换句话说，其输入与网络图相同。这类图表在可视化复杂系统、组织结构或部分与整体关系方面特别有效。D3Blocks 中提供以下层次结构图表：
树状图→层次结构图树形图→分层嵌套矩形图圆形填充→分层嵌套圆形图这些可视化有助于揭示数据中的模式，例如优势、不平衡或隐藏的子结构。当你的目标不仅仅是探索关系，而是了解数据如何在多个层级上组织、分组和分布时，它们尤其有用。
树形图以经典的分支布局呈现层级结构。它非常适合表示分类法、家谱和组织结构。
#加载库from d3blocks import D3Blocks# 初始化d3 = D3Blocks # 导入示例df = d3.import_example( 'energy' ) # 创建图表d3.tree(df, filepath= 'tree.html' )图 6. 使用默认参数的 Energy 数据集树状图
图表可以通过各种输入参数进行自定义。更多详情请参阅Tree文档页面[14]。
树形图将分层数据可视化为一组嵌套的矩形，其中每个矩形的面积对应一个定量值。这种布局在比较部分与整体时尤其有用。
# 加载库from d3blocks import D3Blocks# 初始化d3 = D3Blocks # 导入示例df = d3.import_example('energy' ) # 创建图表d3.treemap(df, filepath='treemap.html')图 7. 使用默认参数的能源数据集树状图
图表可以通过各种输入参数进行自定义。更多详情请参阅Treemap文档页面[15]。
圆环填充图将层级数据显示为嵌套的圆圈，高效利用空间，同时在视觉上保留层级结构。它是一种视觉上引人入胜的树状图替代方案，通常用于需要更宽松结构的情况。
# 加载库from d3blocks import D3Blocks # 初始化d3 = D3Blocks # 导入示例df = d3.import_example('energy') # 创建图表d3.circlepacking(df, filepath='circlepacking.html')图 8. 使用默认参数的能源数据集的 Circlepacking 图
图表可以通过各种输入参数进行自定义。更多详情请参阅Circlepacking文档页面[16]。
基于时间的可视化使我们能够探索值或状态如何随时间演变。这些图表有助于揭示在静态数据集中难以解读的趋势、模式或序列。D3Blocks 提供了两种专门的可视化功能来捕捉时间数据的不同方面：TimeSeries和MovingBubbles。
每个数据集都datetime需要一个包含值的列。分析连续趋势时，请选择“TimeSeries”；可视化顺序状态或事件流时，请选择“MovingBubbles”。两者都能提供对时间相关数据的独特洞察，具体取决于你想要追踪值的变化还是动态变动。我们将在以下部分中了解它们的工作原理。
当你拥有连续的日期时间索引及其随时间变化的相应值时，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])图 9. 使用默认参数的时间序列图。右侧面板用于选择（取消选择）可用的气候变量，底部面板用于绘制和缩放
图表可以通过各种输入参数进行自定义。更多详情请参阅Timeseries文档页面[17]。
MovingBubbles图提供了一种动态方式，可以可视化实体如何随时间推移在不同状态之间转换。它不绘制连续值，而是关注离散事件。思考状态更新、流程步骤或行为变化，然后突出显示这些变化在特定时间点对不同实体（样本）的演变情况。
此图表对于揭示时间聚类（例如，许多实体在大约同一时间进入相似状态）和状态之间的运动模式特别有用。它当然不是最节省空间的可视化，但其视觉效果非常出色，由力导向物理和碰撞节点驱动，以保持气泡之间的清晰度和分离度。
此图表的主要特点是：
捕捉动作或状态随时间变化的时间和方式。显示共享状态下的实体聚类。使用力导向布局进行引人入胜的探索。在状态数量、格式、颜色和方向方面灵活。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])图 10. 使用默认参数的 MovingBubbles 图表。左侧面板可用于选择时间移动的速度，而右侧面板中的实体会在特定时间点从一个状态移动到另一个状态
图表可以通过各种输入参数进行自定义。更多详情请参阅MovingBubbles文档页面[18]。
统计图表是理解数据模式、变化和分布的重要工具。这些图表通过 D3Blocks 展现超越原始数字的洞见。以下三个区块将为你的数据提供独特的视角，涵盖从分布模式到地理趋势的各个方面。
散点图→散点图。小提琴→分布小提琴图。地图→用色彩创造世界。散点图可能是绘制 (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 / 20tooltip = df['labx'].values + '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')
图 11. 散点图。通过选择区域进行缩放。双击即可返回主屏幕
该图表可以通过各种输入参数进行自定义。更多详情请参阅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 + '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])
图 12. 小提琴图
图表可以通过各种输入参数进行自定义。更多详情请参阅Violin文档页面[21]。
地图可让你可视化世界地理并突出显示特定的国家/地区或区域。你可以根据数据值对国家/地区进行颜色编码，并可选地叠加气泡以标记兴趣点。其主要功能包括：突出显示区域：根据自定义数据为整个国家/地区着色；标记点：使用圆圈强调特定位置（例如，首都、热点）。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)图 13. 地图
图表可以通过各种输入参数进行自定义。更多详情请参阅Maps文档页面[22]。
当你想要比较两张图片时，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)图 14. 带有两幅输入图像的 ImageSlider。将中心橙色球向左（之前）或向右（之后）移动后显示的图像
图表可以通过各种输入参数进行自定义。更多详情请参阅Imageslider文档页面[24]。
使用粒子块，我们可以将任何单词转换为交互式粒子图表。鼠标移动或触摸文本会导致粒子弹跳，然后返回其原始位置。图表的行为可以更改各种属性，例如弹跳、粒子大小和颜色。代码部分展示了一个创建粒子图表的示例。原始 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' )图 15. 粒子块
图表可以通过各种输入参数进行自定义。更多详情请参阅Particles文档页面[26]。
写在最后D3Blocks库包含 15 个交互式、独立且外观精美的图表，可使用 Python 进行配置，后端则使用 d3.js。D3Blocks 的输出是将每个图表完全封装在一个 HTML 文件中，这样你就可以在网站上共享或发布图表，只需使用浏览器即可。
参考资料
[1]
Matplotlib: https://mode.com/blog/python-data-visualization-libraries/#matplotlib
[2]
Seaborn: https://mode.com/blog/python-data-visualization-libraries/#Seaborn
[3]
Bokeh: https://mode.com/blog/python-data-visualization-libraries/#Bokeh
[4]
Plotly: https://mode.com/blog/python-data-visualization-libraries/#Plotly
[5]
Folium: https://mode.com/blog/python-data-visualization-libraries/#Folium
[6]
d3js.org: https://d3js.org/
[7]
关联矩阵: https://en.wikipedia.org/wiki/Incidence_matrix
[8]
能源数据集: https://observablehq.com/@d3/sankey
[9]
3graph: https://d3blocks.github.io/d3blocks/pages/html/d3graph.html
[10]
elasticgraph: https://d3blocks.github.io/d3blocks/pages/html/elasticgraph.html
[11]
Sankey: https://d3blocks.github.io/d3blocks/pages/html/Sankey.html
[12]
Chord: https://d3blocks.github.io/d3blocks/pages/html/Chord.html
[13]
Heatmap: https://d3blocks.github.io/d3blocks/pages/html/Heatmap.html
[14]
Tree: https://d3blocks.github.io/d3blocks/pages/html/Tree.html
[15]
Treemap: https://d3blocks.github.io/d3blocks/pages/html/Treemap.html
[16]
Circlepacking: https://d3blocks.github.io/d3blocks/pages/html/Circlepacking.html
[17]
Timeseries: https://d3blocks.github.io/d3blocks/pages/html/Timeseries.html
[18]
MovingBubbles: https://d3blocks.github.io/d3blocks/pages/html/MovingBubbles.html
[19]
catter: https://d3blocks.github.io/d3blocks/pages/html/Scatter.html
[20]
D3.js : https://d3-graph-gallery.com/graph/violin_jitter.html
[21]
Violin: https://d3blocks.github.io/d3blocks/pages/html/Violin.html
[22]
Maps: https://d3blocks.github.io/d3blocks/pages/html/Maps.html
[23]
JohnEdChristensen: https://github.com/JohnEdChristensen/WebbCompare/
[24]
Imageslider: https://d3blocks.github.io/d3blocks/pages/html/Imageslider.html
[25]
Ian Johnson: http://bl.ocks.org/enjalot/f973a941606aa38fed321fbce0c8bd7f
[26]
Particles: https://d3blocks.github.io/d3blocks/pages/html/.html
来源：数据派THU一点号
