import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline

import mpld3
mpld3.enable_notebook()

N = 100
scatter = plt.scatter(np.random.normal(size=N),
                      np.random.normal(size=N),
                      c=np.random.random(size=N),
                      s=1000 * np.random.random(size=N),
                      alpha=0.3,
                      cmap=plt.cm.jet)

%%SVG
<svg id="svg" height="60">
  <circle cx="40" cy="30" r="10" />
  <circle cx="80" cy="30" r="10" />
  <circle cx="120" cy="30" r="10" />
</svg>

%%javascript
require.config({paths: {d3: "http://d3js.org/d3.v3.min"}});
require(["d3"], function(d3) {

    // We select the #svg element.
    var svg = d3.select("#svg");

    // We select all circles...
    var circle = svg.selectAll("circle")
                    // and we assign them some data.
                    .data(["red", "green", "blue"]);

    // Now, we assign the "fill" attribute of each circle to 
    // the value associated to it, and the "r" attribute
    // to some value depending on the data.
    circle.transition().duration(1000).
        attr("fill", function(d) { return d; }).
        attr("r", function(d) { return 4*d.length; });
    
});

import json
import networkx as nx

g = nx.karate_club_graph()
nx.draw(g)

from networkx.readwrite import json_graph

json_graph.node_link_data(g)

with open('graph.json', 'w') as f:
    json.dump(_, f, indent=1)

%%html
<svg id="graph" width="600" height="300"></svg>
<style>
.node {stroke: #fff; stroke-width: 1.5px;}
.link {stroke: #999; stroke-opacity: .6;}
</style>

%%javascript
require(["d3"], function(d3) {

    // We select the SVG element.
    var svg = d3.select("#graph");

    // We create a color scale.
    var color = d3.scale.category10();

    // We create a force-directed dynamic graph layout.
    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([600, 300]);

    // We load the JSON file.
    d3.json("graph.json", function(error, graph) {

        // We initialize the force field.
        force.nodes(graph.nodes)
             .links(graph.links)
             .start();

        // We create the links.
        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("line")  // adding a <line/> element for every graph link
            .attr("class", "link");

        // We create the nodes.
        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("circle")  // adding a <circle/> element for every graph node
            .attr("class", "node")
            .attr("r", 5)  // radius
            .style("fill", function(d) {  // color depending on the person's group
                return color(d.club); 
            })
            .call(force.drag);

        // Binding the force field to the graph.
        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        });
    });

});