Python equivalent of D3.js

Question

Can anyone recommend a Python library that can do interactive graph visualization?

I specifically want something like d3.js but for python and ideally it would be 3D as well.

I have looked at:

NetworkX - it only does Matplotlib plots and those seem to be 2D. I didn't see any sort of interactiveness, like one that d3.js gives, such as pulling nodes around.
graph-tool - it does only 2D plots and has very slow interactive graphs.

You would want to generate a graph in networkx and then manipulate in d3.js, if you're looking for a browser based version. — kreativitea, Oct 19 '12 at 15:45
@kreativitea ok .... how would I do that o-o ideally: Graph Data (via API Calls in Python) -> Python (Machine Learning Stuffs) -> Django / Something + D3.js (visualization) -> Pretty pictures and website :) — Eiyrioü von Kauyf, Oct 21 '12 at 20:50
I think you can implement vega lite in python. Check this out and plotly of course. — Noel Harris, Apr 06 '20 at 20:38

score 78 · Answer 1 · edited Dec 01 '13 at 20:34

78

You could use d3py a python module that generate xml pages embedding d3.js script. For example :

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

edited Dec 01 '13 at 20:34

Eric O. Lebigot

91,433
48
218
260

answered Jan 05 '13 at 23:59

Vincent Agnus

1,263
11
11

Worked for me, but I had to edit one of the lines to `with d3py.NetworkXFigure(G, width=500, height=500, host="localhost") as p:`. I checked out the latest commit of _d3py_ at github (SHA: 4e92a90f4003370bc086e0f57b19fca1bd4e8fba) – xb. Jan 04 '14 at 18:57
8

Unfortunately d3py isn't being actively developed any more - Vincent is the modern equivalent (a Python interface to Vega/d3.js) but psychemedia's answer below (export networkx to json then render in d3.js) might be the cleanest. – A.Wan Nov 20 '14 at 00:27
2

Try https://altair-viz.github.io/ - the successor of d3py and vincent. See also https://stackoverflow.com/a/49695472/179014 . – asmaier Jan 23 '19 at 13:42

Mateo Sanchez · Answer 2 · 2015-06-03T08:48:34.097

52

Plotly supports interactive 2D and 3D graphing. Graphs are rendered with D3.js and can be created with a Python API, matplotlib, ggplot for Python, Seaborn, prettyplotlib, and pandas. You can zoom, pan, toggle traces on and off, and see data on the hover. Plots can be embedded in HTML, apps, dashboards, and IPython Notebooks. Below is a temperature graph showing interactivity. See the gallery of IPython Notebooks tutorials for more examples.

enter image description here

The docs provides examples of supported plot types and code snippets.

enter image description here

Specifically to your question, you can also make interactive plots from NetworkX.

For 3D plotting with Python, you can make 3D scatter, line, and surface plots that are similarly interactive. Plots are rendered with WebGL. For example, see a 3D graph of UK Swap rates.

enter image description here

Disclosure: I'm on the Plotly team.

edited Jun 03 '15 at 08:48

answered Nov 06 '13 at 02:13

Mateo Sanchez

1,604
15
20

14

Clearly the question aims at **graphs** in the sense of nodes connected by edges. This answer needlessly includes other visualization capabilities of plotly. – Lutz Büch Jul 23 '18 at 05:47
4

@mateo-sanchez it is very unfortunate that Plotly has decided to terminate all academic and individual subscriptions to focus on corporate clients – Andreuccio Aug 20 '19 at 12:41

sk8asd123 · Answer 3 · 2013-11-20T17:44:37.977

Have you looked at vincent? Vincent takes Python data objects and converts them to Vega visualization grammar. Vega is a higher-level visualization tool built on top of D3. As compared to D3py, the vincent repo has been updated more recently. Though the examples are all static D3.

more info:

The graphs can be viewed in Ipython, just add this code

vincent.core.initialize_notebook()

