D3.js와 동등한 Python


110

대화 형 그래프 시각화를 수행 할 수있는 Python 라이브러리를 추천 할 수 있습니까 ?

나는 특별히 d3.js 와 같은 것을 하지만 python이상적으로는 3D도 될 것입니다.

나는 보았다 :

  • NetworkX-Matplotlib 플롯 만 수행 하며 2D로 보입니다. 나는 d3.js노드를 끌어 당기는 것과 같은 어떤 종류의 상호 작용도 보지 못했습니다 .
  • 그래프 도구 -2D 플롯 만 수행하고 매우 느린 대화 형 그래프를 가지고 있습니다.

1
브라우저 기반 버전을 찾고 있다면 networkx에서 그래프를 생성 한 다음 d3.js에서 조작하고 싶을 것입니다.
kreativitea

@kreativitea ok .... 어떻게하면 좋을까요? 그래프 데이터 (Python의 API 호출을 통해)-> Python (기계 학습 도구)-> Django / Something + D3.js (시각화)-> 예쁜 사진과 웹 사이트 :)
Eiyrioü von Kauyf

파이썬에서 vega lite를 구현할 수 있다고 생각합니다. 물론 이것을 확인하고 플롯하십시오.
Noel Harris

답변:


74

d3.js 스크립트를 포함하는 xml 페이지를 생성하는 파이썬 모듈 인 d3py를 사용할 수 있습니다 . 예 :

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 (SHA : 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb

7
불행히도 d3py는 더 이상 활발하게 개발되지 않고 있습니다. Vincent는 현대적인 동등 물 (Vega / d3.js에 대한 Python 인터페이스)이지만 아래 psychemedia의 답변 (networkx를 json으로 내보내고 d3.js에서 렌더링)이 가장 깨끗할 수 있습니다.
A.Wan 2014

2
d3py와 vincent의 후속 제품인 altair-viz.github.io를 사용 해보세요 . stackoverflow.com/a/49695472/179014 도 참조하십시오 .
asmaier

43

Plotly는 대화 형 2D 및 3D 그래프를 지원합니다. 그래프는 D3.js로 렌더링되며 Python API , matplotlib , Python 용 ggplot , Seaborn , prettyplotlibpandas 로 생성 할 수 있습니다 . 확대 / 축소, 이동, 트레이스 켜기 / 끄기, 마우스 오버시 데이터를 볼 수 있습니다. 플롯은 HTML, 앱, 대시 보드 및 IPython 노트북에 포함될 수 있습니다. 아래는 상호 작용을 보여주는 온도 그래프 입니다. 더 많은 예제 는 IPython 노트북 튜토리얼 갤러리를 참조하십시오 .

여기에 이미지 설명 입력



문서는 지원 플롯 유형과 코드 조각의 예제를 제공합니다.



여기에 이미지 설명 입력

특히 귀하의 질문에 대해 NetworkX에서 대화 형 플롯만들 수도 있습니다 .

여기에 이미지 설명 입력

Python을 사용한 3D 플로팅의 경우 유사한 대화 형 3D 산점, 선 및 표면 플롯을 만들 수 있습니다. 플롯은 WebGL로 렌더링됩니다. 예를 들어 영국 스왑 금리 의 3D 그래프 를 참조하십시오 .



여기에 이미지 설명 입력

공개 : 저는 Plotly 팀에 있습니다.


9
분명히 질문은 가장자리로 연결된 노드의 의미 에서 그래프 를 목표로 합니다 . 이 답변에는 플롯의 다른 시각화 기능이 불필요하게 포함됩니다.
Lutz Büch

@ 마테오 - 산체스는 Plotly는 기업 고객에 초점을 모든 학문과 개별 구독을 종료하기로 결정했다 매우 불행한 일이다
Andreuccio

20

빈센트를 봤어? Vincent는 Python 데이터 개체를 가져 와서 Vega 시각화 문법으로 변환합니다. Vega는 D3 위에 구축 된 더 높은 수준의 시각화 도구입니다. D3py와 비교할 때 vincent repo가 ​​더 최근에 업데이트되었습니다. 예제는 모두 정적 D3입니다.

더 많은 정보:


그래프는 Ipython에서 볼 수 있습니다.이 코드를 추가하면됩니다.

vincent.core.initialize_notebook()

또는 Vega 온라인 편집기 ( http://trifacta.github.io/vega/editor/ ) 에서 JSON 출력 그래프를 보거나 Python 서버에서 로컬로 볼 수 있는 JSON으로 출력 합니다. 보기에 대한 자세한 정보는 위의 pypi 링크에서 찾을 수 있습니다.

언제인지 확실하지 않지만 Pandas 패키지에는 어느 시점에서 D3 통합이 있어야합니다. http://pandas.pydata.org/developers.html

Bokeh는 대화 형 시각화를 지원하는 Python 시각화 라이브러리입니다. 기본 출력 백엔드는 HTML5 Canvas이며 클라이언트 / 서버 모델을 사용합니다.

예 : http://continuumio.github.io/bokehjs/


2
빈센트는 출구에 일부 교체가있는 것처럼 보이지만, 나는 그들이 될 것 ipython에 연결하는 방법을 자세히 모르겠어요 .. -
naught101

19

내가 사용한 레시피 중 하나 (여기 설명 : Scraperwiki 및 networkx를 통한 OpenCorporates 데이터의 GEXF 및 JSON의 공동 감독 네트워크 데이터 파일 )는 다음과 같이 실행됩니다.

  • networkx 를 사용하여 네트워크 표현 생성
  • 네트워크를 JSON 파일로 내보내기
  • 해당 JSON을 d3.js 로 가져옵니다 . ( networkxd3.js 가 가져올 수 있는 트리 및 그래프 / 네트워크 표현을 모두 내보낼 수 있습니다).

networkx JSON의 수출 형태를 취한다 :

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

또는 네트워크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)


7

pyd3 를 추천 한 사람들에게는 더 이상 활발하게 개발되지 않으며 vincent를 안내 합니다. vincent는 더 이상 활발하게 개발되지 않으며 altair 사용을 권장 합니다.

따라서 파이썬 d3를 원한다면 altair를 사용하십시오.



5

python-nvd3을 확인하십시오 . nvd3 용 파이썬 래퍼입니다. d3.py보다 멋지게 보이며 더 많은 차트 옵션이 있습니다.


4

D3js javascript 시각화와 python의 matplotlib를 결합한 mpld3를 사용하는 것이 좋습니다.

설치 및 사용은 정말 간단하며 멋진 플러그인과 대화 형 기능이 있습니다.

http://mpld3.github.io/


3

Plotly 는 멋진 일을 할 수 있습니다.여기에 이미지 설명 입력

https://plot.ly/

오프라인 API를 사용하여 개인 서버 또는 웹 사이트의 HTML 페이지에 쉽게 삽입 할 수있는 고도의 대화 형 그래프를 생성합니다.

업데이트 : 2D 그래프가 굉장하기 때문에 3D 플로팅 기능에 대해 확신합니다. 감사합니다.


2
이것은 차트 시각화입니다. 질문은 그래프 시각화를 요청 합니다 . (나는이 문구는 일반적으로 융합되어 주셔서 감사합니다!)
j6m8

2

데이터를 직렬화 한 다음 D3.js에서 시각화하도록 선택할 수도 있습니다. Python 및 Pandas를 사용하여 D3 Force Directed Network Diagram 만들기 ( Jupyter 노트북 도 함께 제공됩니다!)

여기에 요점이 있습니다. 다음 형식으로 그래프 데이터를 직렬화합니다.

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그러나 루틴 에 대해서는 링크를 참조합니다.


지금 편집했지만 drawLinks 및 drawNodes를 호출하는 drawGraph 루틴은 포함하지 않았습니다. 너무 번거롭고 요소는 전체 html 파일의 컨텍스트에서만 의미가 있습니다.
Lutz Büch

1

원하는 작업을 수행 할 수있는 NetworkX에서 Javascript 로의 흥미로운 포트가 있습니다. http://felix-kling.de/JSNetworkX/ 참조


작동 할 수 있습니다 .... 문서를 참조 해 주시겠습니까? 이 자바 스크립트 라이브러리에 파이썬에서 그래프를 어떻게 출력합니까 ...? 먼저 파이썬으로 생성하고 싶습니다 ... 또는 어떻게로드합니까?
Eiyrioü von Kauyf

실제로 JSNetworkX를 사용한 적이 없어서 어떻게 작동하는지 잘 모르겠습니다.
Aric

@ EiyrioüvonKauyf : 입력은 Python에서와 동일합니다 (예 : 목록 목록 또는 dicts 사전). Python으로 그래프를 작성하고 목록 목록으로 변환 한 다음 JSON으로 변환 할 수 있습니다.
Felix Kling 2012 년

예, 확실히 쉽습니다. 여기에있는 예는 간단하고 아름답습니다. felix-kling.de/JSNetworkX/examples
Aric

1

보다:

좋은 대화 형 3D 그래프 라이브러리가 있습니까?

받아 들여지는 대답은 분명히 파이썬 바인딩이있는 다음 프로그램을 제안합니다. 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


0

Python을 사용하여 D3.js 네트워크 다이어그램을 자동으로 생성하는 좋은 예가 있습니다. http://brandonrose.org/ner2sna

멋진 점은 자동 생성 된 HTML 및 JS로 끝나고 IFrame이있는 노트북에 대화 형 D3 차트를 포함 할 수 있다는 것입니다.


0

라이브러리 d3graph는 파이썬 내에서 강제 방향 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)

d3graph 용례들

titanic-case의 대화 형 예제는 https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases 에서 찾을 수 있습니다. .html

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.