bob baxley

Python D3 Net Viz

I have dabbled with d3js for a while, and I am a junkie for the visualizations that the New York Times released that are written using d3js. I recently did a project with Anidata that involved creating, manipulating, analyzing, and visualizing network graphs in python (more on that in a future post).

NetworkX is a great tool for doing all of these things and I started the project by plotting with NetworkX. The project culminated in a presentation and I felt that the impact on the audience of the result was less compelling with a static plot from NetworkX. Inspired by some Notebook hacking that I’ve been exposed to by Tony Fast and Nicholas Bollweg did, I decided to have a go at embedding d3js visualizations in a Jupyter Notebook.

My first attempt was based on this example, which, in retrospect is a pretty big hack. But it worked as a first pass.

A month or so later, I was looking for a way to integrated Google-style motion charts in a Jupyter Notebook and I found the motionchart package that was based on a javascript project called SOCR HTML5 Motion Chart. Seeing the code in the motionchart package was an epiphany for me as it was a straightforward wrapper around a javascript code base with nice utility functions to export to html, the clipboard, or directly into a Notebook cell.


I used motionchart as a template to create my own wrapper around one of my favorite d3 visualizations: Force-Directed Graph. My package is called pyd3netviz and is available from pip via

pip install pyd3netviz

There are a couple examples in a Notebook in the repo.


from networkx import random_geometric_graph
from pyd3netviz import ForceChart


fc =ForceChart(G,charge=-100,link_distance=50,width=590)

Source Notebook File