Or output to JSON where you can view the JSON output graph in the Vega online editor (http://trifacta.github.io/vega/editor/) or view them on your Python server locally. More info on viewing can be found in the pypi link above.

Not sure when, but the Pandas package should have D3 integration at some point. http://pandas.pydata.org/developers.html

Bokeh is a Python visualization library that supports interactive visualization. Its primary output backend is HTML5 Canvas and uses client/server model.

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

[Vincent is on the way out](https://github.com/wrobstory/vincent#status) - looks like there are some replacements, but I'm not sure how closely tied to ipython they will be.. — naught101, Aug 13 '15 at 06:48

score 20 · Answer 4 · answered Mar 16 '13 at 23:56

One recipe that I have used (described here: Co-Director Network Data Files in GEXF and JSON from OpenCorporates Data via Scraperwiki and networkx ) runs as follows:

generate a network representation using networkx
export the network as a JSON file
import that JSON into to d3.js. (networkx can export both the tree and graph/network representations that d3.js can import).

The networkx JSON exporter takes the form:

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

Alternatively you can export the network as a GEXF XML file and then import this representation into the sigma.js Javascript visualisation library.

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)

score 15 · Answer 5 · answered Nov 21 '13 at 18:37

15

Another option is bokeh which just went to version 0.3.

answered Nov 21 '13 at 18:37

MrDrFenner

1,090
11
19

score 11 · Answer 6 · answered Nov 11 '16 at 14:54

11

For those who recommended pyd3, it is no longer under active development and points you to vincent. vincent is also no longer under active development and recommends using altair.

So if you want a pythonic d3, use altair.

answered Nov 11 '16 at 14:54

Wes

648
7
14

asmaier · Answer 7 · 2019-01-23T13:39:09.547

8

Try https://altair-viz.github.io/ - the successor of d3py and vincent. See also

edited Jan 23 '19 at 13:39

answered Apr 06 '18 at 14:50

asmaier

11,132
11
76
103

score 5 · Answer 8 · answered Aug 23 '13 at 13:07

5

Check out python-nvd3. It is a python wrapper for nvd3. Looks cooler than d3.py and also has more chart options.

answered Aug 23 '13 at 13:07

richie

17,568
19
51
70

score 5 · Answer 9 · answered Jun 23 '20 at 06:53

The library d3graph will build a force-directed d3-graph from within python. You can "break" the network based on the edge weight, and hover over the nodes for more information. Double click on a node will focus on the node and its connected edges.

pip install d3graph

Example:

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)

Interactive example from the titanic-case can be found here: https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases.html

https://pypi.org/project/d3graph/, https://github.com/erdogant/d3graph/, https://erdogant.github.io/d3graph/pages/html/index.html, https://towardsdatascience.com/creating-beautiful-stand-alone-interactive-d3-charts-with-python-804117cb95a7 — intltechventures, Oct 02 '22 at 01:30

score 4 · Answer 10 · answered Feb 09 '15 at 11:45

4

I would suggest using mpld3 which combines D3js javascript visualizations with matplotlib of python.

The installation and usage is really simple and it has some cool plugins and interactive stuffs.

http://mpld3.github.io/

answered Feb 09 '15 at 11:45

Ram

634
1
9
22

score 4 · Answer 11 · answered May 17 '17 at 05:26

4

Plotly can do some cool stuffs for you

https://plot.ly/

Produces highly interactive graphs that can be easily embedded withing the HTML pages for your private server or website using its off line API.

Update: I am note sure about its 3D plotting capabilities, for 2D graphs is awesome Thanks

answered May 17 '17 at 05:26

jax

3,927
7
41
70

3

Note that this is _chart_ visualization... The question requests _graph_ visualization. (I appreciate these phrases are commonly conflated!) – j6m8 Mar 03 '18 at 22:18

score 2 · Answer 12 · edited Jun 14 '18 at 21:59

You can also choose to serialize your data and then visualize it in D3.js, as done here: Use Python & Pandas to Create a D3 Force Directed Network Diagram (It comes with a jupyter notebook as well!)

Here is the gist. You serialize your graph data in this 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()

Then you load the data in with d3.js:

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

For the routine drawGraph I refer you to the link, however.

I edited it now, but I didn't include the drawGraph routine which itself calls drawLinks and drawNodes. It would just be too cumbersome and the elements only make sense in the context of the whole html file. — Lutz Büch, Jun 13 '18 at 10:18

score 1 · Answer 13 · answered Oct 24 '12 at 22:31

1

There is an interesting port of NetworkX to Javascript that might do what you want. See http://felix-kling.de/JSNetworkX/

answered Oct 24 '12 at 22:31

Aric

24,511
5
78
77

this might work.... can you refer me to documentation please? How would I output a graph from python into it this javascript library...? I want to generate it in python first ... or how would i load it? – Eiyrioü von Kauyf Oct 25 '12 at 01:57
I've actually never used JSNetworkX so I'm not sure how it works. – Aric Oct 25 '12 at 16:35
@EiyrioüvonKauyf: The input is the same as in Python, e.g. a list of lists or a dict of dicts. You could build the graph in Python, convert it to a list of lists and convert it to JSON. – Felix Kling Oct 28 '12 at 04:00
Yes, definitely easy. The examples here are simple and beautiful:http://felix-kling.de/JSNetworkX/examples/ – Aric Oct 29 '12 at 21:58

score 0 · Answer 14 · answered Jul 11 '17 at 17:04

I've got a good example of automatically generating D3.js network diagrams using Python here: http://brandonrose.org/ner2sna

The cool thing is that you end up with auto-generated HTML and JS and can embed the interactive D3 chart in a notebook with an IFrame

Python equivalent of D3.js

14 Answers14

Linked