JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="500">
    <g class="padding-box" transform="translate(10, 10)">
        <g class="flat"></g>
        <g class="arc"></g>
    </g>
</svg>

JavaScript

var N = 10;
var values = Array(N);
for(var ii = 0; ii < N; ii++) {
    values[ii] = { value: Math.random() };
}

var packing = d3.layout.pack()({ children: values }).filter(function (d) { return !d.children; });

// Does the transformation from [(0,0), (0,1), (1,1), (1,0)] sqaure to an arc
// with the parameters [ (r0, theta0), (r0, theta1), (r1, theta1), (r1, theta0) ]
function transform_x(xy, r0, r1, theta0, theta1) {
    var x = xy.x, y = xy.y;
    return ((1 - x) * r0 + x * r1) * Math.sin((1 - y) * theta0 + y * theta1);
}

function transform_y(xy, r0, r1, theta0, theta1) {
    var x = xy.x, y = xy.y;
    return ((1 - x) * r0 + x * r1) * Math.cos((1 - y) * theta0 + y * theta1);
}

var colors = d3.scale.category10();

d3.select('svg g.flat')
    .selectAll('circle')
    .data(packing)
  .enter()
    .append('circle')
    .attr('cx', function (d) { return 100 * d.x; })
    .attr('cy', function (d) { return 100 * d.y; })
    .attr('r' , 10)
    .attr('fill', function (d, i) { return colors(i); } );

d3.select('svg g.flat')
    .append('rect')
    .classed('arc-boundary', true)
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', 100)
    .attr('height', 100)
    .attr('stroke-width', '5')
    .attr('stroke-opacity', '0.5')
    .attr('fill', 'none')
    .attr('stroke', 'grey');


var r0 = 200, r1 = 350, theta0 = Math.PI / 3, theta1 = Math.PI / 6;

d3.select('svg g.arc')
    .selectAll('circle')
    .data(packing)
  .enter()
    .append('circle')
    .attr('cx', function (d) { return transform_x(d, r0, r1, theta0, theta1); })
    .attr('cy', function (d) { return transform_y(d, r0, r1, theta0, theta1); })
    .attr('r', 10)
    .attr('fill', function (d, i) { return colors(i); } );

var arcPath = d3.svg.arc()({ innerRadius: r0, outerRadius: r1, startAngle: Math.PI -theta1, endAngle: Math.PI - theta0 });
d3.select('svg g.arc')
    .append('path')
    .classed('arc-boundary', true)
    .attr('d', arcPath)
    .attr('stroke-width', '5')
    .attr('stroke', 'grey')
 ...