Python setara dengan D3.js

110

Adakah yang bisa merekomendasikan pustaka Python yang dapat melakukan visualisasi grafik interaktif ?

Saya secara khusus menginginkan sesuatu seperti d3.js tetapi untuk pythondan idealnya itu adalah 3D juga.

Saya telah melihat:

  • NetworkX - hanya melakukan Matplotlibplot dan yang tampaknya 2D. Saya tidak melihat interaktivitas apa pun, seperti yang d3.jsmemberi, seperti menarik node.
  • graph-tool - ia hanya melakukan plot 2D dan memiliki grafik interaktif yang sangat lambat .
Eiyrioü von Kauyf
sumber
1
Anda ingin membuat grafik di networkx dan kemudian memanipulasinya di d3.js, jika Anda mencari versi berbasis browser.
kreativitea
@kreativitea ok .... bagaimana saya melakukannya oo idealnya: Grafik Data (melalui Panggilan API dengan Python) -> Python (Alat Pembelajaran Mesin) -> Django / Sesuatu + D3.js (visualisasi) -> Gambar cantik dan situs web :)
Eiyrioü von Kauyf
Saya pikir Anda dapat menerapkan vega lite dengan python. Lihat ini dan tentu saja secara plot.
Noel Harris

Jawaban:

74

Anda bisa menggunakan d3py modul python yang menghasilkan halaman xml yang menyematkan skrip d3.js. Sebagai contoh :

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()
Vincent Agnus
sumber
Berhasil untuk saya, tetapi saya harus mengedit salah satu baris ke with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:. Saya memeriksa komit terbaru d3py di github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb.
7
Sayangnya d3py tidak lagi dikembangkan secara aktif - Vincent adalah padanan modern (antarmuka Python ke Vega / d3.js) tetapi jawaban psikemedia di bawah ini (ekspor networkx ke json lalu render di d3.js) mungkin yang paling bersih.
A.Wan
2
Coba altair-viz.github.io - penerus d3py dan vincent. Lihat juga stackoverflow.com/a/49695472/179014 .
asmaier
43

Plotly mendukung grafik 2D dan 3D interaktif. Grafik dirender dengan D3.js dan dapat dibuat dengan Python API , matplotlib , ggplot untuk Python , Seaborn , prettyplotlib , dan pandas . Anda dapat memperbesar, menggeser, mengaktifkan dan menonaktifkan jejak, dan melihat data saat melayang. Plot dapat disematkan di HTML, aplikasi, dasbor, dan Notebook IPython. Di bawah ini adalah grafik suhu yang menunjukkan interaktivitas. Lihat galeri tutorial Notebook IPython untuk contoh lebih lanjut.

masukkan deskripsi gambar di sini



The docs memberikan contoh jenis petak didukung dan potongan kode.



masukkan deskripsi gambar di sini

Khusus untuk pertanyaan Anda, Anda juga dapat membuat plot interaktif dari NetworkX.

masukkan deskripsi gambar di sini

Untuk plot 3D dengan Python, Anda dapat membuat plot 3D sebar, garis, dan permukaan yang juga interaktif. Plot dirender dengan WebGL. Misalnya, lihat grafik 3D tarif Swap Inggris Raya.



masukkan deskripsi gambar di sini

Pengungkapan: Saya berada di tim Plotly.

Mateo Sanchez
sumber
9
Jelas pertanyaannya ditujukan pada grafik dalam arti node dihubungkan oleh tepi. Jawaban ini tidak perlu menyertakan kemampuan visualisasi lainnya secara plot.
Lutz Büch
@ mateo-sanchez sangat disayangkan bahwa Plotly telah memutuskan untuk menghentikan semua langganan akademik dan individu untuk fokus pada klien korporat
Andreuccio
20

Pernahkah Anda melihat Vincent? Vincent mengambil objek data Python dan mengubahnya menjadi tata bahasa visualisasi Vega. Vega adalah alat visualisasi tingkat tinggi yang dibangun di atas D3. Dibandingkan dengan D3py, vincent repo telah diperbarui baru-baru ini. Padahal contoh semua D3 statis.

Info lebih lanjut:


Grafik bisa dilihat di Ipython, cukup tambahkan kode ini

vincent.core.initialize_notebook()

Atau output ke JSON di mana Anda dapat melihat grafik output JSON di editor online Vega ( http://trifacta.github.io/vega/editor/ ) atau melihatnya di server Python Anda secara lokal. Info lebih lanjut tentang melihat dapat ditemukan di link pypi di atas.

Tidak yakin kapan, tetapi paket Pandas harus memiliki integrasi D3 di beberapa titik. http://pandas.pydata.org/developers.html

Bokeh adalah pustaka visualisasi Python yang mendukung visualisasi interaktif. Backend keluaran utamanya adalah HTML5 Canvas dan menggunakan model klien / server.

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

sk8asd123
sumber
2
Vincent sedang dalam proses keluar - sepertinya ada beberapa pengganti, tapi saya tidak yakin seberapa dekat mereka dengan
ipython
19

Satu resep yang telah saya gunakan (dijelaskan di sini: Co-Director Network Data Files di GEXF dan JSON dari OpenCorporates Data melalui Scraperwiki dan networkx ) berjalan sebagai berikut:

  • menghasilkan representasi jaringan menggunakan networkx
  • ekspor jaringan sebagai file JSON
  • impor yang JSON ke dalam untuk d3.js . ( networkx dapat mengekspor representasi pohon dan grafik / jaringan yang dapat diimpor d3.js ).

The networkx eksportir JSON mengambil bentuk:

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

Atau, Anda dapat mengekspor jaringan sebagai file XML GEXF dan kemudian mengimpor representasi ini ke pustaka visualisasi 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)
psychemedia
sumber
16

