NameNetwork.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "randomNames = [\"Isobel\",\"Misty\",\"Jona\",\"Gil\",\"Andera\",\"Kittie\",\"Suzie\",\"Tessa\",\"Drucilla\",\"Henrietta\",\"Tammera\",\"Giá\",\"Cletus\",\"Pricilla\",\"Gudrun\",\"Zina\",\"Alda\",\"Spring\",\"Maybell\",\"Taylor\",\"Suk\",\"Marx\",\"Janeth\",\"Leopoldo\",\"Rena\",\"Barrett\",\"Keeley\",\"Dann\",\"Leeann\",\"Hye\"]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[['Kittie', 'Janeth'], ['Suk', 'Hye'], ['Isobel', 'Marx'], ['Isobel', 'Gi\\xc3\\xa1'], ['Keeley', 'Henrietta'], ['Marx', 'Isobel'], ['Janeth', 'Tammera'], ['Marx', 'Gil'], ['Barrett', 'Alda'], ['Leopoldo', 'Gi\\xc3\\xa1'], ['Gi\\xc3\\xa1', 'Misty'], ['Henrietta', 'Janeth'], ['Suk', 'Dann'], ['Leeann', 'Dann'], ['Drucilla', 'Gi\\xc3\\xa1'], ['Keeley', 'Gi\\xc3\\xa1'], ['Marx', 'Jona'], ['Andera', 'Pricilla'], ['Kittie', 'Zina'], ['Keeley', 'Barrett']]\n"
     ]
    }
   ],
   "source": [
    "# -*- coding: utf-8 -*- \n",
    "import random\n",
    "randomNetwork = []\n",
    "graphsize = 20\n",
    "for x in range(0, graphsize): \n",
    "    randomNetwork.append([random.choice(randomNames),random.choice(randomNames)])\n",
    "print randomNetwork"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import json\n",
    "from IPython.display import HTML\n",
    "\n",
    "\n",
    "nodes = {}\n",
    "links = {}\n",
    "\n",
    "j = \"\" # JSON object\n",
    "j = j + \"{\"    \n",
    "j = j + \"\"\"\\t\"nodes\": [\"\"\"\n",
    "for name in randomNames:\n",
    "    nodes[name] = {}\n",
    "    nodes[name]['name'] = name\n",
    "for n in nodes:\n",
    "    j = j + str(json.dumps(nodes[n])) + \",\\n\"\n",
    "j = j[:-2]\n",
    "j = j + \"\\t],\\n\"\n",
    "j = j + \"\"\"\\t\"links\":[\\n\"\"\"\n",
    "for link in randomNetwork:\n",
    "    links[str(link)] = {}\n",
    "    links[str(link)]['source'] = randomNames.index(link[0])\n",
    "    links[str(link)]['target'] = randomNames.index(link[1])\n",
    "for l in links:\n",
    "    j = j + str(json.dumps(links[l])) + \",\\n\"\n",
    "j = j[:-2]\n",
    "j = j + \"\\t]\\n\"\n",
    "j = j + \"}\"\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<html>\n",
       "  <head>\n",
       "    <script type=\"text/javascript\">\n",
       "        graph = {\t\"nodes\": [{\"name\": \"Pricilla\"},\n",
       "{\"name\": \"Tammera\"},\n",
       "{\"name\": \"Henrietta\"},\n",
       "{\"name\": \"Kittie\"},\n",
       "{\"name\": \"Suk\"},\n",
       "{\"name\": \"Janeth\"},\n",
       "{\"name\": \"Jona\"},\n",
       "{\"name\": \"Leopoldo\"},\n",
       "{\"name\": \"Isobel\"},\n",
       "{\"name\": \"Gil\"},\n",
       "{\"name\": \"Marx\"},\n",
       "{\"name\": \"Alda\"},\n",
       "{\"name\": \"Keeley\"},\n",
       "{\"name\": \"Rena\"},\n",
       "{\"name\": \"Suzie\"},\n",
       "{\"name\": \"Hye\"},\n",
       "{\"name\": \"Barrett\"},\n",
       "{\"name\": \"Gi\\u00e1\"},\n",
       "{\"name\": \"Misty\"},\n",
       "{\"name\": \"Gudrun\"},\n",
       "{\"name\": \"Dann\"},\n",
       "{\"name\": \"Cletus\"},\n",
       "{\"name\": \"Drucilla\"},\n",
       "{\"name\": \"Taylor\"},\n",
       "{\"name\": \"Andera\"},\n",
       "{\"name\": \"Spring\"},\n",
       "{\"name\": \"Leeann\"},\n",
       "{\"name\": \"Maybell\"},\n",
       "{\"name\": \"Zina\"},\n",
       "{\"name\": \"Tessa\"}\t],\n",
       "\t\"links\":[\n",
       "{\"source\": 22, \"target\": 10},\n",
       "{\"source\": 0, \"target\": 11},\n",
       "{\"source\": 20, \"target\": 29},\n",
       "{\"source\": 8, \"target\": 11},\n",
       "{\"source\": 5, \"target\": 15},\n",
       "{\"source\": 21, \"target\": 2},\n",
       "{\"source\": 11, \"target\": 1},\n",
       "{\"source\": 9, \"target\": 22},\n",
       "{\"source\": 28, \"target\": 27},\n",
       "{\"source\": 25, \"target\": 16},\n",
       "{\"source\": 4, \"target\": 13},\n",
       "{\"source\": 23, \"target\": 11},\n",
       "{\"source\": 5, \"target\": 22},\n",
       "{\"source\": 0, \"target\": 21},\n",
       "{\"source\": 21, \"target\": 3},\n",
       "{\"source\": 26, \"target\": 25},\n",
       "{\"source\": 26, \"target\": 9},\n",
       "{\"source\": 26, \"target\": 11},\n",
       "{\"source\": 21, \"target\": 0},\n",
       "{\"source\": 20, \"target\": 27}\t]\n",
       "};\n",
       "    </script>\n",
       "  </head>\n",
       "  <body>\n",
       "      <div id=\"graph\"></div>\n",
       "  </body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "html_code =\"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <script type=\"text/javascript\">\n",
    "        graph = %s;\n",
    "    </script>\n",
    "  </head>\n",
    "  <body>\n",
    "      <div id=\"graph\"></div>\n",
    "  </body>\n",
    "</html>\"\"\" % (j)\n",
    "HTML(html_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\",}});\n",
       "\n",
       "require([\"d3\"], function(d3) {\n",
       "    var width = 960,\n",
       "    height = 500;\n",
       "    var color = d3.scale.category10();\n",
       "\n",
       "    var force = d3.layout.force()\n",
       "        .charge(-120)\n",
       "        .linkDistance(30)\n",
       "        .size([width, height]);\n",
       "    // append SVG to body of index.html with height and width specified above\n",
       "    var svg = d3.select(\"div#graph\").append(\"svg\")\n",
       "        .attr(\"width\", width)\n",
       "        .attr(\"height\", height);\n",
       "\n",
       "    // this actually adheres the data to the force base layout and starts the layout\n",
       "    force\n",
       "        .nodes(graph.nodes)\n",
       "        .links(graph.links)\n",
       "        .start();\n",
       "\n",
       "    var link = svg.selectAll(\".link\").data(graph.links)\n",
       "        .enter().append(\"line\")\n",
       "        .attr(\"class\", \"link\")\n",
       "        .style(\"stroke\", \"#999\")\n",
       "        .style(\"stroke-width\", \".6px\");\n",
       "\n",
       "    // append the nodes with specified data and style properties\n",
       "    var node = svg.selectAll(\".node\").data(graph.nodes)\n",
       "        .enter().append(\"circle\")\n",
       "        .attr(\"class\", \"node\")\n",
       "        .attr(\"r\", 5)\n",
       "        .style(\"stroke\", \"#fff\")\n",
       "        .style(\"stroke-width\", \"1.5px\")\n",
       "        .style(\"fill\", \"steelblue\")\n",
       "        .call(force.drag);\n",
       "    // attach titles to nodes, so when the mouse hovers over the nodes it projects the name\n",
       "    node.append(\"title\")\n",
       "        .text(function(d) { return d.name; });\n",
       "\n",
       "    // this is the main mechanism of the force based diagram\n",
       "    // which moves the nodes and links from their starting and finishing positions\n",
       "    // once it hits equilibrium, it will stop moving the positions\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",
       "        node.attr(\"cx\", function(d) { return d.x; })\n",
       "            .attr(\"cy\", function(d) { return d.y; });\n",
       "    });\n",
       "\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.config({paths: {d3: \"http://d3js.org/d3.v3.min\",}});\n",
    "\n",
    "require([\"d3\"], function(d3) {\n",
    "    var width = 960,\n",
    "    height = 500;\n",
    "    var color = d3.scale.category10();\n",
    "\n",
    "    var force = d3.layout.force()\n",
    "        .charge(-120)\n",
    "        .linkDistance(30)\n",
    "        .size([width, height]);\n",
    "    // append SVG to body of index.html with height and width specified above\n",
    "    var svg = d3.select(\"div#graph\").append(\"svg\")\n",
    "        .attr(\"width\", width)\n",
    "        .attr(\"height\", height);\n",
    "\n",
    "    // this actually adheres the data to the force base layout and starts the layout\n",
    "    force\n",
    "        .nodes(graph.nodes)\n",
    "        .links(graph.links)\n",
    "        .start();\n",
    "\n",
    "    var link = svg.selectAll(\".link\").data(graph.links)\n",
    "        .enter().append(\"line\")\n",
    "        .attr(\"class\", \"link\")\n",
    "        .style(\"stroke\", \"#999\")\n",
    "        .style(\"stroke-width\", \".6px\");\n",
    "\n",
    "    // append the nodes with specified data and style properties\n",
    "    var node = svg.selectAll(\".node\").data(graph.nodes)\n",
    "        .enter().append(\"circle\")\n",
    "        .attr(\"class\", \"node\")\n",
    "        .attr(\"r\", 5)\n",
    "        .style(\"stroke\", \"#fff\")\n",
    "        .style(\"stroke-width\", \"1.5px\")\n",
    "        .style(\"fill\", \"steelblue\")\n",
    "        .call(force.drag);\n",
    "    // attach titles to nodes, so when the mouse hovers over the nodes it projects the name\n",
    "    node.append(\"title\")\n",
    "        .text(function(d) { return d.name; });\n",
    "\n",
    "    // this is the main mechanism of the force based diagram\n",
    "    // which moves the nodes and links from their starting and finishing positions\n",
    "    // once it hits equilibrium, it will stop moving the positions\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",
    "        node.attr(\"cx\", function(d) { return d.x; })\n",
    "            .attr(\"cy\", function(d) { return d.y; });\n",
    "    });\n",
    "\n",
    "});"
   ]
  }
 ],
 "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": 1
}