Python เทียบเท่ากับ D3.js


110

ใครช่วยแนะนำไลบรารี Python ที่สามารถสร้างภาพกราฟเชิงโต้ตอบได้บ้าง?

ฉันต้องการบางอย่างเช่นd3.js เป็นพิเศษแต่สำหรับpythonและควรเป็น 3D ด้วย

ฉันได้ดู:

  • NetworkX - ทำเฉพาะพMatplotlibล็อตและดูเหมือนว่าจะเป็น 2D ฉันไม่เห็นการโต้ตอบแบบใดแบบหนึ่งd3.jsเช่นการดึงโหนดไปรอบ ๆ
  • เครื่องมือกราฟ - ทำเฉพาะแปลง 2 มิติและมีกราฟโต้ตอบที่ช้ามาก

1
คุณต้องการสร้างกราฟใน networkx แล้วจัดการใน d3.js หากคุณกำลังมองหาเวอร์ชันที่ใช้เบราว์เซอร์
kreativitea

@kreativitea ตกลง .... ฉันจะทำอย่างนั้นได้อย่างไร: Graph Data (ผ่านการเรียก API ใน Python) -> Python (Machine Learning Stuffs) -> Django / Something + D3.js (การแสดงภาพ) -> รูปภาพสวย ๆ และเว็บไซต์ :)
Eiyrioü von Kauyf

ฉันคิดว่าคุณสามารถใช้ vega lite ใน python ได้ ตรวจสอบสิ่งนี้และวางแผนอย่างแน่นอน
Noel Harris

คำตอบ:


74

คุณสามารถใช้d3pyโมดูล python ที่สร้างเพจ xml ที่ฝังสคริปต์ d3.js ตัวอย่างเช่น :

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:แต่ผมต้องแก้ไขหนึ่งในสายไป ฉันตรวจสอบการกระทำล่าสุดของd3pyที่ github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb

7
น่าเสียดายที่ d3py ไม่ได้รับการพัฒนาอย่างแข็งขันอีกต่อไป Vincent เป็นสิ่งที่เทียบเท่าสมัยใหม่ (อินเตอร์เฟส Python ไปยัง Vega / d3.js) แต่คำตอบของ psychemedia ด้านล่าง (ส่งออก networkx ไปยัง json จากนั้นแสดงผลใน d3.js) อาจจะสะอาดที่สุด

2
ลองaltair-viz.github.io - ตัวตายตัวแทนของ d3py และ vincent ดูstackoverflow.com/a/49695472/179014ด้วย
asmaier

43

รองรับการสร้างกราฟแบบ 2D และ 3D แบบโต้ตอบ กราฟจะแสดงผลด้วย D3.js และสามารถสร้างขึ้นด้วยงูหลาม API , matplotlib , ggplot สำหรับงูหลาม , ทะเล , prettyplotlibและหมีแพนด้า คุณสามารถซูมแพนสลับเปิดและปิดการติดตามและดูข้อมูลบนโฮเวอร์ได้ พล็อตสามารถฝังอยู่ใน HTML แอปแดชบอร์ดและโน้ตบุ๊ก IPython ด้านล่างนี้เป็นกราฟอุณหภูมิที่แสดงการโต้ตอบ ดูแกลเลอรีของบทเรียนIPython Notebooks สำหรับตัวอย่างเพิ่มเติม

ป้อนคำอธิบายภาพที่นี่



เอกสารให้ตัวอย่างของประเภทที่พล็อตได้รับการสนับสนุนและโค้ด



ป้อนคำอธิบายภาพที่นี่

สำหรับคำถามของคุณโดยเฉพาะคุณสามารถสร้างแผนการโต้ตอบจาก NetworkX ได้

ป้อนคำอธิบายภาพที่นี่

สำหรับการพล็อต 3 มิติด้วย Python คุณสามารถสร้างแผนภูมิกระจายเส้นและพื้นผิว 3 มิติที่มีการโต้ตอบในลักษณะเดียวกัน พล็อตแสดงผลด้วย WebGL ตัวอย่างเช่นดูกราฟ 3 มิติของอัตราแลกเปลี่ยนสหราชอาณาจักร



