Circular barplot | the D3 Graph Gallery

Step by step

Here is a set of examples leading to a proper circular barplot, step by step. The first most basic circular barchart shows how to take advantage of the d3.scaleRadial() function to display bars around a circle. Once this concept is understood, it is relatively straight forward to add labels or another series of bars.

Most basic

The most basic circular barplot you can do in d3.js. Keeping only the core code.

Add labels

Learn how to add labels for each bar. This can be a bit tricky since it recalls a few trigonometry concepts your learned in high school.

Double circular barplot

How to add a second series of value in the circular barplot

Selection of blocks

Radial Stacked Bar

A circular stacked barchart by Mike Bostock showing the population of US states, split in age range.

Circular barchart caveat

An animation by Mike Bostock aiming to describe the bias in circular barchart.

Long bars tend to be visually inflated if no specific care is given.