{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from beakerx import *\n",
    "\n",
    "nodes = []\n",
    "\n",
    "for i in range(0, 10):\n",
    "    nodes.append({\"radius\": int(i*5 + 5), \"colorB\": int(i*20)})\n",
    "\n",
    "beakerx.testData = {\"nodes\": nodes}\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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",
    ".moon {\n",
    "  stroke: #fff;\n",
    "  stroke-width: 1px;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "beakerx.displayHTML(this, '<div id=\"bkrx\"></div>');\n",
    "\n",
    "var testData = beakerx.testData\n",
    "\n",
    "var d3 = require(['d3'], function (d3) {\n",
    "    \n",
    "    var width = 600,\n",
    "        height = 200;\n",
    "\n",
    "    var svg = d3.select(\"#bkrx\")\n",
    "                .append(\"svg\")\n",
    "                .attr(\"width\", width)\n",
    "                .attr(\"height\", height)\n",
    "                .attr(\"transform\", \"translate(\"+[100, 0]+\")\");\n",
    "\n",
    "    var node = svg.selectAll()\n",
    "          .data(testData.nodes)\n",
    "          .enter().append(\"circle\")\n",
    "          .attr(\"class\", \"moon\")\n",
    "          .attr(\"r\", function(d) { return d.radius; })\n",
    "          .attr(\"cx\", function(d, i) { return i*40 + d.radius; })\n",
    "          .attr(\"cy\", function(d, i) { return 50 + d.radius; })\n",
    "          .style(\"fill\", function(d) { return d3.rgb(100, 100 , d.colorB); });  \n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "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.6.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}