Most Basic Circular-Barplot Issue

[stevexm]

Hi, great set of D3 examples, thank you.

A minor bug when trying the most basic circular-barplot. As part of adding the bars, you should also transform the origin of the appended group. Otherwise only a quarter of the plot will be shown. The revised code:

 svg
      .append('g')
//  => this next line needs to be added so that the entire plot is centered in the svg element
      .attr('transform', `translate(${width / 2},${height / 2 + 100})`) 
      .selectAll('path')
      .data(data)
      .join('path')
      .attr('fill', '#69b3a2')
      .attr(
        'd',
        d3
          .arc() // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(d => y(d['Value']))
          .startAngle(d => x(d.Country))
          .endAngle(d => x(d.Country) + x.bandwidth())
          .padAngle(0.01)
          .padRadius(innerRadius),
      );

Thanks again, your gallery is very helpful.