def nodes = []

for (x in (0..10)){
  nodes.add(radius: x*5 + 5, colorB:(x*20))
}

beakerx.testData = [nodes: nodes]
OutputCell.HIDDEN

%%javascript
require.config({
  paths: {
      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min'
  }});

%%html
<style>
.moon {
  stroke: #fff;
  stroke-width: 1px;
}
</style>

%%javascript

beakerx.displayHTML(this, '<div id="bkrx"></div>');

var testData = beakerx.testData

var d3 = require(['d3'], function (d3) {
    
    var width = 600,
        height = 200;

    var svg = d3.select("#bkrx")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("transform", "translate("+[100, 0]+")");

    var node = svg.selectAll()
          .data(testData.nodes)
          .enter().append("circle")
          .attr("class", "moon")
          .attr("r", function(d) { return d.radius; })
          .attr("cx", function(d, i) { return i*40 + d.radius; })
          .attr("cy", function(d, i) { return 50 + d.radius; })
          .style("fill", function(d) { return d3.rgb(100, 100 , d.colorB); });  
});