Python équivalent de D3.js


110

Quelqu'un peut-il recommander une bibliothèque Python capable de visualiser des graphiques interactifs ?

Je veux spécifiquement quelque chose comme d3.js, mais pythonidéalement, ce serait aussi la 3D.

J'ai regardé:

  • NetworkX - il ne fait que des Matplotlibgraphiques et ceux-ci semblent être en 2D. Je n'ai vu aucune sorte d'interactivité, comme celle qui d3.jsdonne, comme tirer des nœuds.
  • graph-tool - il ne fait que des tracés 2D et a des graphiques interactifs très lents .

1
Vous voudrez générer un graphique dans networkx puis manipuler dans d3.js, si vous recherchez une version basée sur un navigateur.
kreativitea

@kreativitea ok .... comment ferais-je ça oo idéalement: Graph Data (via des appels d'API en Python) -> Python (Machine Learning Stuffs) -> Django / Something + D3.js (visualisation) -> Jolies images et site Web :)
Eiyrioü von Kauyf

Je pense que vous pouvez implémenter vega lite en python. Vérifiez ceci et complotement bien sûr.
Noel Harris le

Réponses:


74

Vous pouvez utiliser d3py un module python qui génère des pages xml intégrant le script d3.js. Par exemple :

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

Cela a fonctionné pour moi, mais j'ai dû modifier l'une des lignes with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:. J'ai vérifié le dernier commit de d3py sur github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb.

7
Malheureusement, d3py n'est plus activement développé - Vincent est l'équivalent moderne (une interface Python vers Vega / d3.js) mais la réponse de psychemedia ci-dessous (exporter networkx vers json puis restituer dans d3.js) pourrait être la plus propre.
A.Wan

2
Essayez altair-viz.github.io - le successeur de d3py et vincent. Voir également stackoverflow.com/a/49695472/179014 .
asmaier

43

Plotly prend en charge la représentation graphique 2D et 3D interactive. Les graphiques sont rendus avec D3.js et peuvent être créés avec une API Python , matplotlib , ggplot pour Python , Seaborn , prettyplotlib et pandas . Vous pouvez zoomer, faire un panoramique, activer et désactiver les traces et voir les données en survol. Les tracés peuvent être intégrés dans du HTML, des applications, des tableaux de bord et des blocs-notes IPython. Vous trouverez ci-dessous un graphique de température montrant l'interactivité. Consultez la galerie de didacticiels IPython Notebooks pour plus d'exemples.

entrez la description de l'image ici



La documentation fournit des exemples de types de tracés et d'extraits de code pris en charge.



entrez la description de l'image ici

Pour répondre spécifiquement à votre question, vous pouvez également créer des graphiques interactifs à partir de NetworkX.

entrez la description de l'image ici

Pour le traçage 3D avec Python, vous pouvez créer des tracés 3D de dispersion, de ligne et de surface qui sont également interactifs. Les tracés sont rendus avec WebGL. Par exemple, consultez un graphique 3D des taux de swap britanniques.



entrez la description de l'image ici

Divulgation: je fais partie de l'équipe Plotly.


9
Il est clair que la question vise les graphes au sens de nœuds reliés par des arêtes. Cette réponse inclut inutilement d'autres capacités de visualisation de l'intrigue.
Lutz Büch

@ mateo-sanchez, il est très malheureux que Plotly ait décidé de mettre fin à tous les abonnements académiques et individuels pour se concentrer sur les entreprises clientes
Andreuccio

20

Avez-vous regardé Vincent? Vincent prend des objets de données Python et les convertit en grammaire de visualisation Vega. Vega est un outil de visualisation de plus haut niveau construit sur D3. Par rapport à D3py, le repo vincent a été mis à jour plus récemment. Bien que les exemples soient tous statiques D3.

Plus d'informations:


Les graphiques peuvent être visualisés en Ipython, il suffit d'ajouter ce code

vincent.core.initialize_notebook()

Ou sortie vers JSON où vous pouvez afficher le graphique de sortie JSON dans l'éditeur en ligne Vega ( http://trifacta.github.io/vega/editor/ ) ou les afficher localement sur votre serveur Python. Plus d'informations sur la visualisation peuvent être trouvées dans le lien pypi ci-dessus.

Je ne sais pas quand, mais le package Pandas devrait avoir une intégration D3 à un moment donné. http://pandas.pydata.org/developers.html

Bokeh est une bibliothèque de visualisation Python qui prend en charge la visualisation interactive. Son principal moteur de sortie est HTML5 Canvas et utilise le modèle client / serveur.

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


2
Vincent est sur le point de sortir - on dirait qu'il y a des remplaçants, mais je ne sais pas à quel point ils seront étroitement liés à ipython ..
rien101

19

Une recette que j'ai utilisée (décrite ici: Co-Director Network Data Files in GEXF and JSON from OpenCorporates Data via Scraperwiki et networkx ) fonctionne comme suit:

  • générer une représentation de réseau à l'aide de networkx
  • exporter le réseau sous forme de fichier JSON
  • importer ce JSON dans la d3.js . ( networkx peut exporter à la fois l'arborescence et les représentations graphiques / réseaux que d3.js peut importer).

L' exportateur JSON networkx prend la forme:

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

Vous pouvez également exporter le réseau sous forme de fichier XML GEXF , puis importer cette représentation dans la bibliothèque de visualisation 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

Pour ceux qui ont recommandé pyd3 , il n'est plus en développement actif et vous renvoie à Vincent . vincent n'est également plus en développement actif et recommande d'utiliser altair .

Donc, si vous voulez un d3 pythonique, utilisez altair.



5

Découvrez python-nvd3 . C'est un wrapper python pour nvd3. Semble plus cool que d3.py et a également plus d'options de graphique.


4

Je suggérerais d'utiliser mpld3 qui combine les visualisations javascript D3js avec matplotlib de python.

L'installation et l'utilisation sont vraiment simples et il y a des plugins sympas et des trucs interactifs.

http://mpld3.github.io/


3

Plotly peut faire des trucs sympas pour vousentrez la description de l'image ici

https://plot.ly/

Produit des graphiques hautement interactifs qui peuvent être facilement intégrés aux pages HTML de votre serveur ou site Web privé à l'aide de son API hors ligne.

Mise à jour: Je suis sûr de ses capacités de traçage 3D, pour les graphiques 2D, c'est génial Merci


2
Notez qu'il s'agit d' une visualisation graphique ... La question demande une visualisation graphique . (J'apprécie que ces phrases soient souvent confondues!)
j6m8

2

Vous pouvez également choisir de sérialiser vos données, puis de les visualiser dans D3.js, comme cela est fait ici: Utilisez Python & Pandas pour créer un diagramme de réseau dirigé par la force D3 (il est également livré avec un notebook Jupyter !)

Voici l'essentiel. Vous sérialisez vos données graphiques dans ce 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()

Ensuite, vous chargez les données avec d3.js:

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

Pour la routine, drawGraphje vous renvoie cependant au lien.


Je l'ai édité maintenant, mais je n'ai pas inclus la routine drawGraph qui elle-même appelle drawLinks et drawNodes. Ce serait tout simplement trop encombrant et les éléments n'ont de sens que dans le contexte de l'ensemble du fichier html.
Lutz Büch

1

Il existe un portage intéressant de NetworkX vers Javascript qui pourrait faire ce que vous voulez. Voir http://felix-kling.de/JSNetworkX/


cela pourrait fonctionner .... pouvez-vous me référer à la documentation s'il vous plaît? Comment pourrais-je générer un graphique de python dans cette bibliothèque javascript ...? Je veux d'abord le générer en python ... ou comment le chargerais-je?
Eiyrioü von Kauyf

Je n'ai jamais utilisé JSNetworkX, donc je ne suis pas sûr de son fonctionnement.
Aric

@ EiyrioüvonKauyf: L'entrée est la même qu'en Python, par exemple une liste de listes ou un dict de dictés. Vous pouvez créer le graphique en Python, le convertir en une liste de listes et le convertir en JSON.
Felix Kling

Oui, vraiment facile. Les exemples ici sont simples et beaux: felix-kling.de/JSNetworkX/examples
Aric

1

Voir:

Existe-t-il une bonne bibliothèque de graphiques 3D interactifs?

La réponse acceptée suggère le programme suivant, qui a apparemment des liaisons python: http://ubietylab.net/ubigraph/

Éditer

Je ne suis pas sûr de l'interactivité de NetworkX, mais vous pouvez certainement créer des graphiques 3D. Il y a au moins un exemple dans la galerie:

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

Et un autre exemple dans les «exemples». Celui-ci, cependant, nécessite que vous ayez Mayavi.

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


0

J'ai un bon exemple de génération automatique de diagrammes de réseau D3.js en utilisant Python ici: http://brandonrose.org/ner2sna

Ce qui est cool, c'est que vous vous retrouvez avec du HTML et du JS générés automatiquement et que vous pouvez intégrer le graphique D3 interactif dans un cahier avec un IFrame


0

La bibliothèque d3graphconstruira un d3-graph dirigé par la force à partir de python. Vous pouvez "casser" le réseau en fonction de l'épaisseur des bords et survoler les nœuds pour plus d'informations. Double-cliquez sur un nœud pour se concentrer sur le nœud et ses bords connectés.

pip install d3graph

Exemple:

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)

Exemples de d3graph

Un exemple interactif du cas titanique peut être trouvé ici: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases .html

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.