%%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); });
});