Pilihan lainnya adalah bokeh yang baru saja masuk ke versi 0.3.

MrDrFenner
sumber
7

Bagi mereka yang merekomendasikan pyd3 , itu tidak lagi dalam pengembangan aktif dan mengarahkan Anda ke vincent . Vincent juga tidak lagi aktif dalam pengembangan dan merekomendasikan penggunaan altair .

Jadi jika Anda menginginkan pythonic d3, gunakan altair.

Wes
sumber
5

Lihat python-nvd3 . Ini adalah pembungkus python untuk nvd3. Terlihat lebih keren dari d3.py dan juga memiliki lebih banyak opsi bagan.

richie
sumber
4

Saya akan menyarankan menggunakan mpld3 yang menggabungkan visualisasi javascript D3js dengan matplotlib dari python.

Instalasi dan penggunaannya sangat sederhana dan memiliki beberapa plugin keren dan barang interaktif.

http://mpld3.github.io/

Ram
sumber
3

Plotly dapat melakukan beberapa hal keren untuk Andamasukkan deskripsi gambar di sini

https://plot.ly/

Menghasilkan grafik yang sangat interaktif yang dapat dengan mudah disematkan ke dalam halaman HTML untuk server pribadi atau situs web Anda menggunakan API offline-nya.

Pembaruan: Saya perhatikan yakin tentang kemampuan plot 3D-nya, karena grafik 2D luar biasa Terima kasih

jax
sumber
2
Perhatikan bahwa ini adalah visualisasi bagan ... Pertanyaan meminta visualisasi grafik . (Saya menghargai ungkapan-ungkapan ini biasanya digabungkan!)
j6m8
2

Anda juga dapat memilih untuk membuat serial data Anda dan kemudian memvisualisasikannya di D3.js, seperti yang dilakukan di sini: Gunakan Python & Pandas untuk Membuat Diagram Jaringan Terarah Gaya D3 (Muncul dengan notebook jupyter juga!)

Inilah intinya. Anda membuat serial data grafik Anda dalam format ini:

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

Kemudian Anda memuat data dengan d3.js:

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

Untuk rutinitas, drawGraphsaya merujuk Anda ke tautannya.

Lutz Büch
sumber
Saya mengeditnya sekarang, tetapi saya tidak menyertakan rutin drawGraph yang dengan sendirinya memanggil drawLinks dan drawNodes. Ini akan menjadi terlalu rumit dan elemen hanya masuk akal dalam konteks seluruh file html.
Lutz Büch
1

Ada port NetworkX yang menarik ke Javascript yang mungkin melakukan apa yang Anda inginkan. Lihat http://felix-kling.de/JSNetworkX/

Aric
sumber
ini mungkin berhasil .... bisakah Anda merujuk saya ke dokumentasi? Bagaimana saya akan menampilkan grafik dari python ke dalam perpustakaan javascript ini ...? Saya ingin membuatnya dengan python dulu ... atau bagaimana cara memuatnya?
Eiyrioü von Kauyf
Saya sebenarnya tidak pernah menggunakan JSNetworkX jadi saya tidak yakin bagaimana cara kerjanya.
Aric
@ EiyrioüvonKauyf: Inputnya sama seperti di Python, misalnya daftar daftar atau diktekan. Anda dapat membuat grafik dengan Python, mengonversinya menjadi daftar daftar dan mengubahnya menjadi JSON.
Felix Kling
Ya, pasti mudah. Contoh di sini sederhana dan indah: felix-kling.de/JSNetworkX/examples
Aric
1

Lihat:

Apakah ada pustaka grafik 3D interaktif yang bagus?

Jawaban yang diterima menyarankan program berikut, yang tampaknya memiliki pengikatan python: http://ubietylab.net/ubigraph/

Edit

Saya tidak yakin tentang interaktivitas NetworkX, tetapi Anda pasti dapat membuat grafik 3D. Setidaknya ada satu contoh di galeri:

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

Dan contoh lain di 'contoh'. Yang ini, bagaimanapun, mengharuskan Anda memiliki Mayavi.

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

jintan saru-
sumber
0

Saya punya contoh bagus untuk membuat diagram jaringan D3.js secara otomatis menggunakan Python di sini: http://brandonrose.org/ner2sna

Yang keren adalah Anda berakhir dengan HTML dan JS yang dibuat secara otomatis dan dapat menyematkan bagan D3 interaktif di buku catatan dengan IFrame

brandomr
sumber
0

Pustaka d3graphakan membangun grafik d3 yang diarahkan secara paksa dari dalam python. Anda dapat "merusak" jaringan berdasarkan bobot edge, dan mengarahkan kursor ke node untuk informasi selengkapnya. Klik dua kali pada node akan fokus pada node dan ujung-ujungnya yang terhubung.

pip install d3graph

Contoh:

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)

Contoh d3graph

Contoh interaktif dari kasus-titanic dapat ditemukan di sini: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases .html

pemberani
sumber