Multiple Simple D3 Examples using d3_lib.py

This notebook demonstrates the use of single-line calls to D3 visualizations via the simple d3_lib.py file and referenced css and js files.

Configuration for D3



In [1]:

    
from IPython.core.display import HTML
import d3_lib



In [2]:

    
HTML(d3_lib.set_styles(['basic_axis','basic_line','basic_scatter','force_directed_graph','day-hr-heatmap']))









    Out[2]:



In [3]:

    
HTML('<script src="lib/d3/d3.min.js"></script>')









    Out[3]:

Line plot



In [4]:

    
import pandas as pd
import random
random.seed(42)



In [5]:

    
data = []
for i in range(20):
    data.append({'x': i, 'y': random.uniform(0,1), 'c': int(random.uniform(0,3))})

Based on http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5 :



In [6]:

    
HTML(d3_lib.draw_graph('basic_line',{'data': data}))









    Out[6]:

Scatterplot with same data

Based on http://bl.ocks.org/mbostock/3887118 :



In [7]:

    
HTML(d3_lib.draw_graph('basic_scatter',{'data': data}))









    Out[7]:

Graph visualization

Based on http://bl.ocks.org/mbostock/4062045



In [8]:

    
n_nodes = 30
p_edge = 0.05
graph = {"nodes": [], "links": []}
for i in range(n_nodes):
    graph["nodes"].append( {"name": "i" + str(i), "group": int(random.uniform(1,11))} )
for i in range(n_nodes):
    for j in range(n_nodes):
        if random.uniform(0,1) < p_edge:
            graph["links"].append( {"source": i, "target": j, "value": random.uniform(0.5,3)} )



In [9]:

    
HTML(d3_lib.draw_graph('force_directed_graph',{'data': graph}))









    Out[9]:

Day-Hour heatmap

Based on http://bl.ocks.org/tjdecke/5558084



In [10]:

    
data = []
for d in range(1,8):
    for h in range(1,25):
        data.append({'day': d, 'hour': h, 'value': int(random.gauss(0,100))})



In [11]:

    
HTML(d3_lib.draw_graph('day-hr-heatmap',{'data': data}))









    Out[11]: