[Go to site: main page, start]

Circular barplot in d3.js




This post describes how to build a very basic circular barplot with d3.js. You can see many other examples in the circular barplot section of the gallery. Learn more about this type of chart in data-to-viz.com. This example works with d3.js v4 and v6


Circular barplot section

Steps:

  • The X scale is defined using a scaleBand as for a normal barplot. However then range usually goes between 0 and 2Pi for a complete circle.

  • The Y scale takes advantage of the scaleRadial() function. A scaleLinear() would work as well, but would visually inflate the importance of high values as explained here and here.

  • Bars are then added using a path and not a rect. The d3.arc() is a life saver here, learn more about how it works here.

  • This chart is still useless: let's add labels.
| 
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->


<!-- Function for radial charts -->


<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->


<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

Related blocks →