D3 method for circle "piling" (roughly the shape of a pyramid)

Question

I'm trying to create a kind of visual that displays observations in a data set categorically at different percentage thresholds. It's easier to understand by seeing it; this is my inspiration:

The x-scale and color-coding are trivial, I know d3 has dedicated methods for that. However, I'm at a loss for how to build logic for "piling" the circles at each threshold. The documentation didn't seem to have an answer for that -- the node/force methods looked promising at first, unless I'm mistaken they are not so suitable since my pile is static and there is no need to "connect" any of the circles.

I know I can code circle matrices:

graphGroup.selectAll('circle')
    .data(circData)
    .enter()
    .append('circle')
    .attr('cx', function(d, i) {
        return (i % maxColumn) * 30
    })
    .attr('cy', function(d, i) {
        return ~~((i / maxColumn) % maxColumn) * 30
    })
    .attr('r', 10)
    .style('fill', function(d) {
      return colorMap[d];
    });

However, this doesn't seem realistic for the above visual since I won't know the max columns. I want to pile for the general case -- meaning each data set might have a different configuration of rows/columns. Not to mention the shape is a pyramid and not a square matrix.

Question

Does D3 have anything that can simplify the circle piling element of the above visual? The mark to beat is: .attr('cx', function(d, i) {return (i % maxColumn) * 30}).

Note: It doesn't have to be a perfect pyramid, as long as the circles are piled in the general shape of a pyramid will suffice.