Python-Äquivalent zu D3.js.

110

Kann jemand eine Python-Bibliothek empfehlen, die eine interaktive Grafikvisualisierung ermöglicht?

Ich möchte speziell so etwas wie d3.js, aber für pythonund im Idealfall wäre es auch 3D.

Ich habe angeschaut:

  • NetworkX - es werden nur MatplotlibDiagramme erstellt, und diese scheinen 2D zu sein. Ich habe keine Art von Interaktivität gesehen, wie eine, die d3.jsgibt, wie das Herumziehen von Knoten.
  • Grafik-Tool - Es erstellt nur 2D-Diagramme und verfügt über sehr langsame interaktive Diagramme.
Eiyrioü von Kauyf
quelle
1
Sie möchten ein Diagramm in networkx generieren und dann in d3.js bearbeiten, wenn Sie nach einer browserbasierten Version suchen.
kreativeitea
@kreativitea ok .... wie würde ich das im Idealfall tun: Grafikdaten (über API-Aufrufe in Python) -> Python (Maschinelles Lernen) -> Django / Something + D3.js (Visualisierung) -> Hübsche Bilder und Website :)
Eiyrioü von Kauyf
Ich denke, Sie können Vega Lite in Python implementieren. Schauen Sie sich das an und planen Sie es natürlich.
Noel Harris

Antworten:

74

Sie können d3py verwenden, ein Python-Modul, das XML-Seiten generiert, in die das Skript d3.js eingebettet ist. Zum Beispiel :

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
quelle
Arbeitete für mich, aber ich musste eine der Zeilen bearbeiten, um with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:. Ich habe das letzte Commit von d3py bei github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb überprüft.
7
Leider wird d3py nicht mehr aktiv entwickelt - Vincent ist das moderne Äquivalent (eine Python-Schnittstelle zu Vega / d3.js), aber die Antwort von Psychemedia unten (exportiere networkx nach json und rendere dann in d3.js) könnte die sauberste sein.
A.Wan
2
Versuchen Sie altair-viz.github.io - den Nachfolger von d3py und vincent. Siehe auch stackoverflow.com/a/49695472/179014 .
Asmaier
43

Plotly unterstützt interaktive 2D- und 3D-Grafiken. Diagramme werden mit D3.js gerendert und können mit einer Python-API , Matplotlib , ggplot für Python , Seaborn , Prettyplotlib und Pandas erstellt werden . Sie können Spuren zoomen, schwenken, ein- und ausschalten und Daten auf dem Hover anzeigen. Diagramme können in HTML, Apps, Dashboards und IPython-Notizbücher eingebettet werden. Unten sehen Sie ein Temperaturdiagramm, das die Interaktivität zeigt. Weitere Beispiele finden Sie in der Galerie der IPython Notebooks- Tutorials .

Geben Sie hier die Bildbeschreibung ein



Das Dokument enthält Beispiele für unterstützte Diagrammtypen und Codeausschnitte.



Geben Sie hier die Bildbeschreibung ein

Speziell für Ihre Frage können Sie auch interaktive Diagramme aus NetworkX erstellen.

Geben Sie hier die Bildbeschreibung ein

Für 3D-Diagramme mit Python können Sie 3D-Streu-, Linien- und Oberflächendiagramme erstellen, die ähnlich interaktiv sind. Diagramme werden mit WebGL gerendert. Sehen Sie sich beispielsweise ein 3D-Diagramm der britischen Swap-Raten an.



Geben Sie hier die Bildbeschreibung ein

Offenlegung: Ich bin im Plotly-Team.

Mateo Sanchez
quelle
9
Die Frage zielt eindeutig auf Graphen im Sinne von Knoten ab, die durch Kanten verbunden sind. Diese Antwort enthält unnötigerweise andere Visualisierungsfunktionen von plotly.
Lutz Büch
@ mateo-sanchez es ist sehr bedauerlich, dass Plotly beschlossen hat, alle akademischen und individuellen Abonnements zu kündigen, um sich auf Firmenkunden zu konzentrieren
Andreuccio
20

Hast du Vincent angeschaut? Vincent nimmt Python-Datenobjekte und konvertiert sie in die Vega-Visualisierungsgrammatik. Vega ist ein übergeordnetes Visualisierungstool, das auf D3 basiert. Im Vergleich zu D3py wurde das Vincent Repo kürzlich aktualisiert. Obwohl die Beispiele alle statisch D3 sind.

Mehr Info:


Die Grafiken können in Ipython angezeigt werden. Fügen Sie einfach diesen Code hinzu

vincent.core.initialize_notebook()

