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 [ ]:

    

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


    

In [ ]:

    

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


    

In [ ]:

    

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


    

In [ ]: