D3 in Jupyter

Brian Coffey

December 15, 2015
- San Francisco, CA

Jupyter and D3 have both become staples in the data science toolkit: Jupyter for interactive data analysis and D3 for interactive data visualization. There has recently been a growing array of options for using the two together - such as mpld3, bokeh, plotly and others - but these tools usually focus on the use case of a Python or R programmer who would rather not dig too far into JavaScript, and thus somewhat limit the otherwise immense flexibility available with D3. For those who want the full breadth of possibilities, there is another approach shown below. Be sure to play with the force graph!

# construct graph as a set of nodes and links between themn_nodes=30p_edge=0.05graph={"nodes":[],"links":[]}foriinrange(n_nodes):graph["nodes"].append({"name":"i"+str(i),"group":int(random.uniform(1,11))})foriinrange(n_nodes):forjinrange(n_nodes):ifrandom.uniform(0,1)<p_edgeandi!=j:graph["links"].append({"source":i,"target":j, "value":random.uniform(0.5,3)})

We have developed a short tutorial to walk users through the process of using D3 directly in Jupyter. The code is available in this repo, and the following video presentation and slides from the recent PyData NYC conference walk through the concepts and various examples.