{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def nodes = []\n",
    "\n",
    "for (x in (0..10)){\n",
    "  nodes.add(radius: x*5 + 5, colorB:(x*20))\n",
    "}\n",
    "\n",
    "beakerx.testData = [nodes: nodes]\n",
    "OutputCell.HIDDEN"
   ]
  },
  {
   "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": "Groovy",
   "language": "groovy",
   "name": "groovy"
  },
  "language_info": {
   "codemirror_mode": "groovy",
   "file_extension": ".groovy",
   "mimetype": "",
   "name": "Groovy",
   "nbconverter_exporter": "",
   "version": "2.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}