相当于 D3.js 的 Python答案

【问题标题】：Python equivalent of D3.js相当于 D3.js 的 Python
【发布时间】：2012-10-10 06:15:45
【问题描述】：

谁能推荐一个可以进行交互式图形可视化的 Python 库？

我特别想要d3.js 之类的东西，但对于python，理想情况下它也是3D 的。

我看过：

NetworkX - 它只做Matplotlib 的情节，而且那些似乎是二维的。我没有看到任何形式的交互性，就像 d3.js 提供的那样，比如拉节点。
graph-tool - 它只绘制 2D 绘图并且具有非常慢的交互式图形。

【问题讨论】：

如果您正在寻找基于浏览器的版本，您可能希望在 networkx 中生成一个图表，然后在 d3.js 中进行操作。
@kreativitea ok .... 理想情况下我将如何做到这一点：图形数据（通过 Python 中的 API 调用）-> Python（机器学习材料）-> Django / Something + D3.js（可视化）-> 漂亮的图片和网站 :)
我认为你可以在 python 中实现 vega lite。看看这个，当然是阴谋。

标签： python graph d3.js graph-tool

【解决方案1】：

您可以使用d3py 一个python 模块来生成嵌入d3.js 脚本的xml 页面。例如：

import d3py
import networkx as nx

import logging
logging.basicConfig(level=logging.DEBUG)

G = nx.Graph()
G.add_edge(1,2)
G.add_edge(1,3)
G.add_edge(3,2)
G.add_edge(3,4)
G.add_edge(4,2)

# use 'with' if you are writing a script and want to serve this up forever
with d3py.NetworkXFigure(G, width=500, height=500) as p:
    p += d3py.ForceLayout()
    p.show()

【讨论】：

为我工作，但我不得不将其中一行编辑为with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:。我在 github 上查看了 d3py 的最新提交（SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba）
不幸的是，d3py 不再被积极开发——Vincent 是现代的等价物（Vega/d3.js 的 Python 接口），但下面是 psychemedia 的答案（将 networkx 导出到 json 然后在 d3.js 中呈现) 可能是最干净的。
试试altair-viz.github.io - d3py 和 vincent 的继任者。另见stackoverflow.com/a/49695472/179014。

【解决方案2】：

Plotly 支持交互式 2D 和 3D 绘图。图形使用 D3.js 渲染，可以使用 Python API、matplotlib、ggplot for Python、Seaborn、prettyplotlib 和 pandas 创建。您可以缩放、平移、打开和关闭跟踪，并在悬停时查看数据。绘图可以嵌入到 HTML、应用程序、仪表板和 IPython 笔记本中。下面是一个显示交互性的temperature graph。有关更多示例，请参阅IPython Notebooks tutorials 的图库。

docs 提供了支持的绘图类型和代码 sn-ps 的示例。

具体到您的问题，您也可以来自 NetworkX 的make interactive plots。

对于使用 Python 进行 3D 绘图，您可以制作具有类似交互性的 3D 散点图、线图和曲面图。绘图使用 WebGL 渲染。例如，请参阅英国掉期利率的a 3D graph。

披露：我在 Plotly 团队。

【讨论】：

很明显，这个问题针对的是 graphs，即通过边连接的节点。这个答案不必要地包含了 plotly 的其他可视化功能。
@mateo-sanchez 很遗憾 Plotly 决定终止所有学术和个人订阅以专注于企业客户

【解决方案3】：

你看过文森特吗？ Vincent 获取 Python 数据对象并将其转换为 Vega 可视化语法。 Vega 是建立在 D3 之上的更高级别的可视化工具。与 D3py 相比，最近更新了 vincent repo。虽然示例都是静态 D3。

更多信息：

可以在Ipython中查看图表，只需添加此代码

vincent.core.initialize_notebook()

