<SYSTEM_TASK:>
Given the following text description, write Python code to implement the functionality described below step by step
<END_TASK>
<USER_TASK:>
Description:
 IPython & D3
Let's start with a few techniques for working with data in ipython and then build a d3 network graph.
Step1:  JS with IPython?
The nice thing about IPython is that we can write in almost any lanaguage. For example, we can use javascript below and pull in the D3 library.
Step2:  Python data | D3 Viz
A basic method is to serialze your results and then render html that pulls in the data. In this example, we save a json file and then load the html doc in an IFrame. We're now using D3 in ipython!  
The example below is adapted from
Step3:  Passing data from IPython to JS
Let's create some random numbers and render them in js (see the stackoverflow explanation and discussion).
Step6:  Passing data from JS to IPython
We can also interact with js to define python variables (see this example).
Step7:  Click "Set Value" then run the cell below.
Step8:  Custom D3 module.
Now we're having fun. The simplicity of this process wins. We can pass data to javascript via a module called visualize that contains an attribute plot_circle, which uses jinja to render our js template. The advantage of using jinja to read our html is apparent
<ASSISTANT_TASK:>
Python Code:
# import requirments 
from IPython.display import Image
from IPython.display import display
from IPython.display import HTML
from datetime import *
import json
from copy import *
from pprint import *
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import json
from ggplot import *
import networkx as nx
from networkx.readwrite import json_graph
#from __future__ import http_server
from BaseHTTPServer import BaseHTTPRequestHandler
from IPython.display import IFrame
import rpy2
%load_ext rpy2.ipython
%R require("ggplot2")
% matplotlib inline
randn = np.random.randn
Explanation: IPython & D3
Let's start with a few techniques for working with data in ipython and then build a d3 network graph.
End of explanation
%%javascript
require.config({
    paths: {
        //d3: "http://d3js.org/d3.v3.min" //<-- url 
        d3: 'd3/d3.min.js' //<-- local path 
    }
});
Explanation: JS with IPython?
The nice thing about IPython is that we can write in almost any lanaguage. For example, we can use javascript below and pull in the D3 library.
End of explanation
import json
import networkx as nx
from networkx.readwrite import json_graph
from IPython.display import IFrame
G = nx.barbell_graph(6,3)
# this d3 example uses the name attribute for the mouse-hover value,
# so add a name to each node
for n in G:
    G.node[n]['name'] = n
# write json formatted data
d = json_graph.node_link_data(G) # node-link format to serialize
# write json
json.dump(d, open('force/force.json','w'))
# render html inline
IFrame('force/force.html', width=700, height=350)
#print('Or copy all files in force/ to webserver and load force/force.html')
Explanation: Python data | D3 Viz
A basic method is to serialze your results and then render html that pulls in the data. In this example, we save a json file and then load the html doc in an IFrame. We're now using D3 in ipython!  
The example below is adapted from: 
* Hagberg, A & Schult, D. & Swart, P. Networkx (2011). Github repository, https://github.com/networkx/networkx/tree/master/examples/javascript/force
End of explanation
from IPython.display import Javascript
import numpy as np
mu, sig = 0.05, 0.2
rnd = np.random.normal(loc=mu, scale=sig, size=4)
## Use the variable rnd above in Javascript:
javascript = 'element.append("{}");'.format(str(rnd))
Javascript(javascript)
Explanation: Passing data from IPython to JS
Let's create some random numbers and render them in js (see the stackoverflow explanation and discussion).
End of explanation
from IPython.display import HTML
input_form = 
<div style="background-color:gainsboro; border:solid black; width:300px; padding:20px;">
Name: <input type="text" id="var_name" value="foo"><br>
Value: <input type="text" id="var_value" value="bar"><br>
<button onclick="set_value()">Set Value</button>
</div>
javascript = 
<script type="text/Javascript">
    function set_value(){
        var var_name = document.getElementById('var_name').value;
        var var_value = document.getElementById('var_value').value;
        var command = var_name + " = '" + var_value + "'";
        console.log("Executing Command: " + command);
        
        var kernel = IPython.notebook.kernel;
        kernel.execute(command);
    }
</script>
HTML(input_form + javascript)
Explanation: Passing data from JS to IPython
We can also interact with js to define python variables (see this example).
End of explanation
print foo
Explanation: Click "Set Value" then run the cell below.
End of explanation
from pythonD3 import visualize
data = [{'x': 10, 'y': 20, 'r': 15, 'name': 'circle one'}, 
        {'x': 40, 'y': 40, 'r': 5, 'name': 'circle two'},
        {'x': 20, 'y': 30, 'r': 8, 'name': 'circle three'},
        {'x': 25, 'y': 10, 'r': 10, 'name': 'circle four'}]
visualize.plot_circle(data, id=2)
visualize.plot_chords(id=5)
Explanation: Custom D3 module.
Now we're having fun. The simplicity of this process wins. We can pass data to javascript via a module called visualize that contains an attribute plot_circle, which uses jinja to render our js template. The advantage of using jinja to read our html is apparent: we can pass variables directly from python!
End of explanation
<END_TASK>