Oder geben Sie eine Ausgabe an JSON aus, wo Sie das JSON-Ausgabediagramm im Vega-Online-Editor ( http://trifacta.github.io/vega/editor/ ) anzeigen oder lokal auf Ihrem Python-Server anzeigen können. Weitere Informationen zum Anzeigen finden Sie unter dem obigen Pypi-Link.

Ich bin mir nicht sicher wann, aber das Pandas-Paket sollte irgendwann eine D3-Integration haben. http://pandas.pydata.org/developers.html

Bokeh ist eine Python-Visualisierungsbibliothek, die interaktive Visualisierung unterstützt. Das primäre Ausgabe-Backend ist HTML5 Canvas und verwendet das Client / Server-Modell.

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

sk8asd123
quelle
2
Vincent ist auf dem Weg nach draußen - es sieht so aus, als gäbe es einige Ersatzprodukte, aber ich bin mir nicht sicher, wie eng sie mit Ipython verbunden sein werden.
naught101
19

Ein Rezept, das ich verwendet habe (hier beschrieben: Co-Director-Netzwerkdatendateien in GEXF und JSON von OpenCorporates Data über Scraperwiki und networkx ), lautet wie folgt:

  • Generieren Sie eine Netzwerkdarstellung mit networkx
  • Exportieren Sie das Netzwerk als JSON-Datei
  • importieren , die JSON in zu d3.js . ( networkx kann sowohl die Baum- als auch die Diagramm- / Netzwerkdarstellungen exportieren , die d3.js importieren kann).

Der JSON-Exporter von networkx hat folgende Form:

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

Alternativ können Sie das Netzwerk als GEXF- XML-Datei exportieren und diese Darstellung dann in die Javascript-Visualisierungsbibliothek von sigma.js importieren .

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
quelle
16

Eine weitere Option ist Bokeh, das gerade auf Version 0.3 umgestellt wurde.

MrDrFenner
quelle
7

Für diejenigen, die pyd3 empfohlen haben , befindet es sich nicht mehr in der aktiven Entwicklung und weist Sie auf vincent hin . Vincent befindet sich ebenfalls nicht mehr in der aktiven Entwicklung und empfiehlt die Verwendung von Altair .

Wenn Sie also eine Python-D3 möchten, verwenden Sie Altair.

Wir s
quelle
5

Schauen Sie sich python-nvd3 an . Es ist ein Python-Wrapper für nvd3. Sieht cooler aus als d3.py und hat auch mehr Diagrammoptionen.

Richie
quelle
4

Ich würde vorschlagen, mpld3 zu verwenden, das D3js Javascript-Visualisierungen mit Matplotlib von Python kombiniert.

Die Installation und Verwendung ist sehr einfach und es gibt einige coole Plugins und interaktive Dinge.

http://mpld3.github.io/

RAM
quelle
3

Plotly kann ein paar coole Sachen für dich machenGeben Sie hier die Bildbeschreibung ein

https://plot.ly/

Erstellt hochgradig interaktive Diagramme, die mithilfe der Offline-API problemlos in die HTML-Seiten Ihres privaten Servers oder Ihrer Website eingebettet werden können.

Update: Ich bin mir sicher, dass die 3D-Plotfunktionen für 2D-Diagramme fantastisch sind. Danke

jax
quelle
2
Beachten Sie, dass dies eine Diagrammvisualisierung ist ... Die Frage fordert eine Diagrammvisualisierung an . (Ich schätze, dass diese Sätze häufig zusammengeführt werden!)
j6m8
2

Sie können Ihre Daten auch serialisieren und dann in D3.js visualisieren, wie hier beschrieben: Verwenden Sie Python und Pandas, um ein erzwungenes D3-Netzwerkdiagramm zu erstellen (es wird auch mit einem Jupyter-Notizbuch geliefert !).

Hier ist das Wesentliche. Sie serialisieren Ihre Grafikdaten in diesem Format:

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

Dann laden Sie die Daten mit d3.js:

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

Für die Routine drawGraphverweise ich Sie jedoch auf den Link.

Lutz Büch
quelle
Ich habe es jetzt bearbeitet, aber die drawGraph-Routine, die selbst drawLinks und drawNodes aufruft, nicht aufgenommen. Es wäre einfach zu umständlich und die Elemente sind nur im Kontext der gesamten HTML-Datei sinnvoll.
Lutz Büch
1

Es gibt eine interessante Portierung von NetworkX nach Javascript, die möglicherweise das tut, was Sie wollen. Siehe http://felix-kling.de/JSNetworkX/

Aric
quelle
Das könnte funktionieren. Können Sie mich bitte auf die Dokumentation verweisen? Wie würde ich ein Diagramm von Python in diese Javascript-Bibliothek ausgeben ...? Ich möchte es zuerst in Python generieren ... oder wie würde ich es laden?
Eiyrioü von Kauyf
Ich habe JSNetworkX noch nie verwendet, daher bin ich mir nicht sicher, wie es funktioniert.
Aric
@ EiyrioüvonKauyf: Die Eingabe ist dieselbe wie in Python, z. B. eine Liste von Listen oder ein Diktat von Diktaten. Sie können das Diagramm in Python erstellen, in eine Liste von Listen konvertieren und in JSON konvertieren.
Felix Kling
Ja, auf jeden Fall einfach. Die Beispiele hier sind einfach und schön: felix-kling.de/JSNetworkX/examples
Aric
1

Sehen:

Gibt es da draußen eine gute interaktive 3D-Grafikbibliothek?

Die akzeptierte Antwort schlägt das folgende Programm vor, das anscheinend Python-Bindungen aufweist: http://ubietylab.net/ubigraph/

Bearbeiten

Ich bin mir über die Interaktivität von NetworkX nicht sicher, aber Sie können definitiv 3D-Diagramme erstellen. In der Galerie gibt es mindestens ein Beispiel:

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

Und noch ein Beispiel in den "Beispielen". Dies setzt jedoch voraus, dass Sie Mayavi haben.

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

Wacholder-
quelle
0

Ich habe hier ein gutes Beispiel für die automatische Generierung von D3.js-Netzwerkdiagrammen mit Python: http://brandonrose.org/ner2sna

Das Coole ist, dass Sie am Ende automatisch generiertes HTML und JS haben und das interaktive D3-Diagramm mit einem IFrame in ein Notizbuch einbetten können

brandomr
quelle
0

Die Bibliothek erstellt d3graphaus Python einen erzwungenen d3-Graphen. Sie können das Netzwerk basierend auf dem Kantengewicht "unterbrechen" und mit der Maus über die Knoten fahren, um weitere Informationen zu erhalten. Ein Doppelklick auf einen Knoten konzentriert sich auf den Knoten und seine verbundenen Kanten.

pip install d3graph

Beispiel:

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)

Beispiele für d3graph

Ein interaktives Beispiel aus dem Titanic-Fall finden Sie hier: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases .html

erdogant
quelle