Equivalente en Python de D3.js

110

¿Alguien puede recomendar una biblioteca de Python que pueda realizar una visualización interactiva de gráficos?

Específicamente, quiero algo como d3.js, pero pythonidealmente también sería 3D.

He mirado:

  • NetworkX : solo hace Matplotlibgráficos y esos parecen ser 2D. No vi ningún tipo de interactividad, como una que d3.jsda, como tirar de los nodos.
  • Graph-tool : solo hace gráficos 2D y tiene gráficos interactivos muy lentos .
Eiyrioü von Kauyf
fuente
1
Debería generar un gráfico en networkx y luego manipularlo en d3.js, si está buscando una versión basada en navegador.
kreativitea
@kreativitea ok .... ¿cómo haría eso oo idealmente: Graph Data (a través de llamadas API en Python) -> Python (Machine Learning Stuffs) -> Django / Something + D3.js (visualización) -> Imágenes bonitas y sitio web :)
Eiyrioü von Kauyf
Creo que puedes implementar vega lite en python. Mira esto y trama, por supuesto.
Noel Harris

Respuestas:

74

Puede usar d3py, un módulo de Python que genera páginas xml que incorporan el script d3.js. Por ejemplo :

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
fuente
Funcionó para mí, pero tuve que editar una de las líneas a with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:. Revisé la última confirmación de d3py en github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba)
xb.
7
Desafortunadamente, d3py ya no se está desarrollando activamente: Vincent es el equivalente moderno (una interfaz de Python a Vega / d3.js) pero la respuesta de psychemedia a continuación (exportar networkx a json y luego renderizar en d3.js) podría ser la más limpia.
A.Wan
2
Prueba altair-viz.github.io , el sucesor de d3py y vincent. Consulte también stackoverflow.com/a/49695472/179014 .
asmaier
43

Plotly admite gráficos interactivos 2D y 3D. Los gráficos se procesan con D3.js y se pueden crear con una API de Python , matplotlib , ggplot para Python , Seaborn , prettyplotlib y pandas . Puede hacer zoom, desplazarse, activar y desactivar las trazas y ver los datos en el desplazamiento. Los gráficos se pueden incrustar en HTML, aplicaciones, paneles y portátiles IPython. A continuación se muestra un gráfico de temperatura que muestra la interactividad. Consulte la galería de tutoriales de IPython Notebooks para obtener más ejemplos.

ingrese la descripción de la imagen aquí



Los documentos proporcionan ejemplos de tipos de gráficos y fragmentos de código admitidos.



ingrese la descripción de la imagen aquí

Específicamente para su pregunta, también puede hacer gráficos interactivos desde NetworkX.

ingrese la descripción de la imagen aquí

Para el trazado 3D con Python, puede realizar diagramas de dispersión, líneas y superficies 3D que sean igualmente interactivos. Los gráficos se renderizan con WebGL. Por ejemplo, consulte un gráfico 3D de las tasas de swap del Reino Unido.



ingrese la descripción de la imagen aquí

Divulgación: estoy en el equipo de Plotly.

Mateo Sánchez
fuente
9
Claramente, la pregunta apunta a gráficos en el sentido de nodos conectados por bordes. Esta respuesta incluye innecesariamente otras capacidades de visualización de plotly.
Lutz Büch
@ mateo-sanchez es muy desafortunado que Plotly haya decidido cancelar todas las suscripciones académicas e individuales para enfocarse en clientes corporativos
Andreuccio
20

¿Has mirado a Vincent? Vincent toma objetos de datos de Python y los convierte a la gramática de visualización Vega. Vega es una herramienta de visualización de nivel superior construida sobre D3. En comparación con D3py, el repositorio de Vincent se ha actualizado más recientemente. Aunque los ejemplos son todos estáticos, D3.

más información:


Los gráficos se pueden ver en Ipython, solo agregue este código

vincent.core.initialize_notebook()

O salida a JSON donde puede ver el gráfico de salida JSON en el editor en línea de Vega ( http://trifacta.github.io/vega/editor/ ) o verlos en su servidor Python localmente. Puede encontrar más información sobre la visualización en el enlace de pypi anterior.

No estoy seguro de cuándo, pero el paquete Pandas debería tener integración D3 en algún momento. http://pandas.pydata.org/developers.html

Bokeh es una biblioteca de visualización de Python que admite visualización interactiva. Su backend de salida principal es HTML5 Canvas y utiliza el modelo cliente / servidor.

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

sk8asd123
fuente
2
Vincent está saliendo , parece que hay algunos reemplazos, pero no estoy seguro de cuán estrechamente relacionados con ipython estarán ..
naught101
19

Una receta que he usado (descrita aquí: Co-Director Network Data Files en GEXF y JSON de OpenCorporates Data a través de Scraperwiki y networkx ) se ejecuta de la siguiente manera:

  • generar una representación de red usando networkx
  • exportar la red como un archivo JSON
  • importar que a JSON en d3.js . ( networkx puede exportar tanto el árbol como las representaciones de gráficos / redes que d3.js puede importar).

El exportador JSON de networkx tiene la forma:

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

Alternativamente, puede exportar la red como un archivo XML GEXF y luego importar esta representación en la biblioteca de visualización de 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)
psiquemedia
fuente
16

