{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import beakerx.runtime\n",
    "beakerx = beakerx.runtime.BeakerX()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from random import randrange\n",
    "import math\n",
    "\n",
    "nnodes = 100\n",
    "\n",
    "nodes = []\n",
    "links = []\n",
    "\n",
    "for i in range(0, nnodes):\n",
    "    nodes.append({\"name\": str(i), \"group\": int(i*7/nnodes)})\n",
    "\n",
    "for i in range(0, int(nnodes*1.15)):\n",
    "    source = i % nnodes\n",
    "    target = int(math.log(1 + randrange(nnodes), 1.3))\n",
    "    value = 10.0 / (1 + abs(source - target))\n",
    "    links.append({\"source\": source, \"target\": target, \"value\": value * value})\n",
    "\n",
    "beakerx.graph = {\"nodes\":nodes, \"links\":links}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "  paths: {\n",
       "      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min'\n",
       "  }});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "  paths: {\n",
    "      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min'\n",
    "  }});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       ".node {\n",
       "  stroke: #fff;\n",
       "  stroke-width: 1.5px;\n",
       "}\n",
       "\n",
       ".link {\n",
       "  stroke: #999;\n",
       "  stroke-opacity: .6;\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<style>\n",
    ".node {\n",
    "  stroke: #fff;\n",
    "  stroke-width: 1.5px;\n",
    "}\n",
    "\n",
    ".link {\n",
    "  stroke: #999;\n",
    "  stroke-opacity: .6;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "beakerx.displayHTML(this, '<div id=\"fdg\"></div>');\n",
       "\n",
       "var graph = beakerx.graph;\n",
       "var d3 = require(['d3'], function (d3) {\n",
       "    \n",
       "var width = 600,\n",
       "    height = 500;\n",
       "\n",
       "var color = d3.scale.category20();\n",
       "\n",
       "var force = d3.layout.force()\n",
       "    .charge(-200)\n",
       "    .linkDistance(30)\n",
       "    .size([width, height]);\n",
       "\n",
       "var svg = d3.select(\"#fdg\")\n",
       "            .append(\"svg\")\n",
       "            .attr(\"width\", width)\n",
       "            .attr(\"height\", height);\n",
       "\n",
       "\n",
       "force.nodes(graph.nodes)\n",
       "     .links(graph.links)\n",
       "     .start();\n",
       "\n",
       "var link = svg.selectAll(\".link\")\n",
       "      .data(graph.links)\n",
       "      .enter().append(\"line\")\n",
       "      .attr(\"class\", \"link\")\n",
       "      .style(\"stroke-width\", function(d) { return Math.sqrt(d.value); });\n",
       "\n",
       "var node = svg.selectAll(\".node\")\n",
       "      .data(graph.nodes)\n",
       "      .enter().append(\"circle\")\n",
       "      .attr(\"class\", \"node\")\n",
       "      .attr(\"r\", 10)\n",
       "      .style(\"fill\", function(d) { return color(d.group); })\n",
       "      .call(force.drag);\n",
       "\n",
       "node.append(\"title\")\n",
       "      .text(function(d) { return d.name; });\n",
       "\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",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "beakerx.displayHTML(this, '<div id=\"fdg\"></div>');\n",
    "\n",
    "var graph = beakerx.graph;\n",
    "var d3 = require(['d3'], function (d3) {\n",
    "    \n",
    "var width = 600,\n",
    "    height = 500;\n",
    "\n",
    "var color = d3.scale.category20();\n",
    "\n",
    "var force = d3.layout.force()\n",
    "    .charge(-200)\n",
    "    .linkDistance(30)\n",
    "    .size([width, height]);\n",
    "\n",
    "var svg = d3.select(\"#fdg\")\n",
    "            .append(\"svg\")\n",
    "            .attr(\"width\", width)\n",
    "            .attr(\"height\", height);\n",
    "\n",
    "\n",
    "force.nodes(graph.nodes)\n",
    "     .links(graph.links)\n",
    "     .start();\n",
    "\n",
    "var link = svg.selectAll(\".link\")\n",
    "      .data(graph.links)\n",
    "      .enter().append(\"line\")\n",
    "      .attr(\"class\", \"link\")\n",
    "      .style(\"stroke-width\", function(d) { return Math.sqrt(d.value); });\n",
    "\n",
    "var node = svg.selectAll(\".node\")\n",
    "      .data(graph.nodes)\n",
    "      .enter().append(\"circle\")\n",
    "      .attr(\"class\", \"node\")\n",
    "      .attr(\"r\", 10)\n",
    "      .style(\"fill\", function(d) { return color(d.group); })\n",
    "      .call(force.drag);\n",
    "\n",
    "node.append(\"title\")\n",
    "      .text(function(d) { return d.name; });\n",
    "\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"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}