#!/usr/bin/env python
# coding: utf-8

# In[ ]:


from beakerx import *

nodes = []

for i in range(0, 10):
    nodes.append({"radius": int(i*5 + 5), "colorB": int(i*20)})

beakerx.testData = {"nodes": nodes}


# In[ ]:


get_ipython().run_cell_magic('javascript', '', "require.config({\n  paths: {\n      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min'\n  }});\n")


# In[ ]:


get_ipython().run_cell_magic('html', '', '<style>\n.moon {\n  stroke: #fff;\n  stroke-width: 1px;\n}\n</style>\n')


# In[ ]:


get_ipython().run_cell_magic('javascript', '', '\nbeakerx.displayHTML(this, \'<div id="bkrx"></div>\');\n\nvar testData = beakerx.testData\n\nvar 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});\n')


# In[ ]: