Graph Cache Scratch.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:f8dd1cbe6dc5bbb8059c8e956937128cc952414d4d6646bb399b28bb98f1f352"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "import networkx as nx\n",
      "import math"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 34
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      " Load data"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "data = open('/var/datasets/wdc/small-pld-arc')\n",
      "G = nx.DiGraph()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 55
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "for line in data:\n",
      "    ijstr = line.split('\\t')\n",
      "    \n",
      "    i=int(ijstr[0])\n",
      "    j=int(ijstr[1])\n",
      "    \n",
      "    if i>20000:\n",
      "        break\n",
      "    if j>20000:\n",
      "        continue\n",
      "    G.add_edge(i,j)\n",
      "    "
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 56
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "data.close()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 57
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Draw graph"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Remove nodes with 0 in degree"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "G2 = G.copy()\n",
      "\n",
      "for (node, indeg) in G2.in_degree_iter():\n",
      "        if indeg==0:\n",
      "            G2.remove_node(node)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 59
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Make size proportional to in-degree"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "for (node, indeg) in G2.in_degree_iter():\n",
      "        if indeg==0:\n",
      "            G2.remove_node(node)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 58
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "#nx.draw_spring(G2,nodelist=d.keys(), node_size=[(v+1) * 100 for v in d.values()])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 14
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "for (node, indeg) in G2.in_degree_iter():\n",
      "        if indeg<20:\n",
      "            G2.remove_node(node)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 88
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "G2 = G\n",
      "d = G2.in_degree()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "nx.draw_random(G2,nodelist=d.keys(), node_size=[math.log(v+1) * 30 for v in d.values()])"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 8
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "G2.size()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 89,
       "text": [
        "3852"
       ]
      }
     ],
     "prompt_number": 89
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Convert to Javascript for interactivity"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Adapted from:\n",
      "http://nbviewer.ipython.org/github/ipython-books/cookbook-code/blob/master/notebooks/chapter06_viz/04_d3.ipynb"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "from IPython.core.display import display_javascript, display_html\n",
      "#from IPython.frontend.html.notebook import visutils as vis\n",
      "import json\n",
      "import time"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 61
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "g=G2\n",
      "with open('graph.json', 'w') as f:\n",
      "    json.dump({'nodes': [{'index': i, \n",
      "                          'name': str(g.nodes()[i]),\n",
      "                          'club': \"Mr. Hi\" } #g.node[i]['club']}\n",
      "                              for i in range(len(g.nodes()))],\n",
      "               'links': list(map(lambda u: \n",
      "                            {'source': u[0],\n",
      "                             'target': u[1]}, g.edges()))}, \n",
      "              f, indent=4,)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 29
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "g=nx.karate_club_graph()\n",
      "with open('graph.json', 'w') as f:\n",
      "    json.dump({'nodes': [{'name': str(i),\n",
      "                          'club': g.node[i]['club']}\n",
      "                              for i in g.nodes()],\n",
      "               'links': list(map(lambda u: \n",
      "                            {'source': u[0],\n",
      "                             'target': u[1]}, g.edges()))}, \n",
      "              f, indent=4,)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 10
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "g.nodes()[2]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 64,
       "text": [
        "2"
       ]
      }
     ],
     "prompt_number": 64
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "g=nx.Graph()\n",
      "g.add_edge(0,1)\n",
      "g.add_edge(3,4)\n",
      "g.add_node(2)\n",
      "with open('graph.json', 'w') as f:\n",
      "    json.dump({'nodes': [{'name': str(i),\n",
      "                          'club': \"Mr. Hi\"}\n",
      "                              for i in g.nodes()],\n",
      "               'links': list(map(lambda u: \n",
      "                            {'source': u[0],\n",
      "                             'target': u[1]}, g.edges()))}, \n",
      "              f, indent=4,)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 60
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "from networkx.readwrite import json_graph"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 62
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "From:\n",
      "http://networkx.github.io/documentation/latest/examples/javascript/force.html"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "d = json_graph.node_link_data(G2)\n",
      "json.dump(d, open('graph.json','w'))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 90
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "%%html\n",
      "<head>\n",
      "    <title>Force-Directed Layout</title>\n",
      "    <script type=\"text/javascript\" src=\"d3/d3.min.js\"></script>\n",
      "    <script type=\"text/javascript\" src=\"d3/d3.geom.min.js\"></script>\n",
      "    <script type=\"text/javascript\" src=\"d3/d3.layout.min.js\"></script>\n",
      "    <link type=\"text/css\" rel=\"stylesheet\" href=\"force.css\"/>\n",
      "</head>\n",
      "<body>\n",
      "    <div id=\"chart\"></div>\n",
      "    <script type=\"text/javascript\" src=\"graph.json\"></script>\n",
      "</body>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<head>\n",
        "    <title>Force-Directed Layout</title>\n",
        "    <script type=\"text/javascript\" src=\"d3/d3.min.js\"></script>\n",
        "    <script type=\"text/javascript\" src=\"d3/d3.geom.min.js\"></script>\n",
        "    <script type=\"text/javascript\" src=\"d3/d3.layout.min.js\"></script>\n",
        "    <link type=\"text/css\" rel=\"stylesheet\" href=\"force.css\"/>\n",
        "</head>\n",
        "<body>\n",
        "    <div id=\"chart\"></div>\n",
        "    <script type=\"text/javascript\" src=\"force.js\"></script>\n",
        "</body>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x108315410>"
       ]
      }
     ],
     "prompt_number": 134
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "G2.size()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 67,
       "text": [
        "5364"
       ]
      }
     ],
     "prompt_number": 67
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"d3-example\"></div>\n",
      "<style>\n",
      ".node {stroke: #fff; stroke-width: 1.5px;}\n",
      ".link {stroke: #999; stroke-opacity: .6;}\n",
      "</style>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"d3-example\"></div>\n",
        "<style>\n",
        ".node {stroke: #fff; stroke-width: 1.5px;}\n",
        ".link {stroke: #999; stroke-opacity: .6;}\n",
        "</style>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x104989950>"
       ]
      }
     ],
     "prompt_number": 92
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "%%javascript\n",
      "// We load the d3.js library from the Web.\n",
      "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
      "require([\"d3\"], function(d3) {\n",
      "    // The code in this block is executed when the \n",
      "    // d3.js library has been loaded.\n",
      "    \n",
      "    // First, we specify the size of the canvas containing\n",
      "    // the visualization (size of the <div> element).\n",
      "    var width = 600,\n",
      "        height = 600;\n",
      "\n",
      "    // We create a color scale.\n",
      "    var color = d3.scale.category10();\n",
      "\n",
      "    // We create a force-directed dynamic graph layout.\n",
      "    var force = d3.layout.force()\n",
      "        .charge(-90)\n",
      "        .linkDistance(30)\n",
      "        .gravity(0.35)\n",
      "        .size([width, height]);\n",
      "\n",
      "    // In the <div> element, we create a <svg> graphic\n",
      "    // that will contain our interactive visualization.\n",
      "    var svg = d3.select(\"#d3-example\").select(\"svg\")\n",
      "    if (svg.empty()) {\n",
      "        svg = d3.select(\"#d3-example\").append(\"svg\")\n",
      "                    .attr(\"width\", width)\n",
      "                    .attr(\"height\", height);\n",
      "    }\n",
      "        \n",
      "    // We load the JSON file.\n",
      "    d3.json(\"graph.json\", function(error, graph) {\n",
      "        // In this block, the file has been loaded\n",
      "        // and the 'graph' object contains our graph.\n",
      "        \n",
      "        // We load the nodes and links in the force-directed\n",
      "        // graph.\n",
      "        force.nodes(graph.nodes)\n",
      "            .links(graph.links)\n",
      "            .start();\n",
      "\n",
      "        // We create a <line> SVG element for each link\n",
      "        // in the graph.\n",
      "        var link = svg.selectAll(\".link\")\n",
      "            .data(graph.links)\n",
      "            .enter().append(\"line\")\n",
      "            .attr(\"class\", \"link\");\n",
      "\n",
      "        // We create a <circle> SVG element for each node\n",
      "        // in the graph, and we specify a few attributes.\n",
      "        var node = svg.selectAll(\".node\")\n",
      "            .data(graph.nodes)\n",
      "            .enter().append(\"circle\")\n",
      "            .attr(\"class\", \"node\")\n",
      "            .attr(\"r\", 5)  // radius\n",
      "            .style(\"fill\", function(d) {\n",
      "                // The node color depends on the club.\n",
      "                return color(d.club); \n",
      "            })\n",
      "            .call(force.drag);\n",
      "\n",
      "        // The name of each node is the node number.\n",
      "        node.append(\"title\")\n",
      "            .text(function(d) { return d.name; });\n",
      "\n",
      "        // We bind the positions of the SVG elements\n",
      "        // to the positions of the dynamic force-directed graph,\n",
      "        // at each time step.\n",
      "        force.on(\"tick\", function() {\n",
      "            link.attr(\"x1\", function(d) { return d.source.x; })\n",
      "                .attr(\"y1\", function(d) { return d.source.y; })\n",
      "                .attr(\"x2\", function(d) { return d.target.x; })\n",
      "                .attr(\"y2\", function(d) { return d.target.y; });\n",
      "\n",
      "            node.attr(\"cx\", function(d) { return d.x; })\n",
      "                .attr(\"cy\", function(d) { return d.y; });\n",
      "        });\n",
      "    });\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "// We load the d3.js library from the Web.\n",
        "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\"}});\n",
        "require([\"d3\"], function(d3) {\n",
        "    // The code in this block is executed when the \n",
        "    // d3.js library has been loaded.\n",
        "    \n",
        "    // First, we specify the size of the canvas containing\n",
        "    // the visualization (size of the <div> element).\n",
        "    var width = 600,\n",
        "        height = 600;\n",
        "\n",
        "    // We create a color scale.\n",
        "    var color = d3.scale.category10();\n",
        "\n",
        "    // We create a force-directed dynamic graph layout.\n",
        "    var force = d3.layout.force()\n",
        "        .charge(-90)\n",
        "        .linkDistance(30)\n",
        "        .gravity(0.35)\n",
        "        .size([width, height]);\n",
        "\n",
        "    // In the <div> element, we create a <svg> graphic\n",
        "    // that will contain our interactive visualization.\n",
        "    var svg = d3.select(\"#d3-example\").select(\"svg\")\n",
        "    if (svg.empty()) {\n",
        "        svg = d3.select(\"#d3-example\").append(\"svg\")\n",
        "                    .attr(\"width\", width)\n",
        "                    .attr(\"height\", height);\n",
        "    }\n",
        "        \n",
        "    // We load the JSON file.\n",
        "    d3.json(\"graph.json\", function(error, graph) {\n",
        "        // In this block, the file has been loaded\n",
        "        // and the 'graph' object contains our graph.\n",
        "        \n",
        "        // We load the nodes and links in the force-directed\n",
        "        // graph.\n",
        "        force.nodes(graph.nodes)\n",
        "            .links(graph.links)\n",
        "            .start();\n",
        "\n",
        "        // We create a <line> SVG element for each link\n",
        "        // in the graph.\n",
        "        var link = svg.selectAll(\".link\")\n",
        "            .data(graph.links)\n",
        "            .enter().append(\"line\")\n",
        "            .attr(\"class\", \"link\");\n",
        "\n",
        "        // We create a <circle> SVG element for each node\n",
        "        // in the graph, and we specify a few attributes.\n",
        "        var node = svg.selectAll(\".node\")\n",
        "            .data(graph.nodes)\n",
        "            .enter().append(\"circle\")\n",
        "            .attr(\"class\", \"node\")\n",
        "            .attr(\"r\", 5)  // radius\n",
        "            .style(\"fill\", function(d) {\n",
        "                // The node color depends on the club.\n",
        "                return color(d.club); \n",
        "            })\n",
        "            .call(force.drag);\n",
        "\n",
        "        // The name of each node is the node number.\n",
        "        node.append(\"title\")\n",
        "            .text(function(d) { return d.name; });\n",
        "\n",
        "        // We bind the positions of the SVG elements\n",
        "        // to the positions of the dynamic force-directed graph,\n",
        "        // at each time step.\n",
        "        force.on(\"tick\", function() {\n",
        "            link.attr(\"x1\", function(d) { return d.source.x; })\n",
        "                .attr(\"y1\", function(d) { return d.source.y; })\n",
        "                .attr(\"x2\", function(d) { return d.target.x; })\n",
        "                .attr(\"y2\", function(d) { return d.target.y; });\n",
        "\n",
        "            node.attr(\"cx\", function(d) { return d.x; })\n",
        "                .attr(\"cy\", function(d) { return d.y; });\n",
        "        });\n",
        "    });\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x104e939d0>"
       ]
      }
     ],
     "prompt_number": 93
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "json_graph.node_link_data?"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 128
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "from IPython.display import HTML\n",
      "HTML('<iframe src=force.html width=700 height=350></iframe>')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<iframe src=force.html width=700 height=350></iframe>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 137,
       "text": [
        "<IPython.core.display.HTML at 0x1082fb090>"
       ]
      }
     ],
     "prompt_number": 137
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}