或输出到 JSON，您可以在 Vega 在线编辑器 (http://trifacta.github.io/vega/editor/) 中查看 JSON 输出图，或在本地 Python 服务器上查看它们。更多关于查看的信息可以在上面的 pypi 链接中找到。

不确定何时，但 Pandas 包应该在某个时候集成 D3。 http://pandas.pydata.org/developers.html

Bokeh 是一个支持交互式可视化的 Python 可视化库。它的主要输出后端是 HTML5 Canvas，并使用客户端/服务器模型。

示例：http://continuumio.github.io/bokehjs/

【讨论】：

Vincent is on the way out - 看起来有一些替代品，但我不确定它们与 ipython 的联系有多紧密..

【解决方案4】：

我使用的一个配方（此处描述：Co-Director Network Data Files in GEXF and JSON from OpenCorporates Data via Scraperwiki and networkx）运行如下：

使用 networkx 生成网络表示
将网络导出为 JSON 文件
将该 JSON 导入到 d3.js。（networkx 可以导出 d3.js 可以导入的树和图形/网络表示）。

networkx JSON exporter 采用以下形式：

from networkx.readwrite import json_graph
import json
print json.dumps(json_graph.node_link_data(G))

您也可以将export the network 作为一个GEXF XML 文件，然后将此表示形式导入sigma.js Javascript 可视化库。

from xml.etree.cElementTree import tostring
writer=gf.GEXFWriter(encoding='utf-8',prettyprint=True,version='1.1draft')
writer.add_graph(G)
print tostring(writer.xml)

【讨论】：

【解决方案5】：

另一个选项是 bokeh，它刚刚升级到 0.3 版。

【讨论】：

【解决方案6】：

对于推荐pyd3的人，它不再处于积极开发中，并指向vincent。 vincent 也不再处于积极开发阶段，建议使用altair。

所以如果你想要一个 pythonic d3，请使用 altair。

【讨论】：

【解决方案7】：

试试https://altair-viz.github.io/ - d3py 和 vincent 的继任者。另见

【讨论】：

【解决方案8】：

查看python-nvd3。它是 nvd3 的 python 包装器。看起来比 d3.py 更酷，并且还有更多图表选项。

【讨论】：

【解决方案9】：

我建议使用结合了 D3js javascript 可视化和 python 的 matplotlib 的 mpld3。

安装和使用非常简单，它有一些很酷的插件和互动的东西。

http://mpld3.github.io/

【讨论】：

【解决方案10】：

Plotly可以为你做一些很酷的事情

https://plot.ly/

使用其离线 API 生成高度交互的图表，这些图表可以轻松嵌入到您的私人服务器或网站的 HTML 页面中。

更新： 我很确定它的 3D 绘图功能，因为 2D 图形很棒谢谢

【讨论】：

请注意，这是chart可视化...问题要求graph可视化。（我很欣赏这些短语通常被混为一谈！）

【解决方案11】：

您还可以选择序列化数据，然后在 D3.js 中将其可视化，如下所示： Use Python & Pandas to Create a D3 Force Directed Network Diagram（它也带有jupyter notebook！）

这里是要点。您以这种格式序列化您的图形数据：

import json
json_data = {
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
    {"name":"Mme.Magloire","group":1},
    {"name":"CountessdeLo","group":1},
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":3,"target":2,"value":6},
    {"source":4,"target":0,"value":1},
    {"source":5,"target":0,"value":1},
  ]
}
filename_out = 'graph_data.json'
json_out = open(filename_out,'w')
json_out.write(json_data)
json_out.close()

然后你用 d3.js 加载数据：

d3.json("pcap_export.json", drawGraph);

不过，对于drawGraph 的例程，我建议您参考链接。

【讨论】：

我现在编辑了它，但我没有包含 drawGraph 例程，它本身调用 drawLinks 和 drawNodes。这太麻烦了，元素只在整个 html 文件的上下文中才有意义。

【解决方案12】：

有一个有趣的 NetworkX 到 Javascript 的端口，可以做你想做的事。见http://felix-kling.de/JSNetworkX/

【讨论】：

这可能行得通....你能给我介绍一下文档吗？我如何将 python 中的图形输出到这个 javascript 库中......？我想先在 python 中生成它......或者我将如何加载它？
我实际上从未使用过 JSNetworkX，所以我不确定它是如何工作的。
@EiyrioüvonKauyf：输入与 Python 中的输入相同，例如列表列表或 dicts 的 dict。您可以在 Python 中构建图表，将其转换为列表列表并将其转换为 JSON。
是的，绝对容易。这里的例子简单漂亮：felix-kling.de/JSNetworkX/examples

【解决方案13】：

d3graph 库将在 python 中构建一个力导向的 d3-graph。您可以根据边缘权重“破坏”网络，并将鼠标悬停在节点上以获取更多信息。双击一个节点将关注该节点及其连接的边缘。

pip install d3graph

例子：

source = ['node A','node F','node B','node B','node B','node A','node C','node Z']
target = ['node F','node B','node J','node F','node F','node M','node M','node A']
weight = [5.56, 0.5, 0.64, 0.23, 0.9,3.28,0.5,0.45]

# Import library
from d3graph import d3graph, vec2adjmat

# Convert to adjacency matrix
adjmat = vec2adjmat(source, target, weight=weight)
print(adjmat)
# target  node A  node B  node F  node J  node M  node C  node Z
# source                                                        
# node A    0.00     0.0    5.56    0.00    3.28     0.0     0.0
# node B    0.00     0.0    1.13    0.64    0.00     0.0     0.0
# node F    0.00     0.5    0.00    0.00    0.00     0.0     0.0
# node J    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node M    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node C    0.00     0.0    0.00    0.00    0.50     0.0     0.0
# node Z    0.45     0.0    0.00    0.00    0.00     0.0     0.0

# Example A: simple interactive network
out = d3graph(adjmat)

# Example B: Color nodes
out = d3graph(adjmat, node_color=adjmat.columns.values)

# Example C: include node size
node_size = [10,20,10,10,15,10,5]
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size)

# Example D: include node-edge-size
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], cmap='Set2')

# Example E: include node-edge color
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF')

# Example F: Change colormap
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2')

# Example H: Include directed links. Arrows are set from source -> target
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2', directed=True)

泰坦尼克号案例的交互式示例可以在这里找到： https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases.html

【讨论】：

【解决方案14】：

我在这里有一个使用 Python 自动生成 D3.js 网络图的好例子：http://brandonrose.org/ner2sna

很酷的是，您最终会得到自动生成的 HTML 和 JS，并且可以将交互式 D3 图表嵌入到带有 IFrame 的笔记本中

【讨论】：