Otra opción es el bokeh que acaba de pasar a la versión 0.3.

MrDrFenner
fuente
7

Para aquellos que recomendaron pyd3 , ya no está en desarrollo activo y le indica a Vincent . Vincent ya no se encuentra en desarrollo activo y recomienda usar altair .

Entonces, si quieres un pythonic d3, usa altair.

Wes
fuente
5

Consulte python-nvd3 . Es una envoltura de Python para nvd3. Se ve mejor que d3.py y también tiene más opciones de gráficos.

Richie
fuente
4

Sugeriría usar mpld3, que combina visualizaciones de javascript D3js con matplotlib de python.

La instalación y el uso es realmente simple y tiene algunos complementos interesantes y elementos interactivos.

http://mpld3.github.io/

RAM
fuente
3

Plotly puede hacer algunas cosas interesantes por tiingrese la descripción de la imagen aquí

https://plot.ly/

Produce gráficos altamente interactivos que se pueden incrustar fácilmente dentro de las páginas HTML para su servidor privado o sitio web utilizando su API fuera de línea.

Actualización: estoy seguro de sus capacidades de trazado en 3D, ya que los gráficos en 2D son increíbles Gracias

jax
fuente
2
Tenga en cuenta que esto es visualización de gráficos ... La pregunta solicita visualización de gráficos . (¡Aprecio que estas frases se combinan comúnmente!)
j6m8
2

También puede optar por serializar sus datos y luego visualizarlos en D3.js, como se hace aquí: Use Python & Pandas para crear un diagrama de red dirigido por la fuerza D3 (¡también viene con un cuaderno jupyter !)

Aquí está la esencia. Serializa los datos de su gráfico en este formato:

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

Luego carga los datos con d3.js:

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

drawGraphSin embargo, para la rutina les remito al enlace.

Lutz Büch
fuente
Lo edité ahora, pero no incluí la rutina drawGraph que a su vez llama a drawLinks y drawNodes. Sería demasiado engorroso y los elementos solo tienen sentido en el contexto de todo el archivo html.
Lutz Büch
1

Hay un puerto interesante de NetworkX a Javascript que puede hacer lo que quieras. Ver http://felix-kling.de/JSNetworkX/

Aric
fuente
esto podría funcionar ... ¿puede remitirme a la documentación por favor? ¿Cómo generaría un gráfico de Python en esta biblioteca de JavaScript ...? Quiero generarlo en python primero ... ¿o cómo lo cargaría?
Eiyrioü von Kauyf
De hecho, nunca he usado JSNetworkX, así que no estoy seguro de cómo funciona.
Aric
@ EiyrioüvonKauyf: La entrada es la misma que en Python, por ejemplo, una lista de listas o un dictado de dictados. Puede crear el gráfico en Python, convertirlo en una lista de listas y convertirlo a JSON.
Felix Kling
Sí, definitivamente fácil. Los ejemplos aquí son simples y hermosos: felix-kling.de/JSNetworkX/examples
Aric
1

Ver:

¿Existe una buena biblioteca de gráficos 3D interactiva?

La respuesta aceptada sugiere el siguiente programa, que aparentemente tiene enlaces de Python: http://ubietylab.net/ubigraph/

Editar

No estoy seguro de la interactividad de NetworkX, pero definitivamente puedes hacer gráficos en 3D. Hay al menos un ejemplo en la galería:

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

Y otro ejemplo en los 'ejemplos'. Este, sin embargo, requiere que tengas Mayavi.

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

enebro-
fuente
0

Tengo un buen ejemplo de generación automática de diagramas de red D3.js usando Python aquí: http://brandonrose.org/ner2sna

Lo bueno es que terminas con HTML y JS autogenerados y puedes incrustar el gráfico D3 interactivo en un cuaderno con un IFrame

brandomr
fuente
0

La biblioteca d3graphconstruirá un gráfico d3 dirigido por la fuerza desde dentro de Python. Puede "romper" la red en función del peso del borde y pasar el cursor sobre los nodos para obtener más información. Hacer doble clic en un nodo se enfocará en el nodo y sus bordes conectados.

pip install d3graph

Ejemplo:

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)

Ejemplos de d3graph

Se puede encontrar un ejemplo interactivo del caso titanic aquí: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases .html

erdogante
fuente