Python相当于D3.js

时间:2012-10-19 15:26:17

标签: python graph d3.js graph-tool

有人可以推荐一个可以进行交互式图形可视化的Python库吗?

我特别需要像d3.js这样的内容,但是对于python,理想情况下它也会是3D。

我看过:

  • NetworkX - 它只会显示Matplotlib个图,而这些图似乎是2D。我没有看到任何类型的交互性,例如d3.js提供的交互性,例如拉动节点。
  • graph-tool - 它只执行2D绘图,并且具有非常慢的交互式图形。

15 个答案:

答案 0 :(得分:65)

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

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()

答案 1 :(得分:34)

Plotly支持交互式2D和3D图形。图表使用D3.js呈现,可以使用Python APImatplotlibggplot for PythonSeabornprettyplotlibpandas创建。您可以打开和关闭缩放,平移,切换轨迹,并查看悬停上的数据。 Plots可以嵌入HTML,应用程序,仪表板和IPython笔记本中。以下是显示互动性的temperature graph。有关更多示例,请参阅IPython Notebooks tutorials的图库。

enter image description here



docs提供了受支持的绘图类型和代码段的示例。



enter image description here

具体到您的问题,您也可以从NetworkX make interactive plots

enter image description here

对于使用Python进行3D绘图,您可以制作类似交互式的3D散点图,线图和曲面图。使用WebGL渲染绘图。例如,请参阅英国互换费率的a 3D graph



enter image description here

披露:我是Plotly团队的成员。

答案 2 :(得分:20)

你看过文森特了吗? Vincent接受Python数据对象并将其转换为Vega可视化语法。 Vega是基于D3构建的更高级别的可视化工具。与D3py相比,vincent仓库最近更新了。虽然这些例子都是静态的D3。

更多信息:


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

vincent.core.initialize_notebook()

或输出到JSON,您可以在Veson在线编辑器(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/

答案 3 :(得分:17)

我使用的一个配方(在此描述: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)

答案 4 :(得分:16)

另一个选项是bokeh,它刚刚进入版本0.3。

答案 5 :(得分:5)

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

答案 6 :(得分:5)

对于那些推荐pyd3的人,它不再处于活跃开发状态,并指向vincent。 vincent也不再处于积极开发阶段,建议使用altair

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

答案 7 :(得分:4)

我建议使用mpld3,它将D3js javascript可视化与python的matplotlib结合起来。

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

http://mpld3.github.io/

答案 8 :(得分:2)

Plotly 可为您做一些很酷的事情enter image description here

https://plot.ly/

生成高度交互的图表,可以使用其离线API轻松嵌入私有服务器或网站的HTML页面。

<强>更新 我注意到它的3D绘图功能,2D图形非常棒 谢谢

答案 9 :(得分:2)

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

这是要点。您可以使用以下格式序列化图表数据:

<aui:select id="options" name="SelectOne" required="true" showEmptyOption="true" >
            <aui:option value="Option 1">Option 1</aui:option>
            <aui:option value="Option 2">Option 2</aui:option>
            <aui:option value="Option 3">Option 3</aui:option>
        </aui:select>

        <aui:script use="event, node">

            var option = A.one('#<portlet:namespace/>options');

            option.on('click', function(event){
                alert(option.value());
            });

</aui:script>

然后使用d3.js:

加载数据
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.json("pcap_export.json", drawGraph); ,我建议您使用链接。

答案 10 :(得分:1)

请参阅:

Is there a good interactive 3D graph library out there?

接受的答案表明以下程序显然具有python绑定:http://ubietylab.net/ubigraph/

修改

我不确定NetworkX的交互性,但你绝对可以制作3D图形。图库中至少有一个例子:

http://networkx.lanl.gov/examples/drawing/edge_colormap.html

“示例”中的另一个例子。但是,这个要求你有Mayavi。

http://networkx.lanl.gov/examples/3d_drawing/mayavi2_spring.html

答案 11 :(得分:1)

有一个有趣的NetworkX to Javascript端口可能会做你想要的。见http://felix-kling.de/JSNetworkX/

答案 12 :(得分:1)

答案 13 :(得分:0)

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

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

答案 14 :(得分:0)

d3graph将在python内部构建一个力控d3图。您可以根据边缘权重“破坏”网络,并将鼠标悬停在节点上以获取更多信息。双击节点将聚焦于该节点及其连接的边缘。

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)

Examples of d3graph

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