ป้อนคำอธิบายภาพที่นี่

การเปิดเผยข้อมูล: ฉันอยู่ในทีม Plotly


9
ชัดเจนว่าคำถามมุ่งเป้าไปที่กราฟในแง่ของโหนดที่เชื่อมต่อกันด้วยขอบ คำตอบนี้ไม่จำเป็นต้องมีความสามารถในการแสดงภาพอื่น ๆ ของการวางแผน
Lutz Büch

@ mateo-sanchez เป็นเรื่องที่โชคร้ายมากที่ Plotly ได้ตัดสินใจที่จะยุติการสมัครสมาชิกทางวิชาการและรายบุคคลทั้งหมดเพื่อมุ่งเน้นไปที่ลูกค้าองค์กร
Andreuccio

20

คุณมองไปที่ Vincent หรือยัง? Vincent ใช้วัตถุข้อมูล Python และแปลงเป็นไวยากรณ์การสร้างภาพ Vega Vega เป็นเครื่องมือสร้างภาพระดับสูงที่สร้างขึ้นจาก D3 เมื่อเทียบกับ D3py แล้ว vincent repo ได้รับการอัปเดตเมื่อเร็ว ๆ นี้ แม้ว่าตัวอย่างจะเป็น D3 แบบคงที่ทั้งหมด

ข้อมูลเพิ่มเติม:


สามารถดูกราฟได้ใน Ipython เพียงเพิ่มโค้ดนี้

vincent.core.initialize_notebook()

