sigma_js_graph.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Network Diagram with Sigma.js"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example uses [sigma.js](http://sigmajs.org/) to visualize a network produced in python."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Notebook Config"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import display, HTML\n",
    "from string import Template\n",
    "import pandas as pd\n",
    "import json, random"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script src=\"lib/sigmajs/sigma.min.js\"></script>\n",
       "<script src=\"js/sigma-add-method-neighbors.js\"></script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML('''\n",
    "<script src=\"lib/sigmajs/sigma.min.js\"></script>\n",
    "<script src=\"js/sigma-add-method-neighbors.js\"></script>\n",
    "''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Network Construction"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "random.seed(42)\n",
    "\n",
    "n_nodes = 40\n",
    "n_edges = 200\n",
    "\n",
    "graph_data = { 'nodes': [], 'edges': [] }\n",
    "\n",
    "for i in range(n_nodes):\n",
    "    graph_data['nodes'].append({\n",
    "            \"id\": \"n\" + str(i),\n",
    "            \"label\": \"n\" + str(i),\n",
    "            \"x\": random.uniform(0,1),\n",
    "            \"y\": random.uniform(0,1),\n",
    "            \"size\": random.uniform(0.2,1)\n",
    "        })\n",
    "\n",
    "for j in range(n_edges):\n",
    "    x_center = random.uniform(0,1)\n",
    "    y_center = random.uniform(0,1)\n",
    "    x_dist = random.uniform(0.1,0.5)\n",
    "    y_dist = random.uniform(0.2,0.5)\n",
    "    neighborhood = []\n",
    "    for node in graph_data['nodes']:\n",
    "        if abs(node['x'] - x_center) < x_dist:\n",
    "            if abs(node['y'] - y_center) < y_dist:\n",
    "                neighborhood.append(int(node['id'].replace('n','')))\n",
    "    if len(neighborhood) >= 2:\n",
    "        ends = random.sample(neighborhood,2)\n",
    "        graph_data['edges'].append({\n",
    "                \"id\": \"e\" + str(j),\n",
    "                \"source\": \"n\" + str(ends[0]),\n",
    "                \"target\": \"n\" + str(ends[1])\n",
    "            })"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>id</th>\n",
       "      <th>label</th>\n",
       "      <th>size</th>\n",
       "      <th>x</th>\n",
       "      <th>y</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>n0</td>\n",
       "      <td>n0</td>\n",
       "      <td>0.420023</td>\n",
       "      <td>0.639427</td>\n",
       "      <td>0.025011</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>n1</td>\n",
       "      <td>n1</td>\n",
       "      <td>0.741360</td>\n",
       "      <td>0.223211</td>\n",
       "      <td>0.736471</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>n2</td>\n",
       "      <td>n2</td>\n",
       "      <td>0.537537</td>\n",
       "      <td>0.892180</td>\n",
       "      <td>0.086939</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>n3</td>\n",
       "      <td>n3</td>\n",
       "      <td>0.604284</td>\n",
       "      <td>0.029797</td>\n",
       "      <td>0.218638</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>n4</td>\n",
       "      <td>n4</td>\n",
       "      <td>0.719908</td>\n",
       "      <td>0.026536</td>\n",
       "      <td>0.198838</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   id label      size         x         y\n",
       "0  n0    n0  0.420023  0.639427  0.025011\n",
       "1  n1    n1  0.741360  0.223211  0.736471\n",
       "2  n2    n2  0.537537  0.892180  0.086939\n",
       "3  n3    n3  0.604284  0.029797  0.218638\n",
       "4  n4    n4  0.719908  0.026536  0.198838"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "pd.DataFrame(graph_data['nodes']).head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>id</th>\n",
       "      <th>source</th>\n",
       "      <th>target</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>e0</td>\n",
       "      <td>n5</td>\n",
       "      <td>n12</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>e1</td>\n",
       "      <td>n25</td>\n",
       "      <td>n1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>e2</td>\n",
       "      <td>n10</td>\n",
       "      <td>n20</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>e3</td>\n",
       "      <td>n6</td>\n",
       "      <td>n29</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>e4</td>\n",
       "      <td>n15</td>\n",
       "      <td>n17</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   id source target\n",
       "0  e0     n5    n12\n",
       "1  e1    n25     n1\n",
       "2  e2    n10    n20\n",
       "3  e3     n6    n29\n",
       "4  e4    n15    n17"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "pd.DataFrame(graph_data['edges']).head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Visualization"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"graph-div\" style=\"height:400px\"></div>\n",
       "<script> var g = {\"nodes\": [{\"y\": 0.025010755222666936, \"x\": 0.6394267984578837, \"size\": 0.42002345469529545, \"id\": \"n0\", \"label\": \"n0\"}, {\"y\": 0.7364712141640124, \"x\": 0.22321073814882275, \"size\": 0.7413595899383292, \"id\": \"n1\", \"label\": \"n1\"}, {\"y\": 0.08693883262941615, \"x\": 0.8921795677048454, \"size\": 0.5375374557482164, \"id\": \"n2\", \"label\": \"n2\"}, {\"y\": 0.21863797480360336, \"x\": 0.029797219438070344, \"size\": 0.6042842304826899, \"id\": \"n3\", \"label\": \"n3\"}, {\"y\": 0.1988376506866485, \"x\": 0.026535969683863625, \"size\": 0.7199075502236185, \"id\": \"n4\", \"label\": \"n4\"}, {\"y\": 0.2204406220406967, \"x\": 0.5449414806032167, \"size\": 0.6714125471007271, \"id\": \"n5\", \"label\": \"n5\"}, {\"y\": 0.006498759678061017, \"x\": 0.8094304566778266, \"size\": 0.8446554014662464, \"id\": \"n6\", \"label\": \"n6\"}, {\"y\": 0.3402505165179919, \"x\": 0.6981393949882269, \"size\": 0.3243835998494253, \"id\": \"n7\", \"label\": \"n7\"}, {\"y\": 0.33659454511262676, \"x\": 0.9572130722067812, \"size\": 0.27419667470411835, \"id\": \"n8\", \"label\": \"n8\"}, {\"y\": 0.8474943663474598, \"x\": 0.09671637683346401, \"size\": 0.6829808250935129, \"id\": \"n9\", \"label\": \"n9\"}, {\"y\": 0.7297317866938179, \"x\": 0.8071282732743802, \"size\": 0.6289824731637605, \"id\": \"n10\", \"label\": \"n10\"}, {\"y\": 0.3785343772083535, \"x\": 0.9731157639793706, \"size\": 0.6416325050185816, \"id\": \"n11\", \"label\": \"n11\"}, {\"y\": 0.6185197523642461, \"x\": 0.8294046642529949, \"size\": 0.8893655202486219, \"id\": \"n12\", \"label\": \"n12\"}, {\"y\": 0.7045718362149235, \"x\": 0.577352145256762, \"size\": 0.23665950692452978, \"id\": \"n13\", \"label\": \"n13\"}, {\"y\": 0.28938796360210717, \"x\": 0.22789827565154686, \"size\": 0.263833581538902, \"id\": \"n14\", \"label\": \"n14\"}, {\"y\": 0.10100142940972912, \"x\": 0.23279088636103018, \"size\": 0.4223788824880737, \"id\": \"n15\", \"label\": \"n15\"}, {\"y\": 0.36483217897008424, \"x\": 0.6356844442644002, \"size\": 0.4961447736935061, \"id\": \"n16\", \"label\": \"n16\"}, {\"y\": 0.26697782204911336, \"x\": 0.2095070307714877, \"size\": 0.9493236701699952, \"id\": \"n17\", \"label\": \"n17\"}, {\"y\": 0.6091310056669882, \"x\": 0.6480353852465935, \"size\": 0.3369109185584776, \"id\": \"n18\", \"label\": \"n18\"}, {\"y\": 0.1634024937619284, \"x\": 0.7291267979503492, \"size\": 0.5035643534061183, \"id\": \"n19\", \"label\": \"n19\"}, {\"y\": 0.6399997598540929, \"x\": 0.9895233506365952, \"size\": 0.6455597950197169, \"id\": \"n20\", \"label\": \"n20\"}, {\"y\": 0.8428519201898096, \"x\": 0.6846142509898746, \"size\": 0.8207999292369959, \"id\": \"n21\", \"label\": \"n21\"}, {\"y\": 0.03210024390403776, \"x\": 0.22904807196410437, \"size\": 0.45236243844726554, \"id\": \"n22\", \"label\": \"n22\"}, {\"y\": 0.21098284358632646, \"x\": 0.26774087597570273, \"size\": 0.9543277714680436, \"id\": \"n23\", \"label\": \"n23\"}, {\"y\": 0.3146778807984779, \"x\": 0.8763676264726689, \"size\": 0.7243509322359041, \"id\": \"n24\", \"label\": \"n24\"}, {\"y\": 0.9145475897405435, \"x\": 0.39563190106066426, \"size\": 0.567081482069919, \"id\": \"n25\", \"label\": \"n25\"}, {\"y\": 0.24662750769398345, \"x\": 0.26488016649805246, \"size\": 0.6490945073305207, \"id\": \"n26\", \"label\": \"n26\"}, {\"y\": 0.5845859902235405, \"x\": 0.26274160852293527, \"size\": 0.9182583068819816, \"id\": \"n27\", \"label\": \"n27\"}, {\"y\": 0.21932075915728333, \"x\": 0.39940050514039727, \"size\": 0.9980300851960882, \"id\": \"n28\", \"label\": \"n28\"}, {\"y\": 0.09090941217379389, \"x\": 0.5095262936764645, \"size\": 0.23769310033978766, \"id\": \"n29\", \"label\": \"n29\"}, {\"y\": 0.62744604170309, \"x\": 0.10964913035065915, \"size\": 0.8336634914903713, \"id\": \"n30\", \"label\": \"n30\"}, {\"y\": 0.06352770615195713, \"x\": 0.42215996679968404, \"size\": 0.5052954292052294, \"id\": \"n31\", \"label\": \"n31\"}, {\"y\": 0.529114345099137, \"x\": 0.9961213802400968, \"size\": 0.9768627020908947, \"id\": \"n32\", \"label\": \"n32\"}, {\"y\": 0.011481021942819636, \"x\": 0.8607797022344981, \"size\": 0.7765774554881557, \"id\": \"n33\", \"label\": \"n33\"}, {\"y\": 0.5369703304087952, \"x\": 0.6817103690265748, \"size\": 0.41346015196203423, \"id\": \"n34\", \"label\": \"n34\"}, {\"y\": 0.11155217359587644, \"x\": 0.6409617985798081, \"size\": 0.547812200535284, \"id\": \"n35\", \"label\": \"n35\"}, {\"y\": 0.9538159275210801, \"x\": 0.45372370632920644, \"size\": 0.9006823523025553, \"id\": \"n36\", \"label\": \"n36\"}, {\"y\": 0.5005861130502983, \"x\": 0.26338905075109076, \"size\": 0.3429215044241051, \"id\": \"n37\", \"label\": \"n37\"}, {\"y\": 0.8705185698367669, \"x\": 0.9126278393448205, \"size\": 0.4387558331589063, \"id\": \"n38\", \"label\": \"n38\"}, {\"y\": 0.6089702114381723, \"x\": 0.6389494948660052, \"size\": 0.3222714148397079, \"id\": \"n39\", \"label\": \"n39\"}], \"edges\": [{\"source\": \"n5\", \"id\": \"e0\", \"target\": \"n12\"}, {\"source\": \"n25\", \"id\": \"e1\", \"target\": \"n1\"}, {\"source\": \"n10\", \"id\": \"e2\", \"target\": \"n20\"}, {\"source\": \"n6\", \"id\": \"e3\", \"target\": \"n29\"}, {\"source\": \"n15\", \"id\": \"e4\", \"target\": \"n17\"}, {\"source\": \"n8\", \"id\": \"e5\", \"target\": \"n10\"}, {\"source\": \"n1\", \"id\": \"e6\", \"target\": \"n27\"}, {\"source\": \"n9\", \"id\": \"e7\", \"target\": \"n13\"}, {\"source\": \"n17\", \"id\": \"e8\", \"target\": \"n28\"}, {\"source\": \"n7\", \"id\": \"e9\", \"target\": \"n33\"}, {\"source\": \"n20\", \"id\": \"e10\", \"target\": \"n18\"}, {\"source\": \"n8\", \"id\": \"e11\", \"target\": \"n7\"}, {\"source\": \"n27\", \"id\": \"e12\", \"target\": \"n1\"}, {\"source\": \"n38\", \"id\": \"e13\", \"target\": \"n11\"}, {\"source\": \"n16\", \"id\": \"e14\", \"target\": \"n31\"}, {\"source\": \"n37\", \"id\": \"e15\", \"target\": \"n36\"}, {\"source\": \"n39\", \"id\": \"e16\", \"target\": \"n25\"}, {\"source\": \"n36\", \"id\": \"e17\", \"target\": \"n39\"}, {\"source\": \"n9\", \"id\": \"e18\", \"target\": \"n1\"}, {\"source\": \"n22\", \"id\": \"e19\", \"target\": \"n35\"}, {\"source\": \"n13\", \"id\": \"e20\", \"target\": \"n27\"}, {\"source\": \"n14\", \"id\": \"e21\", \"target\": \"n27\"}, {\"source\": \"n3\", \"id\": \"e22\", \"target\": \"n5\"}, {\"source\": \"n21\", \"id\": \"e23\", \"target\": \"n9\"}, {\"source\": \"n21\", \"id\": \"e24\", \"target\": \"n5\"}, {\"source\": \"n5\", \"id\": \"e25\", \"target\": \"n39\"}, {\"source\": \"n26\", \"id\": \"e26\", \"target\": \"n4\"}, {\"source\": \"n34\", \"id\": \"e27\", \"target\": \"n2\"}, {\"source\": \"n29\", \"id\": \"e28\", \"target\": \"n28\"}, {\"source\": \"n10\", \"id\": \"e29\", \"target\": \"n32\"}, {\"source\": \"n8\", \"id\": \"e30\", \"target\": \"n7\"}, {\"source\": \"n37\", \"id\": \"e31\", \"target\": \"n13\"}, {\"source\": \"n16\", \"id\": \"e32\", \"target\": \"n23\"}, {\"source\": \"n36\", \"id\": \"e33\", \"target\": \"n37\"}, {\"source\": \"n30\", \"id\": \"e34\", \"target\": \"n17\"}, {\"source\": \"n31\", \"id\": \"e35\", \"target\": \"n29\"}, {\"source\": \"n30\", \"id\": \"e36\", \"target\": \"n9\"}, {\"source\": \"n30\", \"id\": \"e37\", \"target\": \"n4\"}, {\"source\": \"n37\", \"id\": \"e38\", \"target\": \"n7\"}, {\"source\": \"n2\", \"id\": \"e39\", \"target\": \"n8\"}, {\"source\": \"n16\", \"id\": \"e40\", \"target\": \"n20\"}, {\"source\": \"n26\", \"id\": \"e41\", \"target\": \"n37\"}, {\"source\": \"n34\", \"id\": \"e42\", \"target\": \"n13\"}, {\"source\": \"n18\", \"id\": \"e43\", \"target\": \"n39\"}, {\"source\": \"n37\", \"id\": \"e44\", \"target\": \"n28\"}, {\"source\": \"n7\", \"id\": \"e45\", \"target\": \"n10\"}, {\"source\": \"n18\", \"id\": \"e46\", \"target\": \"n13\"}, {\"source\": \"n1\", \"id\": \"e47\", \"target\": \"n13\"}, {\"source\": \"n26\", \"id\": \"e48\", \"target\": \"n10\"}, {\"source\": \"n23\", \"id\": \"e49\", \"target\": \"n3\"}, {\"source\": \"n26\", \"id\": \"e50\", \"target\": \"n25\"}, {\"source\": \"n2\", \"id\": \"e51\", \"target\": \"n11\"}, {\"source\": \"n9\", \"id\": \"e52\", \"target\": \"n25\"}, {\"source\": \"n25\", \"id\": \"e53\", \"target\": \"n37\"}, {\"source\": \"n34\", \"id\": \"e54\", \"target\": \"n18\"}, {\"source\": \"n18\", \"id\": \"e55\", \"target\": \"n32\"}, {\"source\": \"n8\", \"id\": \"e56\", \"target\": \"n11\"}, {\"source\": \"n5\", \"id\": \"e57\", \"target\": \"n23\"}, {\"source\": \"n7\", \"id\": \"e58\", \"target\": \"n5\"}, {\"source\": \"n37\", \"id\": \"e59\", \"target\": \"n34\"}, {\"source\": \"n29\", \"id\": \"e60\", \"target\": \"n31\"}, {\"source\": \"n18\", \"id\": \"e61\", \"target\": \"n39\"}, {\"source\": \"n17\", \"id\": \"e62\", \"target\": \"n5\"}, {\"source\": \"n17\", \"id\": \"e63\", \"target\": \"n22\"}, {\"source\": \"n9\", \"id\": \"e64\", \"target\": \"n30\"}, {\"source\": \"n29\", \"id\": \"e65\", \"target\": \"n37\"}, {\"source\": \"n26\", \"id\": \"e66\", \"target\": \"n15\"}, {\"source\": \"n39\", \"id\": \"e67\", \"target\": \"n12\"}, {\"source\": \"n4\", \"id\": \"e68\", \"target\": \"n3\"}, {\"source\": \"n34\", \"id\": \"e69\", \"target\": \"n10\"}, {\"source\": \"n21\", \"id\": \"e70\", \"target\": \"n38\"}, {\"source\": \"n24\", \"id\": \"e71\", \"target\": \"n18\"}, {\"source\": \"n1\", \"id\": \"e72\", \"target\": \"n36\"}, {\"source\": \"n18\", \"id\": \"e73\", \"target\": \"n11\"}, {\"source\": \"n12\", \"id\": \"e74\", \"target\": \"n20\"}, {\"source\": \"n11\", \"id\": \"e75\", \"target\": \"n33\"}, {\"source\": \"n16\", \"id\": \"e76\", \"target\": \"n29\"}, {\"source\": \"n19\", \"id\": \"e77\", \"target\": \"n24\"}, {\"source\": \"n5\", \"id\": \"e78\", \"target\": \"n28\"}, {\"source\": \"n1\", \"id\": \"e79\", \"target\": \"n36\"}, {\"source\": \"n30\", \"id\": \"e80\", \"target\": \"n27\"}, {\"source\": \"n36\", \"id\": \"e81\", \"target\": \"n13\"}, {\"source\": \"n24\", \"id\": \"e82\", \"target\": \"n12\"}, {\"source\": \"n5\", \"id\": \"e83\", \"target\": \"n2\"}, {\"source\": \"n25\", \"id\": \"e84\", \"target\": \"n34\"}, {\"source\": \"n10\", \"id\": \"e85\", \"target\": \"n32\"}, {\"source\": \"n31\", \"id\": \"e86\", \"target\": \"n17\"}, {\"source\": \"n31\", \"id\": \"e87\", \"target\": \"n23\"}, {\"source\": \"n39\", \"id\": \"e88\", \"target\": \"n16\"}, {\"source\": \"n2\", \"id\": \"e89\", \"target\": \"n24\"}, {\"source\": \"n29\", \"id\": \"e90\", \"target\": \"n23\"}, {\"source\": \"n11\", \"id\": \"e91\", \"target\": \"n33\"}, {\"source\": \"n24\", \"id\": \"e92\", \"target\": \"n33\"}, {\"source\": \"n5\", \"id\": \"e93\", \"target\": \"n3\"}, {\"source\": \"n4\", \"id\": \"e94\", \"target\": \"n26\"}, {\"source\": \"n32\", \"id\": \"e95\", \"target\": \"n25\"}, {\"source\": \"n25\", \"id\": \"e96\", \"target\": \"n38\"}, {\"source\": \"n24\", \"id\": \"e97\", \"target\": \"n8\"}, {\"source\": \"n37\", \"id\": \"e98\", \"target\": \"n17\"}, {\"source\": \"n28\", \"id\": \"e99\", \"target\": \"n5\"}, {\"source\": \"n36\", \"id\": \"e100\", \"target\": \"n30\"}, {\"source\": \"n18\", \"id\": \"e101\", \"target\": \"n19\"}, {\"source\": \"n16\", \"id\": \"e102\", \"target\": \"n2\"}, {\"source\": \"n14\", \"id\": \"e103\", \"target\": \"n28\"}, {\"source\": \"n21\", \"id\": \"e104\", \"target\": \"n13\"}, {\"source\": \"n36\", \"id\": \"e105\", \"target\": \"n25\"}, {\"source\": \"n34\", \"id\": \"e106\", \"target\": \"n28\"}, {\"source\": \"n16\", \"id\": \"e107\", \"target\": \"n24\"}, {\"source\": \"n1\", \"id\": \"e108\", \"target\": \"n9\"}, {\"source\": \"n19\", \"id\": \"e109\", \"target\": \"n5\"}, {\"source\": \"n11\", \"id\": \"e110\", \"target\": \"n24\"}, {\"source\": \"n34\", \"id\": \"e111\", \"target\": \"n11\"}, {\"source\": \"n20\", \"id\": \"e112\", \"target\": \"n34\"}, {\"source\": \"n34\", \"id\": \"e113\", \"target\": \"n36\"}, {\"source\": \"n22\", \"id\": \"e114\", \"target\": \"n19\"}, {\"source\": \"n28\", \"id\": \"e115\", \"target\": \"n5\"}, {\"source\": \"n31\", \"id\": \"e116\", \"target\": \"n8\"}, {\"source\": \"n1\", \"id\": \"e117\", \"target\": \"n25\"}, {\"source\": \"n21\", \"id\": \"e118\", \"target\": \"n20\"}, {\"source\": \"n18\", \"id\": \"e119\", \"target\": \"n34\"}, {\"source\": \"n36\", \"id\": \"e120\", \"target\": \"n34\"}, {\"source\": \"n34\", \"id\": \"e121\", \"target\": \"n0\"}, {\"source\": \"n28\", \"id\": \"e122\", \"target\": \"n17\"}, {\"source\": \"n30\", \"id\": \"e123\", \"target\": \"n36\"}, {\"source\": \"n1\", \"id\": \"e124\", \"target\": \"n9\"}, {\"source\": \"n39\", \"id\": \"e125\", \"target\": \"n21\"}, {\"source\": \"n9\", \"id\": \"e126\", \"target\": \"n30\"}, {\"source\": \"n9\", \"id\": \"e127\", \"target\": \"n25\"}, {\"source\": \"n13\", \"id\": \"e128\", \"target\": \"n30\"}, {\"source\": \"n26\", \"id\": \"e129\", \"target\": \"n37\"}, {\"source\": \"n8\", \"id\": \"e130\", \"target\": \"n19\"}, {\"source\": \"n18\", \"id\": \"e131\", \"target\": \"n34\"}, {\"source\": \"n30\", \"id\": \"e132\", \"target\": \"n27\"}, {\"source\": \"n24\", \"id\": \"e133\", \"target\": \"n36\"}, {\"source\": \"n31\", \"id\": \"e134\", \"target\": \"n2\"}, {\"source\": \"n27\", \"id\": \"e135\", \"target\": \"n36\"}, {\"source\": \"n36\", \"id\": \"e136\", \"target\": \"n13\"}, {\"source\": \"n39\", \"id\": \"e137\", \"target\": \"n12\"}, {\"source\": \"n39\", \"id\": \"e138\", \"target\": \"n34\"}, {\"source\": \"n27\", \"id\": \"e139\", \"target\": \"n36\"}, {\"source\": \"n8\", \"id\": \"e140\", \"target\": \"n12\"}, {\"source\": \"n9\", \"id\": \"e141\", \"target\": \"n1\"}, {\"source\": \"n10\", \"id\": \"e142\", \"target\": \"n38\"}, {\"source\": \"n14\", \"id\": \"e143\", \"target\": \"n22\"}, {\"source\": \"n36\", \"id\": \"e144\", \"target\": \"n12\"}, {\"source\": \"n35\", \"id\": \"e145\", \"target\": \"n0\"}, {\"source\": \"n3\", \"id\": \"e146\", \"target\": \"n26\"}, {\"source\": \"n13\", \"id\": \"e147\", \"target\": \"n36\"}, {\"source\": \"n20\", \"id\": \"e148\", \"target\": \"n2\"}, {\"source\": \"n0\", \"id\": \"e149\", \"target\": \"n33\"}, {\"source\": \"n4\", \"id\": \"e150\", \"target\": \"n31\"}, {\"source\": \"n9\", \"id\": \"e151\", \"target\": \"n30\"}, {\"source\": \"n7\", \"id\": \"e152\", \"target\": \"n35\"}, {\"source\": \"n26\", \"id\": \"e153\", \"target\": \"n17\"}, {\"source\": \"n39\", \"id\": \"e154\", \"target\": \"n7\"}, {\"source\": \"n39\", \"id\": \"e155\", \"target\": \"n10\"}, {\"source\": \"n35\", \"id\": \"e156\", \"target\": \"n5\"}, {\"source\": \"n30\", \"id\": \"e157\", \"target\": \"n9\"}, {\"source\": \"n25\", \"id\": \"e158\", \"target\": \"n1\"}, {\"source\": \"n34\", \"id\": \"e159\", \"target\": \"n13\"}, {\"source\": \"n22\", \"id\": \"e160\", \"target\": \"n5\"}, {\"source\": \"n39\", \"id\": \"e161\", \"target\": \"n1\"}, {\"source\": \"n24\", \"id\": \"e162\", \"target\": \"n8\"}, {\"source\": \"n13\", \"id\": \"e163\", \"target\": \"n16\"}, {\"source\": \"n25\", \"id\": \"e164\", \"target\": \"n18\"}, {\"source\": \"n2\", \"id\": \"e165\", \"target\": \"n29\"}, {\"source\": \"n36\", \"id\": \"e166\", \"target\": \"n37\"}, {\"source\": \"n39\", \"id\": \"e167\", \"target\": \"n32\"}, {\"source\": \"n15\", \"id\": \"e168\", \"target\": \"n0\"}, {\"source\": \"n18\", \"id\": \"e169\", \"target\": \"n7\"}, {\"source\": \"n7\", \"id\": \"e170\", \"target\": \"n19\"}, {\"source\": \"n10\", \"id\": \"e171\", \"target\": \"n12\"}, {\"source\": \"n18\", \"id\": \"e172\", \"target\": \"n7\"}, {\"source\": \"n19\", \"id\": \"e173\", \"target\": \"n8\"}, {\"source\": \"n0\", \"id\": \"e174\", \"target\": \"n6\"}, {\"source\": \"n3\", \"id\": \"e175\", \"target\": \"n22\"}, {\"source\": \"n30\", \"id\": \"e176\", \"target\": \"n29\"}, {\"source\": \"n34\", \"id\": \"e178\", \"target\": \"n20\"}, {\"source\": \"n17\", \"id\": \"e179\", \"target\": \"n22\"}, {\"source\": \"n19\", \"id\": \"e180\", \"target\": \"n8\"}, {\"source\": \"n15\", \"id\": \"e181\", \"target\": \"n23\"}, {\"source\": \"n28\", \"id\": \"e182\", \"target\": \"n37\"}, {\"source\": \"n11\", \"id\": \"e183\", \"target\": \"n19\"}, {\"source\": \"n29\", \"id\": \"e184\", \"target\": \"n28\"}, {\"source\": \"n27\", \"id\": \"e185\", \"target\": \"n34\"}, {\"source\": \"n7\", \"id\": \"e186\", \"target\": \"n5\"}, {\"source\": \"n1\", \"id\": \"e187\", \"target\": \"n27\"}, {\"source\": \"n27\", \"id\": \"e188\", \"target\": \"n25\"}, {\"source\": \"n36\", \"id\": \"e189\", \"target\": \"n30\"}, {\"source\": \"n14\", \"id\": \"e190\", \"target\": \"n27\"}, {\"source\": \"n13\", \"id\": \"e191\", \"target\": \"n25\"}, {\"source\": \"n5\", \"id\": \"e192\", \"target\": \"n28\"}, {\"source\": \"n3\", \"id\": \"e193\", \"target\": \"n39\"}, {\"source\": \"n35\", \"id\": \"e194\", \"target\": \"n33\"}, {\"source\": \"n37\", \"id\": \"e195\", \"target\": \"n27\"}, {\"source\": \"n13\", \"id\": \"e196\", \"target\": \"n30\"}, {\"source\": \"n25\", \"id\": \"e197\", \"target\": \"n20\"}, {\"source\": \"n7\", \"id\": \"e198\", \"target\": \"n10\"}, {\"source\": \"n8\", \"id\": \"e199\", \"target\": \"n24\"}]} ;\n",
       "\n",
       "s = new sigma({graph: g, container: 'graph-div', settings: { defaultNodeColor: '#ec5148'} });\n",
       "\n",
       "s.graph.nodes().forEach(function(n) {\n",
       "  n.originalColor = n.color;\n",
       "});\n",
       "s.graph.edges().forEach(function(e) {\n",
       "  e.originalColor = e.color;\n",
       "});\n",
       "\n",
       "s.bind('clickNode', function(e) {\n",
       "  var nodeId = e.data.node.id,\n",
       "      toKeep = s.graph.neighbors(nodeId);\n",
       "  toKeep[nodeId] = e.data.node;\n",
       "\n",
       "  s.graph.nodes().forEach(function(n) {\n",
       "    if (toKeep[n.id])\n",
       "      n.color = n.originalColor;\n",
       "    else\n",
       "      n.color = '#eee';\n",
       "  });\n",
       "\n",
       "  s.graph.edges().forEach(function(e) {\n",
       "    if (toKeep[e.source] && toKeep[e.target])\n",
       "      e.color = e.originalColor;\n",
       "    else\n",
       "      e.color = '#eee';\n",
       "  });\n",
       "\n",
       "  s.refresh();\n",
       "});\n",
       "\n",
       "s.bind('clickStage', function(e) {\n",
       "  s.graph.nodes().forEach(function(n) {\n",
       "    n.color = n.originalColor;\n",
       "  });\n",
       "\n",
       "  s.graph.edges().forEach(function(e) {\n",
       "    e.color = e.originalColor;\n",
       "  });\n",
       "\n",
       "  s.refresh();\n",
       "});\n",
       " </script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "js_text_template = Template(open('js/sigma-graph.js','r').read())\n",
    "\n",
    "js_text = js_text_template.substitute({'graph_data': json.dumps(graph_data),\n",
    "                                       'container': 'graph-div'})\n",
    "\n",
    "html_template = Template('''\n",
    "<div id=\"graph-div\" style=\"height:400px\"></div>\n",
    "<script> $js_text </script>\n",
    "''')\n",
    "HTML(html_template.substitute({'js_text': js_text}))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "Note that you can zoom and pan (click and move) to navigate the graph. Also note that if you click on a node, it highlights it and the nodes to which it is directly connected, along with all of the edges within this neighborhood."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}