Depois de acrescentar 25 círculos à página, executo a seguinte função:

var transitionPage = function () {
  startThePage();
  var height = $(document).height() - 20
    , width = $(document).width()
    ;

  d3.selectAll("circle")
    .transition().duration(2500)
      .style("fill", "steelblue")
      .attr("r", 15)
    .transition().duration(1000)
      .attr("cy", (height / 2))
    .each(function (d, i) {
      d3.select(this)
        .transition().duration(1000)
        .attr("cx", 30 + (i * width / 25));
    });
}

Isso funciona bem e corretamente alinha-os horizontalmente ao longo do meio da página.

No entanto, não consegui descobrir como transformar cada círculo em um quadrado ou retângulo.

Como devo abordar esse problema?