Skip to main content
100%

Custom circular axis

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jan 9, 2020
Created on Jan 9, 2020

This example shows a donut chart with a custom circular axis that displays proportional values and fee percentages for different investment types. The visualization uses a radial scale implemented through the `d3-scale-radial.js` module, which wraps `d3.scaleLinear` to map numeric values to radial distances, while `d3.pie` and `d3.arc` generate the donut segments. The custom axis places tick marks and labels around a circle at 5% intervals, with labels flipping orientation for values above 0.5. The code also renders fee data as circles positioned using trigonometric calculations based on the linear x-scale, with styles filled from an ordinal color scale.

AI-generated description

forked from <a href='http://bl.ocks.org/AbnormalDistribution-2020/'>AbnormalDistribution-2020</a>'s block: <a href='http://bl.ocks.org/AbnormalDistribution-2020/d4eabff2f2b57d1ba97e1a3b2280a634'>Custom circular axis</a>

mit Licensed

Similar vizzes