JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="viz">
</div>

CSS

circle { 
  fill: blue;
}
text { 
  font-size: 13px;
    text-anchor: middle;
}

JavaScript

var data = [
    { name: "Bullseye", dist: 0, angle: 0 },   
    { name: "Strike 1", dist: 50, angle: 0 },   
    { name: "Strike 2", dist: 100, angle: 90 },    
    { name: "Strike 3", dist: 150, angle: 180 }   
];

var w = 400;
var h = 400;

var svg = d3.select("#viz").append("svg").attr("width",w).attr("height",h);
var g = svg.append('g').attr('transform', 'translate(' + w/2 + ',' + h/2 + ')');

var group = g.selectAll('.strike')
  .data(data).enter()
  .append('g')
  .attr('class', 'strike')
  .attr('transform', function (d) { 
     console.log('transforming', d.dist, d.angle);
     return 
       'translate(' + d.dist + ',0) ' + 
       'rotate(' + d.angle + ') '; 
  });

group
  .append('circle')
  .attr('r', 10);

group
  .append('text')
  .text(function(d) { return d.name })
  //.attr('dy', "-1em");