In Part 1 of this series on re-creating the Ruder-Finn Intent Index radial bar chart using D3.js, I built the chart's background and category gridlines. In this second part of the series, I'm going to focus on adding the question gridlines and data bars to the chart.
Calculating the category start and end angles and the rotation of the gridlines was fairly straight forward since the circular chart is evenly divided by the number of categories. Doing the same for the questions, whose numbers varied within each category, required a little pre-processing by looping through the data and storing the start and end angles and rotation associated with each question.
 |
| Why People Go Online - Ruder Finn Intent Index |
Calculating the category start and end angles and the rotation of the gridlines was fairly straight forward since the circular chart is evenly divided by the number of categories. Doing the same for the questions, whose numbers varied within each category, required a little pre-processing by looping through the data and storing the start and end angles and rotation associated with each question.
The other little trick here is using the value of "userSpaceOnUse" versus the default of "objectBoundingBox" for the gradientsUnits attribute of the radialGradient, and setting the center coordinate (i.e.: cy and cx) attribute values to 0 and the radius (i.e.: r) attribute value as the maximum radius of the bars. This allows the gradient to radiate from the center for each bar.
If you're paying REALLY close attention, you'll notice that the middle bar in the 6th category (moving clockwise from 12 o'clock) is shorter than the one in the screenshot. This is because the data to the right of the chart in the screenshot (which is what I based my chart on) lists "Manage Finances" as 30%, while the chart in the screenshot is showing roughly 60%.
In Part 3 of this series, I'll focus on adding the labels, which is a little tricky/hacky, because not only do the labels on the bottom half of the chart need to be flipped, but the question text needs to be wrapped and centered in the allotted space.
For a complete listing of the code and a working example, check out the Plunker:
