{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Autotranslation: Python to JavaScript and D3\n",
    "\n",
    "Generate a random graph with Python, then visualize it with a [D3](http://d3js.org/) interactive, force-directed graph.\n",
    "\n",
    "The first cell imports the BeakerX package and initializes the runtime.  \n",
    "\n",
    "Then we generates the graph (one made of nodes and edges, like a social network graph)\n",
    "and store it in the BeakerX object.\n",
    "\n",
    "Then we load D3 and set its styles.\n",
    "\n",
    "Finally, a JavaScript cell gets the data from the BeakerX object and renders it with D3.\n",
    "\n",
    "This final cell was\n",
    "copied almost verbatim from the [D3 documentation](http://bl.ocks.org/mbostock/4062045).  Other D3 examples\n",
    "should be similarly easy to get working in BeakerX."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from beakerx import beakerx"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "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": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "  paths: {\n",
    "      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min'\n",
    "  }});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "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": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "beakerx.displayHTML(this, '<div id=\"fdg\"></div>');\n",
    "\n",
    "var graph = beakerx.graph\n",
    "\n",
    "var d3 = require(['d3'], function (d3) {\n",
    "    \n",
    "    var width = 600,\n",
    "        height = 500;\n",
    "\n",
    "    var color = d3.scaleOrdinal(d3.schemeCategory20);\n",
    "\n",
    "    var simulation = d3.forceSimulation()\n",
    "        .force(\"link\", d3.forceLink().distance(30))\n",
    "        .force(\"charge\", d3.forceManyBody().strength(-200))\n",
    "        .force(\"center\", d3.forceCenter(width / 2, height / 2))\n",
    "        .force(\"y\", d3.forceY(width / 2).strength(0.3))\n",
    "        .force(\"x\", d3.forceX(height / 2).strength(0.3));\n",
    "\n",
    "    var svg = d3.select(\"#fdg\")\n",
    "                .append(\"svg\")\n",
    "                .attr(\"width\", width)\n",
    "                .attr(\"height\", height)\n",
    "                .attr(\"transform\", \"translate(\"+[100, 0]+\")\");\n",
    "\n",
    "    simulation\n",
    "          .nodes(graph.nodes)\n",
    "          .force(\"link\")\n",
    "          .links(graph.links);\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",
    "\n",
    "    node.append(\"title\")\n",
    "          .text(function(d) { return d.name; });\n",
    "\n",
    "    simulation.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",
    "    node.call(d3.drag()\n",
    "        .on(\"start\", dragstarted)\n",
    "        .on(\"drag\", dragged)\n",
    "        .on(\"end\", dragended)\n",
    "    );\n",
    "    \n",
    "    function dragstarted(d) {\n",
    "        if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n",
    "        d.fx = d.x;\n",
    "        d.fy = d.y;\n",
    "    }\n",
    "\n",
    "    function dragged(d) {\n",
    "        d.fx = d3.event.x;\n",
    "        d.fy = d3.event.y;\n",
    "    }\n",
    "\n",
    "    function dragended(d) {\n",
    "        if (!d3.event.active) simulation.alphaTarget(0);\n",
    "        d.fx = null;\n",
    "        d.fy = null;\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.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}