var height = innerHeight
var width = innerWidth

var svg = d3.select('.graph').html('')
  .append('svg').at({width, height})
  .append('g').translate([width/2, height/2])


var innerR = 120
var circles = [{r: innerR, pos: [0, 0]}]
;[
  [-0.1, 30],
  [-2.6, 70],
  [-0.7, 20],
  [-1.1, 30],
  [-3.1, 10]
].forEach(([angle, r]) => {
  var pos = [Math.cos(angle)*(innerR + r), Math.sin(angle)*(innerR + r)]

  circles.push({r, pos})
})


svg.appendMany('circle', circles)
  .at({r: d => d.r})
  .translate(d => d.pos)

svg.appendMany('circle', circles)
  .at({r: d => d.r, fill: 'none', stroke: 'red'})
  .at({strokeWidth: d => 1/d.r*80})
  .translate(d => d.pos)