Accepted answer

You forgot to set the x and y positions of the text elements:

//text to show
    .attr("text-anchor", "middle")
    .attr("x", function(d,i){return i*80+40;}
    .attr("y", h/2)     
    .text(function(d) {
        return parseInt(d);
    .classed('tweet-number', true);

Here is your CodePen:

The <g> element wrap its content and autosize according to the contents, but it doesn't position the contents.

That being said, an alternative is using translate to the groups, and not setting any position for the texts or the circles:

elementGroup.attr("transform", function(d,i){
    return "translate(" + (i*80+40) + "," + h/2 + ")"; 

The result is the same, check the CodePen:

Related Query