หรือส่งออกไปยัง JSON ซึ่งคุณสามารถดูกราฟเอาต์พุต JSON ในตัวแก้ไขออนไลน์ของ Vega ( http://trifacta.github.io/vega/editor/ ) หรือดูบนเซิร์ฟเวอร์ Python ภายในเครื่อง ข้อมูลเพิ่มเติมเกี่ยวกับการรับชมสามารถพบได้ในลิงค์ pypi ด้านบน

ไม่แน่ใจว่าเมื่อไหร่ แต่แพ็คเกจ Pandas ควรมีการรวม D3 ในบางจุด http://pandas.pydata.org/developers.html

Bokeh เป็นไลบรารีการแสดงภาพ Python ที่รองรับการแสดงภาพแบบโต้ตอบ แบ็กเอนด์เอาต์พุตหลักคือผ้าใบ HTML5 และใช้โมเดลไคลเอ็นต์ / เซิร์ฟเวอร์

ตัวอย่าง: http://continuumio.github.io/bokehjs/


2
Vincent กำลังจะออก - ดูเหมือนว่าจะมีการเปลี่ยนบางส่วน แต่ฉันไม่แน่ใจว่าพวกเขาจะเชื่อมโยงกับ ipython มากแค่ไหน ..
naught101

19

สูตรหนึ่งที่ฉันได้ใช้ (อธิบายที่นี่: Co-Director Network Data Files ใน GEXF และ JSON จาก OpenCorporates Data ผ่าน Scraperwiki และ networkx ) ทำงานดังนี้:

  • สร้างการแสดงเครือข่ายโดยใช้networkx
  • ส่งออกเครือข่ายเป็นไฟล์ JSON
  • นำเข้าที่ JSON เข้าไปd3.js ( networkxสามารถส่งออกทั้งแผนภูมิต้นไม้และกราฟ / การแสดงเครือข่ายที่d3.jsสามารถนำเข้าได้)

networkxส่งออก JSONใช้รูปแบบ:

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

หรือคุณสามารถเอ็กซ์พอร์ตเครือข่ายเป็นไฟล์GEXF XML จากนั้นอิมพอร์ตการแสดงข้อมูลนี้ลงในไลบรารีการแสดงภาพ Javascript sigma.js

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

ดังนั้นหากคุณต้องการ pythonic d3 ให้ใช้ altair




4

ฉันขอแนะนำให้ใช้ mpld3 ซึ่งรวมการแสดงภาพจาวาสคริปต์ D3js กับ matplotlib ของ python

การติดตั้งและการใช้งานนั้นง่ายมากและมีปลั๊กอินที่ยอดเยี่ยมและเนื้อหาแบบโต้ตอบ

http://mpld3.github.io/


3

Plotlyสามารถทำของดีๆให้คุณได้ป้อนคำอธิบายภาพที่นี่

https://plot.ly/

สร้างกราฟเชิงโต้ตอบขั้นสูงที่สามารถฝังเข้ากับหน้า HTML สำหรับเซิร์ฟเวอร์ส่วนตัวหรือเว็บไซต์ของคุณได้อย่างง่ายดายโดยใช้ off line API

อัปเดต: ฉันทราบว่ามีความสามารถในการพล็อต 3 มิติสำหรับกราฟ 2 มิตินั้นยอดเยี่ยมมากขอบคุณ


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ฉันแนะนำคุณไปที่ลิงค์


ฉันแก้ไขแล้ว แต่ฉันไม่ได้รวมรูทีน drawGraph ซึ่งเรียกว่า drawLinks และ drawNodes มันจะยุ่งยากเกินไปและองค์ประกอบต่างๆก็เหมาะสมในบริบทของไฟล์ html ทั้งหมดเท่านั้น
Lutz Büch

1

มีพอร์ตที่น่าสนใจของ NetworkX ถึง Javascript ที่สามารถทำสิ่งที่คุณต้องการได้ ดูhttp://felix-kling.de/JSNetworkX/


มันอาจจะได้ผล .... คุณช่วยแนะนำเอกสารให้ฉันหน่อยได้ไหม ฉันจะแสดงกราฟจาก python ลงในไลบรารี javascript นี้ได้อย่างไร ... ฉันต้องการสร้างใน python ก่อน ... หรือฉันจะโหลดได้อย่างไร
Eiyrioü von Kauyf

ฉันไม่เคยใช้ JSNetworkX มาก่อนดังนั้นฉันจึงไม่แน่ใจว่ามันทำงานอย่างไร
Aric

@ EiyrioüvonKauyf: อินพุตจะเหมือนกับใน Python เช่นลิสต์ลิสต์หรือไดเรค คุณสามารถสร้างกราฟใน Python แปลงเป็นรายการและแปลงเป็น JSON
Felix Kling

ใช่ง่ายแน่นอน ตัวอย่างที่เรียบง่ายและสวยงาม: felix-kling.de/JSNetworkX/examples
Aric

1

ดู:

มีไลบรารีกราฟ 3 มิติเชิงโต้ตอบที่ดีหรือไม่?

คำตอบที่ได้รับการยอมรับแนะนำโปรแกรมต่อไปนี้ซึ่งเห็นได้ชัดว่ามีการผูก python: http://ubietylab.net/ubigraph/

แก้ไข

ฉันไม่แน่ใจเกี่ยวกับการโต้ตอบของ NetworkX แต่คุณสามารถสร้างกราฟ 3 มิติได้อย่างแน่นอน มีอย่างน้อยหนึ่งตัวอย่างในแกลเลอรี:

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

และอีกตัวอย่างหนึ่งใน 'ตัวอย่าง' อย่างไรก็ตามอันนี้คุณต้องมี Mayavi

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


0

ฉันมีตัวอย่างที่ดีในการสร้างไดอะแกรมเครือข่าย D3.js โดยอัตโนมัติโดยใช้ Python ที่นี่: http://brandonrose.org/ner2sna

สิ่งที่ยอดเยี่ยมคือคุณจบลงด้วย HTML และ JS ที่สร้างขึ้นโดยอัตโนมัติและสามารถฝังแผนภูมิ D3 แบบโต้ตอบในสมุดบันทึกที่มี IFrame


0

ไลบรารีd3graphจะสร้างกราฟ d3 แบบบังคับจากภายใน python คุณสามารถ "ทำลาย" เครือข่ายตามน้ำหนักขอบและวางเมาส์เหนือโหนดเพื่อดูข้อมูลเพิ่มเติม ดับเบิลคลิกที่โหนดจะโฟกัสไปที่โหนดและขอบที่เชื่อมต่อ

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

ตัวอย่างแบบโต้ตอบจากกรณีไททานิกสามารถพบได้ที่นี่: 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.